Skip to content

Instantly share code, notes, and snippets.

@FelixLuciano
Last active June 17, 2020 00:11
Show Gist options
  • Save FelixLuciano/42adb6765ca790c6ace408d3e7d0b2e9 to your computer and use it in GitHub Desktop.
Save FelixLuciano/42adb6765ca790c6ace408d3e7d0b2e9 to your computer and use it in GitHub Desktop.
Single div Spinner SFC
"use strict"
class SingleDivSpinner extends HTMLDivElement {
get value () {
return parseInt(this.style.getPropertyValue('--progress'))
}
set value (newValue) {
const animate = (value) => {
value += (newValue - value) / 4
const intValue = Math.round(value)
this.style.setProperty('--progress', value)
this.style.setProperty('--progress-label', intValue)
if (intValue != newValue)
requestAnimationFrame(() => animate(value))
else if(value != newValue)
requestAnimationFrame(() => animate(intValue))
else return
}
animate(this.value)
}
}
customElements.define('single-div-spinner', SingleDivSpinner, { extends: 'div' })
document.head.appendChild(Object.assign(document.createElement('style'), { innerHTML: `
div[is="single-div-spinner"] {
--size: 110px;
--weight: 16px;
--color: #29F;
--border: #333;
--background: var(--page-background);
--progress: 0;
width: var(--size);
height: var(--size);
box-sizing: border-box;
background: linear-gradient(var(--background), var(--background)), conic-gradient(var(--color) calc(var(--progress) * 1%), var(--border) calc(var(--progress) * 1%));
background-origin: border-box;
background-clip: content-box, border-box;
border: var(--weight) solid transparent;
border-radius: 50%;
font-size: calc((var(--size) - var(--weight)) / 4.5);
display: grid;
place-items: center;
place-content: center;
}
div[is="single-div-spinner"]:not(.no-progress):before {
content: " " counters(spinner,"0") "%";
counter-reset: spinner;
counter-increment: spinner var(--progress-label, var(--progress));
font-weight: bold;
}
div[is="single-div-spinner"][data-label]:after {
content: attr(data-label);
font-size: 0.75em;
}
`}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment