CSS Showcase · Live Demo
How full is the tank?
The meter element colors itself by optimum, suboptimal, and critical ranges — a semantic gauge progress can't be. Plus a segmented bar driven by data attributes.
Featured demo
mobile · rowsPhotos24.1 GB
Video41 GB
Cache3.2 GB
mobile design patterns
meter-rows.css
/* Storage rows */
.storage-list {
display: grid;
gap: 0.9rem;
inline-size: 100%;
}
.storage-list .row {
display: grid;
gap: 0.4rem;
border: 1px solid var(--border);
border-radius: 0.9rem;
background: var(--card);
padding: 0.7rem 0.9rem;
}
.storage-list .row-head {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 600;
}
.storage-list .row-head span:last-child {
margin-inline-start: auto;
color: var(--muted-foreground);
font-variant-numeric: tabular-nums;
}
.storage-list meter {
inline-size: 100%;
block-size: 0.6rem;
accent-color: var(--primary);
}
.storage-list meter[data-warn] { accent-color: #eab308; }CSS features used
- • meter low / high / optimum
- • meter::-webkit-meter-*
- • ::-moz-meter-bar
- • accent-color
- • data-attribute state
- • Semantic tokens