Shortcut Input
does not have any value
Dictionary
Shortcut Input
Dictionary
If Result
Parameters
;
/* Colors */
--background:
Parameters
;
--canvas:
Parameters
;
--foreground:
Parameters
;
--text:
Parameters
;
/* Others */
--font:
Parameters
;
--inner-size:
Parameters
px;
--outer-size:
Parameters
px;
background-color: var(--canvas);
display: grid;
font-family: var(--font);
height: 100%;
margin: 0;
padding: 0;
place-items: center;
text-align: center;
}
.outer {
height: var(--outer-size);
position: relative;
transform: scale(0.3);
width: var(--outer-size);
}
.left-half,
.right-half {
background: var(--background);
border-radius: 50%;
clip: rect(0px, var(--outer-size), var(--outer-size), calc(var(--outer-size) / 2));
height: 100%;
position: absolute;
width: 100%;
}
.right-half {
transform: rotate(180deg);
}
.progress {
background: var(--foreground);
border-radius: 50%;
clip: rect(0px, calc(var(--outer-size) / 2), var(--outer-size), 0px);
height: 100%;
position: absolute;
width: 100%;
}
.left-half .progress {
transform: rotate(clamp(0deg, var(--percentage) * 3.6deg, 180deg));
}
.right-half .progress {
transform: rotate(clamp(0deg, (var(--percentage) - 50) * 3.6deg, 180deg));
}
.inner,
.percentage {
left: 50%;
position: absolute;
top: 50%;
}
.inner {
background-color: var(--canvas);
border-radius: 50%;
height: var(--inner-size);
margin: calc(var(--inner-size) / -2) 0 0 calc(var(--inner-size) / -2);
width: var(--inner-size);
}
.percentage {
color: var(--text);
font-size: calc(var(--inner-size) / 3);
transform: translate(-50%, -50%);
}
.percentage:after {
content: counter(percentage) '%';
counter-reset: percentage clamp(0, var(--percentage), 100);
}
</style>
<title>A parametrized pure-CSS circular progress bar</title>
</head>
<body>
<div class="outer">
<div class="left-half">
<div class="progress"></div>
</div>
<div class="right-half">
<div class="progress"></div>
</div>
<div class="inner"></div>
<div class="percentage"></div>
</div>
</body>
</html>
Text
Rich Text from HTML
PDF
Converted Image
Cropped Image
Parameters
-and-
Parameters
-on-
Parameters
-
Parameters
px-
Parameters
pc
Updated Text
Renamed Item
Shortcut Input
does not have any value
If Result
Showcuts
