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 |
mNo edit summary |
||
Line 11: | Line 11: | ||
position: absolute; |
position: absolute; |
||
border-radius: 50%; |
border-radius: 50%; |
||
} |
|||
.radial-progress .circle .mask, |
|||
.radial-progress .circle .fill { |
|||
-webkit-backface-visibility: hidden; |
|||
transition: -webkit-transform 2s; |
|||
transition: -ms-transform 2s; |
|||
transition: transform 2s; |
|||
} |
} |
||
Revision as of 06:25, 25 December 2020
.radial-progress {
position: relative;
border-radius: 50%;
}
.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
}
.radial-progress .inset {
position: absolute;
border-radius: 50%;
}
.radial-progress .inset .percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.radial-progress .inset .percentage .numbers span {
font-weight: 800;
}