Template:Progress ring/ProgressRing.css: Difference between revisions

From Portals of Phereon Wiki
Browse history interactively
Content added Content deleted
mNo edit summary
mNo edit summary
Line 1: Line 1:
.radial-progress {
.progress-ring {
position: relative;
position: relative;
border-radius: 50%;
border-radius: 50%;
}
}


.radial-progress .circle .mask,
.progress-ring .circle .mask,
.radial-progress .circle .fill,
.progress-ring .circle .fill,
.radial-progress .circle .shadow {
.progress-ring .circle .shadow {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
Line 13: Line 13:
}
}


.radial-progress .inset {
.progress-ring .inset {
position: absolute;
position: absolute;
border-radius: 50%;
border-radius: 50%;
}
}


.radial-progress .inset .percentage {
.progress-ring .inset .percentage {
position: absolute;
position: absolute;
top: 50%;
top: 50%;
Line 25: Line 25:
}
}


.radial-progress .inset .percentage .numbers span {
.progress-ring .inset .percentage .numbers span {
font-weight: 800;
font-weight: 800;
}
}

Revision as of 06:50, 25 December 2020

.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;
}
Retrieved from "https://www.portalsofphereon.com/wiki/Template:Progress_ring/ProgressRing.css?oldid=16424"