diff --git a/src/wmnds/components/button/_button.njk b/src/wmnds/components/button/_button.njk
index 775205102..60fe55626 100644
--- a/src/wmnds/components/button/_button.njk
+++ b/src/wmnds/components/button/_button.njk
@@ -45,7 +45,7 @@
       {{ _content }}
       {{
         wmndsLoader({
-          customClass: 'wmnds-btn__icon wmnds-btn__icon--right',
+          classes: 'wmnds-btn__icon wmnds-btn__icon--right',
           size: 'btn'
         })
       }}
diff --git a/src/wmnds/components/loader/_example.njk b/src/wmnds/components/loader/_example.njk
new file mode 100644
index 000000000..e79d54fc9
--- /dev/null
+++ b/src/wmnds/components/loader/_example.njk
@@ -0,0 +1,10 @@
+{% raw %}
+{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
+
+{{
+    wmndsLoader({
+        size: "small",
+        classes: null
+    })
+}}
+{% endraw %}
\ No newline at end of file
diff --git a/src/wmnds/components/loader/_loader.njk b/src/wmnds/components/loader/_loader.njk
index 417e7210b..f25ae4ead 100644
--- a/src/wmnds/components/loader/_loader.njk
+++ b/src/wmnds/components/loader/_loader.njk
@@ -5,10 +5,10 @@
 Only two size modifiers are 'large' and 'small' #}
 {% set size = " wmnds-loader--" + params.size if params.size %}
 {% set commentSize = params.size if params.size else "normal" %}
-{% set customClass = " " + params.customClass if params.customClass %} {# Allows custom classes to be added to loader #}
+{% set classes = " " + params.classes if params.classes %} {# Allows custom classes to be added to loader #}
 
 <!-- {{commentSize}} sized loader -->
-<div class="wmnds-loader{{size}}{{customClass}}" role="alert" aria-live="assertive">
+<div class="wmnds-loader{{size}}{{classes}}" role="alert" aria-live="assertive">
   <p class="wmnds-loader__content">Content is loading...</p>
 </div>
 
diff --git a/src/wmnds/components/loader/_properties.njk.json b/src/wmnds/components/loader/_properties.njk.json
new file mode 100644
index 000000000..11701c6da
--- /dev/null
+++ b/src/wmnds/components/loader/_properties.njk.json
@@ -0,0 +1,14 @@
+{
+  "wmndsLoaderProps": [
+    {
+      "name": "size",
+      "type": "string",
+      "description": "Determines the display size of the loader. If left blank, the loader will display at the default size. Other accepted values are <code class='wmnds-website-inline-code'>small</code> or <code class='wmnds-website-inline-code'>large</code>."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the loader component."
+    }
+  ]
+}
diff --git a/src/www/pages/components/loader/index.njk b/src/www/pages/components/loader/index.njk
deleted file mode 100644
index daddadff6..000000000
--- a/src/www/pages/components/loader/index.njk
+++ /dev/null
@@ -1,66 +0,0 @@
-{% extends "www/_layouts/layout-left-pane.njk" %}
-{% set pageTitle="Loader" %}
-{% from "www/_partials/component-example/component-example.njk" import compExample %}
-
-{% block content %}
-{# Loader #}
-<h2>Loader</h2>
-{# What #}
-<h3>What does it do?</h3>
-<ul>
-  <li>
-    Helps users to understand they need to wait for something to finish happening
-  </li>
-  <li>
-    Continues to play the animation until the action is complete
-  </li>
-</ul>
-{# When #}
-<h3>When to use it?</h3>
-<ul>
-  <li>
-    When you are calling an API
-  </li>
-  <li>
-    In there area of the page that the action is occurring
-  </li>
-  <li>
-    Example: within a search box
-  </li>
-</ul>
-{# When not #}
-<h3>When not to use it?</h3>
-<ul>
-  <li>
-    A service should not go live if there is a whole-page loading spinner
-  </li>
-  <li>
-    Try to avoid using a loading spinner, our services should respond quickly
-  </li>
-  <li>
-    If an action takes a long time, users will lose trust in the service
-  </li>
-</ul>
-
-<p>
-  <strong>By default you should aim to use the 'normal sized loader'.</strong> <br>
-  Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.
-</p>
-
-<p>Change the text within <code class="wmnds-website-inline-code">.wmnds-loader__content</code> from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.</p>
-
-{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
-{{
-  compExample([
-    wmndsLoader({
-      size: 'small'
-    }),
-    wmndsLoader(),
-    wmndsLoader({
-      size: 'large'
-    })
-  ])
-}}
-
-
-{% endblock %}
diff --git a/src/www/pages/components/loader/index.njk.md b/src/www/pages/components/loader/index.njk.md
new file mode 100644
index 000000000..797dde10c
--- /dev/null
+++ b/src/www/pages/components/loader/index.njk.md
@@ -0,0 +1,61 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Loader" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
+{% markdown %}
+{# Loader #}
+
+## Loader
+
+{# What #}
+
+### What does it do?
+
+- Helps users to understand they need to wait for something to finish happening
+- Continues to play the animation until the action is complete
+
+{# When #}
+
+### When to use it?
+
+- When you are calling an API
+- In the area of the page that the action is occurring
+- Example: within a search box
+
+{# When not #}
+
+### When not to use it?
+
+- A service should not go live if there is a whole-page loading spinner
+- Try to avoid using a loading spinner, our services should respond quickly
+- If an action takes a long time, users will lose trust in the service
+
+**By default you should aim to use the 'normal sized loader'.** <br>
+Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.
+
+Change the text within <code class="wmnds-website-inline-code">.wmnds-loader\_\_content</code> from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.
+
+{% endmarkdown %}
+
+{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
+{{
+  compExample([
+    wmndsLoader({
+      size: 'small'
+    }),
+    wmndsLoader(),
+    wmndsLoader({
+      size: 'large'
+    })
+  ], {
+    componentPath: "wmnds/components/loader/",
+    njk: true,
+    njkProps: wmndsLoaderProps,
+    js: false,
+    iframe: false
+  })
+}}
+
+{% endblock %}