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

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-e998fb5c.js');

const simpleCircularProgressCss = "";

const SimpleCircularProgress = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.progressPercentage = '10';
    this.progressColor = '#2ecc71';
    this.progressStrokeColor = '#e4e4e4ee';
    this.label = '';
    this.labelFontSize = '1.5rem';
    this.hideLabel = false;
  }
  render() {
    return (index.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`,
      } }, index.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 (index.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;

exports.simple_circular_progress = SimpleCircularProgress;