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

Made circular progress have a single color and made it changeable via a property.

Browse Source
This commit is contained in:
Matt Mo 2021-03-10 08:57:10 -08:00
parent ac43b68f93
commit b850b82fe7
1 changed files with 5 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
circular-progress.js
View File

@ -17,7 +17,7 @@ class CircularProgress extends IgniteElement {
mt-circular-progress > div > svg > circle {
stroke-dasharray: 80px, 200px;
stroke-dashoffset: 0px;
animation: dash 2s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 2s ease-in-out infinite;
}
@keyframes rotator {
@ -29,24 +29,6 @@ class CircularProgress extends IgniteElement {
}
}
@keyframes colors {
0% {
stroke: #4285F4;
}
25% {
stroke: #DE3E35;
}
50% {
stroke: #F7C223;
}
75% {
stroke: #1B9A59;
}
100% {
stroke: #4285F4;
}
}
@keyframes dash {
0% {
stroke-dasharray: 1px, 200px;
@ -68,7 +50,8 @@ class CircularProgress extends IgniteElement {
return {
loading: true,
size: "4em",
stroke: "3.6"
strokeWidth: "3.6",
stroke: "#4285F4"
};
}
@ -88,7 +71,8 @@ class CircularProgress extends IgniteElement {
.attribute("cy", "44")
.attribute("r", "20.2")
.attribute("fill", "none")
.attribute("stroke-width", this.stroke)
.attribute("stroke-width", this.strokeWidth)
.attribute("stroke", this.stroke)
),
new slot(this)
)