simple-circular-progress
Version:
Simple circular progress bar to be use in ionic, Angular and React
161 lines (160 loc) • 4.42 kB
JavaScript
import { Component, Prop, h } from '@stencil/core';
export class SimpleCircularProgress {
constructor() {
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 is() { return "simple-circular-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["simple-circular-progress.css"]
}; }
static get styleUrls() { return {
"$": ["simple-circular-progress.css"]
}; }
static get properties() { return {
"progressPercentage": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "progress-percentage",
"reflect": false,
"defaultValue": "'10'"
},
"progressColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "progress-color",
"reflect": false,
"defaultValue": "'#2ecc71'"
},
"progressStrokeColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "progress-stroke-color",
"reflect": false,
"defaultValue": "'#e4e4e4ee'"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"labelFontSize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label-font-size",
"reflect": false,
"defaultValue": "'1.5rem'"
},
"hideLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-label",
"reflect": false,
"defaultValue": "false"
}
}; }
}