simple-circular-progress/dist/esm/simple-circular-progress.entry.js

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

import { r as registerInstance, h } from './index-969fa2e4.js';

const simpleCircularProgressCss = "";

const SimpleCircularProgress = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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 }));
      }
    })())));
  }
};
SimpleCircularProgress.style = simpleCircularProgressCss;

export { SimpleCircularProgress as simple_circular_progress };