MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added ability to center or not center the mt-circular-progress.

Browse Source
This commit is contained in:
Matt Mo 2021-10-20 10:06:53 -07:00
parent 3b6365ae75
commit ac6c7301c7
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
circular-progress.js
View File

@ -19,7 +19,6 @@ class CircularProgress extends IgniteElement {
} }
mt-circular-progress > div > svg { mt-circular-progress > div > svg {
position: absolute;
z-index: 1; z-index: 1;
animation: rotator 2s linear infinite; animation: rotator 2s linear infinite;
} }
@ -61,7 +60,8 @@ class CircularProgress extends IgniteElement {
loading: true, loading: true,
size: "4em", size: "4em",
strokeWidth: "3.6", strokeWidth: "3.6",
stroke: "#4285F4" stroke: "#4285F4",
center: true
}; };
} }
@ -72,8 +72,9 @@ class CircularProgress extends IgniteElement {
.attribute("viewBox", "22 22 44 44") .attribute("viewBox", "22 22 44 44")
.style("width", this.size) .style("width", this.size)
.style("height", this.size) .style("height", this.size)
.style("left", this.size, null, size => `calc(50% - (${size} / 2))`) .style("left", [this.size, this.center], null, (size, center) => center ? `calc(50% - (${size} / 2))` : null)
.style("top", this.size, null, size => `calc(50% - (${size} / 2))`) .style("top", [this.size, this.center], null, (size, center) => center ? `calc(50% - (${size} / 2))` : null)
.style("position", this.center, true, center => center ? "absolute" : "relative")
.show(this.loading) .show(this.loading)
.child( .child(
new circle() new circle()