Template:Progress ring/ProgressRing.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
m (Replaced content with ".radial-progress { position: relative; border-radius: 50%; } .radial-progress .circle .mask, .radial-progress .circle .fill, .radial-progress .circle .shadow { width:...") Tag: Replaced |
(Kozd changed the content model of the page Template:Progress ring/ProgressRing.css from "CSS" to "Sanitized CSS": back to template style) Tag: content model change |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
. |
.progress-ring { |
||
position: relative; |
position: relative; |
||
border-radius: 50%; |
border-radius: 50%; |
||
} |
} |
||
. |
.progress-ring .circle .mask, |
||
. |
.progress-ring .circle .fill, |
||
. |
.progress-ring .circle .shadow { |
||
width: 100%; |
width: 100%; |
||
height: 100%; |
height: 100%; |
||
Line 13: | Line 13: | ||
} |
} |
||
⚫ | |||
.radial-progress .circle .mask, |
|||
.radial-progress .circle .fill { |
|||
-webkit-backface-visibility: hidden; |
|||
transition: -webkit-transform 2s; |
|||
transition: -ms-transform 2s; |
|||
transition: transform 2s; |
|||
} |
|||
⚫ | |||
position: absolute; |
position: absolute; |
||
border-radius: 50%; |
border-radius: 50%; |
||
} |
} |
||
. |
.progress-ring .inset .percentage { |
||
position: absolute; |
position: absolute; |
||
top: 50%; |
top: 50%; |
||
Line 33: | Line 25: | ||
} |
} |
||
. |
.progress-ring .inset .percentage .numbers span { |
||
font-weight: 800; |
font-weight: 800; |
||
} |
} |
Latest revision as of 04:43, 19 January 2021
.progress-ring {
position: relative;
border-radius: 50%;
}
.progress-ring .circle .mask,
.progress-ring .circle .fill,
.progress-ring .circle .shadow {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
}
.progress-ring .inset {
position: absolute;
border-radius: 50%;
}
.progress-ring .inset .percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.progress-ring .inset .percentage .numbers span {
font-weight: 800;
}