Single div Spinner SFC

single-div-spinner.js

"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;
  }
`}))