diff --git a/DjlSpinner.js b/DjlSpinner.js
new file mode 100644
index 0000000..8f56b6a
--- /dev/null
+++ b/DjlSpinner.js
@@ -0,0 +1,64 @@
+const getSpinnerCss = ({background, foreground, size}) => {
+ return `
+ @keyframes __spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ .loader {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 0.25em;
+ border: ${size * 0.2}px solid ${background};
+ border-top: ${size * 0.2}px solid ${foreground};
+ border-radius: 50%;
+ width: ${size}px;
+ height: ${size}px;
+ animation: __spin 2s linear infinite;
+ }`
+}
+
+/**
+ * Loading spinner
+ * @attribute background - background color of the spinner
+ * @attribute foreground - foreground color of the spinner
+ * @attribute size - size of the spinner in pixels
+ */
+// TODO: Accept other size formats (ie. %, vh)
+// TODO: Use style attribute instead...?
+class DjlSpinner extends HTMLElement {
+ shadow // ShadowRoot
+ spinner // HTMLDivElement
+ style // HTMLStyleElement
+
+ static get observedAttributes() {
+ return ['background', 'foreground', 'size']
+ }
+
+ constructor() {
+ super()
+
+ this.shadow = this.attachShadow({ mode: 'open' })
+
+ this.spinner = document.createElement('div')
+ this.spinner.classList.add('loader')
+ this.style = document.createElement('style')
+ this.style.innerHTML = getSpinnerCss(this.props())
+
+ this.shadow.appendChild(this.style)
+ this.shadow.appendChild(this.spinner)
+ }
+
+ props = () => ({
+ background: this.getAttribute('background') || '#eee',
+ foreground: this.getAttribute('foreground') || '#333',
+ size: parseInt(this.getAttribute('size')) || 20,
+ })
+
+ attributeChangedCallback() {
+ this.style.innerHTML = getSpinnerCss(this.props())
+ }
+
+}
+
+customElements.define('djl-spinner', DjlSpinner)
+
diff --git a/example.html b/example.html
index 9d1cb21..58122e4 100644
--- a/example.html
+++ b/example.html
@@ -8,6 +8,7 @@
+
@@ -39,12 +40,20 @@
`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`
+
+ Loading spinners!
+
+ Customize size, background and foreground colours
+
+
Below are some examples of the djl-json element. It retrieves a JSON document from src, and displays the property prop
- My name in example.json is: loading...
- My pets are called: loading...
-
+ My pets are called:
+
+
+ My name in example.json is: loading...
+ Stick a spinner inside to let people know you're getting something! (you may need to throttle your network if running this locally)