simple-circular-progress/dist/custom-elements/index.js

Simple circular progress bar to be use in ionic, Angular and React

import { attachShadow, h, proxyCustomElement } from '@stencil/core/internal/client';
export { setAssetPath } from '@stencil/core/internal/client';

const simpleCircularProgressCss = "";

const SimpleCircularProgress = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    attachShadow(this);
    this.progressPercentage = '10';
    this.progressColor = '#2ecc71';
    this.progressStrokeColor = '#e4e4e4ee';
    this.label = '';
    this.labelFontSize = '1.5rem';
    this.hideLabel = false;
  }
  render() {
    return (h("div", { style: {
        width: `100%`,
        height: `100%`,
        display: `flex`,
        alignItems: `center`,
        justifyContent: `center`,
        background: `conic-gradient(${this.progressColor} ${this.progressPercentage}%, 0, ${this.progressStrokeColor} ${(100 - parseInt(this.progressPercentage)).toString()}%)`,
        borderRadius: `50%`,
        boxShadow: `inset 1px 1px 4px 1px`,
      } }, h("div", { style: {
        display: `flex`,
        alignItems: `center`,
        textAlign: `center`,
        justifyContent: `center`,
        backgroundColor: `#fff`,
        height: `80%`,
        width: `80%`,
        borderRadius: `50%`,
        boxShadow: `0px 0px 7px 0px rgba(0, 0, 0, 0.1)`,
      } }, (() => {
      if (!this.hideLabel) {
        return (h("span", { style: {
            fontFamily: `"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif`,
            fontSize: `${this.labelFontSize}`,
            fontWeight: `lighter`,
          }, innerHTML: this.label === '' || this.label === undefined || this.label === null ? this.progressPercentage + '%' : this.label }));
      }
    })())));
  }
  static get style() { return simpleCircularProgressCss; }
};

const SimpleCircularProgress$1 = /*@__PURE__*/proxyCustomElement(SimpleCircularProgress, [1,"simple-circular-progress",{"progressPercentage":[1,"progress-percentage"],"progressColor":[1,"progress-color"],"progressStrokeColor":[1,"progress-stroke-color"],"label":[1],"labelFontSize":[1,"label-font-size"],"hideLabel":[4,"hide-label"]}]);
const defineCustomElements = (opts) => {
  if (typeof customElements !== 'undefined') {
    [
      SimpleCircularProgress$1
    ].forEach(cmp => {
      if (!customElements.get(cmp.is)) {
        customElements.define(cmp.is, cmp, opts);
      }
    });
  }
};

export { SimpleCircularProgress$1 as SimpleCircularProgress, defineCustomElements };