Tooltip With Progress Bar
A storage chip whose tooltip fills a usage bar while the percentage counts up beside it. The number is a registered integer property shown with counter(), so bar and digits stay in step.
Also known as: storage usage tooltip, progress bar tooltip css, quota meter tooltip.
Storage
7.2 GB of 10 GB used
HTML
<span class="tip-progress-meter">
<button type="button" aria-describedby="tip-progress-meter-tip"><span class="tip-progress-meter-gauge" aria-hidden="true"></span>Storage</button>
<span class="tip-progress-meter-tip" id="tip-progress-meter-tip" role="tooltip">
<span class="tip-progress-meter-head"><b>Storage</b><span class="tip-progress-meter-pct" aria-hidden="true"></span></span>
<span class="tip-progress-meter-bar" aria-hidden="true"></span>
7.2 GB of 10 GB used
</span>
</span>CSS
@property --tip-progress-meter-n {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
.tip-progress-meter {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
--v: 72;
margin-bottom: 4.5em; /* room for the tooltip in this preview */
}
.tip-progress-meter button {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 0.95em 0.5em 0.7em;
border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
border-radius: 2em;
background: color-mix(in srgb, var(--c) 8%, transparent);
color: inherit;
font: 600 0.9em/1.2 system-ui, sans-serif;
cursor: pointer;
transition: background-color 0.2s ease;
}
.tip-progress-meter:hover button { background: color-mix(in srgb, var(--c) 16%, transparent); }
.tip-progress-meter button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
/* a ring gauge: a conic fill with its middle masked out */
.tip-progress-meter-gauge {
width: 1.2em;
height: 1.2em;
border-radius: 50%;
background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 22%, transparent) 0);
-webkit-mask: radial-gradient(circle, transparent 0.32em, #000 0.34em);
mask: radial-gradient(circle, transparent 0.32em, #000 0.34em);
}
.tip-progress-meter-tip {
position: absolute;
top: calc(100% + 0.75em);
left: 50%;
z-index: 10;
box-sizing: border-box;
width: 14em;
padding: 0.75em 0.9em 0.8em;
border-radius: 0.7em;
background: color-mix(in srgb, var(--c) 14%, #0f172a);
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
color: rgb(255 255 255 / 0.6);
font: 500 0.8em/1.4 system-ui, sans-serif;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -0.4em);
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s, --tip-progress-meter-n 0s;
}
.tip-progress-meter-tip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 0.65em;
height: 0.65em;
background: inherit;
transform: translate(-50%, 50%) rotate(45deg);
}
.tip-progress-meter-head {
display: flex;
justify-content: space-between;
align-items: baseline;
color: #fff;
}
.tip-progress-meter-pct {
color: color-mix(in srgb, var(--c) 45%, #fff);
font-weight: 700;
font-variant-numeric: tabular-nums;
counter-reset: tip-progress-meter-n var(--tip-progress-meter-n);
}
.tip-progress-meter-pct::after { content: counter(tip-progress-meter-n) "%"; }
.tip-progress-meter-bar {
display: block;
height: 0.5em;
margin: 0.5em 0 0.45em;
overflow: hidden;
border-radius: 1em;
background: rgb(255 255 255 / 0.14);
}
.tip-progress-meter-bar::before {
content: "";
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #22d3ee), var(--c));
transform: scaleX(0);
transform-origin: left;
transition: transform 0s;
}
.tip-progress-meter:hover .tip-progress-meter-tip,
.tip-progress-meter:focus-within .tip-progress-meter-tip {
--tip-progress-meter-n: var(--v);
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s, --tip-progress-meter-n 0.9s cubic-bezier(0.3, 0, 0.2, 1) 0.15s;
}
.tip-progress-meter:hover .tip-progress-meter-bar::before,
.tip-progress-meter:focus-within .tip-progress-meter-bar::before {
transform: scaleX(calc(var(--v) / 100));
transition: transform 0.9s cubic-bezier(0.3, 0, 0.2, 1) 0.15s;
}
@media (prefers-reduced-motion: reduce) {
.tip-progress-meter, .tip-progress-meter *, .tip-progress-meter::before, .tip-progress-meter::after, .tip-progress-meter *::before, .tip-progress-meter *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tip-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--tip-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.