Glass Progress Ring
A frosted storage card whose ring fills to 72 percent while the number counts up, holds, then drains and starts over. One registered @property drives the conic gradient, the glowing cap and counter.
Also known as: glassmorphism progress circle css, circular progress bar glass, frosted progress ring.
HTML
<div class="gls-glass-progress-ring">
<span class="gls-glass-progress-ring-orb gls-glass-progress-ring-orb-a" aria-hidden="true"></span>
<span class="gls-glass-progress-ring-orb gls-glass-progress-ring-orb-b" aria-hidden="true"></span>
<article class="gls-glass-progress-ring-card">
<div class="gls-glass-progress-ring-ring" role="progressbar" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72">
<span class="gls-glass-progress-ring-value"></span>
</div>
<div class="gls-glass-progress-ring-info">
<p class="gls-glass-progress-ring-label">Cloud storage</p>
<p class="gls-glass-progress-ring-amount"><b>92 GB</b> of 128 GB used</p>
<a class="gls-glass-progress-ring-btn" href="#">Manage</a>
</div>
</article>
</div>CSS
@property --gls-glass-progress-ring-p {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
.gls-glass-progress-ring {
--c: var(--gls-color, #3b82f6);
font-size: var(--gls-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 1.25em;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #0f172a), color-mix(in srgb, var(--c) 25%, #4c1d95));
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-glass-progress-ring-orb {
position: absolute;
z-index: -1;
border-radius: 50%;
}
.gls-glass-progress-ring-orb-a {
left: 7.5em;
top: -1.2em;
width: 6.4em;
height: 6.4em;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c));
animation: gls-glass-progress-ring-drift-a 8s ease-in-out infinite alternate;
}
.gls-glass-progress-ring-orb-b {
right: 2.4em;
bottom: 0.4em;
width: 5.2em;
height: 5.2em;
background: linear-gradient(135deg, #fde68a, #f472b6);
animation: gls-glass-progress-ring-drift-b 9s ease-in-out infinite alternate;
}
.gls-glass-progress-ring-card {
display: flex;
align-items: center;
gap: 1.1em;
padding: 1em 1.5em 1em 1em;
border-radius: 1.3em;
background: color-mix(in srgb, #fff 16%, transparent);
-webkit-backdrop-filter: blur(0.9em) saturate(1.5);
backdrop-filter: blur(0.9em) saturate(1.5);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
animation: gls-glass-progress-ring-fill 5.5s infinite;
}
.gls-glass-progress-ring-ring {
position: relative;
display: grid;
place-items: center;
width: 5.4em;
height: 5.4em;
border-radius: 50%;
background: rgb(255 255 255 / 0.1);
box-shadow: inset 0 0.15em 0.4em rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.15);
}
/* track and fill: a conic gradient masked to a band, with a round start cap */
.gls-glass-progress-ring-ring::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 50% 0.33em, color-mix(in srgb, var(--c) 35%, #fff) 0.32em, transparent 0.34em),
conic-gradient(color-mix(in srgb, var(--c) 35%, #fff), var(--c) calc(var(--gls-glass-progress-ring-p) * 1%), rgb(15 23 42 / 0.3) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.66em), #000 calc(100% - 0.64em));
mask: radial-gradient(farthest-side, transparent calc(100% - 0.66em), #000 calc(100% - 0.64em));
}
/* the glowing head, turned to the end of the arc */
.gls-glass-progress-ring-ring::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 0.33em, #fff 0.19em, var(--c) 0.21em 0.32em, transparent 0.34em);
rotate: calc(var(--gls-glass-progress-ring-p) * 3.6deg);
filter: drop-shadow(0 0 0.3em var(--c));
}
.gls-glass-progress-ring-value {
counter-reset: gls-glass-progress-ring-n var(--gls-glass-progress-ring-p);
font-size: 1.35em;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.gls-glass-progress-ring-value::before { content: counter(gls-glass-progress-ring-n); }
.gls-glass-progress-ring-value::after {
content: "%";
margin-left: 0.05em;
font-size: 0.55em;
font-weight: 600;
opacity: 0.8;
}
.gls-glass-progress-ring-info { min-width: 0; }
.gls-glass-progress-ring-label {
margin: 0;
font-size: 0.6em;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
.gls-glass-progress-ring-amount {
margin: 0.25em 0 0.8em;
font-size: 0.7em;
color: rgb(255 255 255 / 0.8);
}
.gls-glass-progress-ring-amount b {
display: block;
color: #fff;
font-size: 1.7em;
font-weight: 700;
letter-spacing: -0.02em;
}
.gls-glass-progress-ring-btn {
display: inline-block;
padding: 0.45em 1em;
border: 1px solid rgb(255 255 255 / 0.4);
border-radius: 99em;
background: rgb(255 255 255 / 0.14);
color: #fff;
font-size: 0.64em;
font-weight: 650;
text-decoration: none;
transition: background-color 0.25s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gls-glass-progress-ring-btn:hover { background: rgb(255 255 255 / 0.28); scale: 1.05; }
.gls-glass-progress-ring-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0.15em; }
@keyframes gls-glass-progress-ring-fill {
0% { --gls-glass-progress-ring-p: 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
40%, 80% { --gls-glass-progress-ring-p: 72; animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }
94%, 100% { --gls-glass-progress-ring-p: 0; }
}
@keyframes gls-glass-progress-ring-drift-a {
to { transform: translate(3em, 1.5em) scale(1.12); }
}
@keyframes gls-glass-progress-ring-drift-b {
to { transform: translate(-3.5em, -1.2em) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
.gls-glass-progress-ring, .gls-glass-progress-ring *, .gls-glass-progress-ring::before, .gls-glass-progress-ring::after, .gls-glass-progress-ring *::before, .gls-glass-progress-ring *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--gls-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--gls-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.