@universal-material/web/progress/circular-progress.js

Material web components

import { __decorate } from "tslib";
import { LitElement, svg } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './circular-progress.styles.js';
const basePercentage = 255;
// https://codepen.io/ConAntonakos/pen/ryMaOX
let UmCircularProgress = class UmCircularProgress extends LitElement {
    constructor() {
        super(...arguments);
        this.max = 1;
    }
    static { this.styles = [styles]; }
    render() {
        return this.value === undefined
            ? this.#renderIndeterminate()
            : this.#renderDeterminate();
    }
    #renderCircle(className) {
        return svg `
      <svg class="circular ${className}" viewBox="0 0 50 50">
        <circle
          class="path"
          cx="50%"
          cy="50%"
          r="20"
          fill="none"
          stroke-width="4"
          stroke-miterlimit="10" />
      </svg>`;
    }
    #renderIndeterminate() {
        return this.#renderCircle('indeterminate');
    }
    #renderDeterminate() {
        let proportion = this.value / this.max;
        const offset = proportion === 0 || proportion === 1
            ? 0
            : 0.10625;
        proportion = Math.floor(proportion * 100) / 100;
        const percentage = basePercentage - basePercentage * proportion;
        const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
        return svg `
      <svg class="circular on-going" viewBox="0 0 50 50">
        <circle
          class="path"
          cx="50%"
          cy="50%"
          r="20"
          fill="none"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-dasharray=${`${basePercentage}%`} 
          stroke-dashoffset=${`${percentage}%`} />
      </svg>
      <svg class="circular track on-going" viewBox="0 0 50 50">
        <circle
          class="path"
          cx="50%"
          cy="50%"
          r="20"
          fill="none"
          stroke-width="4"
          stroke-miterlimit="10"
          stroke-dasharray=${`${basePercentage}%`}
          stroke-dashoffset=${`${trackPercentage}%`}/>
      </svg>
    `;
    }
};
__decorate([
    property({ type: Number })
], UmCircularProgress.prototype, "value", void 0);
__decorate([
    property({ type: Number })
], UmCircularProgress.prototype, "max", void 0);
UmCircularProgress = __decorate([
    customElement('u-circular-progress')
], UmCircularProgress);
export { UmCircularProgress };
//# sourceMappingURL=circular-progress.js.map