<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/*
* A parametrized pure CSS circular progress bar
* by Antonio Bueno github.com/atnbueno
* https://gist.github.com/atnbueno/f5f7477443d39e46f0daebc855c8701f
*
* The content of this file is licensed under the terms
* of the MIT license: opensource.org/licenses/MIT
*
* Inspired by dottedsquirrel.com/circular-progress-css
*/
html,
body {
/* Value */
--percentage:
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>
Shortcut Input
Ask Each Time
