Add DjlSpinner element
This commit is contained in:
parent
81322e81a2
commit
993d7bed36
|
@ -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)
|
||||||
|
|
15
example.html
15
example.html
|
@ -8,6 +8,7 @@
|
||||||
<script defer src="DjlJson.js"></script>
|
<script defer src="DjlJson.js"></script>
|
||||||
<script defer src="DjlLipsum.js"></script>
|
<script defer src="DjlLipsum.js"></script>
|
||||||
<script defer src="DjlScript.js"></script>
|
<script defer src="DjlScript.js"></script>
|
||||||
|
<script defer src="DjlSpinner.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -39,12 +40,20 @@
|
||||||
<p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
|
<p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<article id="djl-spinner">
|
||||||
|
<p>Loading spinners!</p>
|
||||||
|
<p><djl-spinner /></p>
|
||||||
|
<p>Customize <code>size</code>, <code>background</code> and <code>foreground</code> colours</p>
|
||||||
|
<p><djl-spinner size="25px" background="green" foreground="cyan"></djl-spinner></p>
|
||||||
|
</article>
|
||||||
|
|
||||||
<article id="djl-json">
|
<article id="djl-json">
|
||||||
<p>Below are some examples of the djl-json element. It retrieves a JSON document from <code>src</code>, and displays the property <code>prop</code></p>
|
<p>Below are some examples of the djl-json element. It retrieves a JSON document from <code>src</code>, and displays the property <code>prop</code></p>
|
||||||
<p>My name in example.json is: <djl-json src="example.json" prop="about.name">loading...</djl-json></p>
|
<p>My pets are called:
|
||||||
<p>My pets are called: <djl-json src="example.json" prop="about.pets">loading...</djl-json></p>
|
<djl-json src="example.json" prop="about.pets"></djl-json>
|
||||||
</article>
|
</p>
|
||||||
|
<p>My name in example.json is: <djl-json src="example.json" prop="about.name"><code>loading...</code></djl-json></p>
|
||||||
|
<p>Stick a spinner inside to let people know you're getting something!<djl-json src="example.json" prop="about.dob"><djl-spinner/></djl-json> (you may need to throttle your network if running this locally)</p>
|
||||||
</article>
|
</article>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue