Skip to content

CSS Showcase · Live Demo

Progress that keeps moving.

Animated linear bars, conic-gradient rings, and step wizards — driven by React state and setInterval, styled with semantic tokens.

Featured demo

mobile · thin-top

Uploads

resume.pdf12%
photo.jpg32%

mobile design patterns

progress-thin-top.css
/* Page-top thin progress bar */
.thin-top-bar {
  position: sticky;
  top: 0;
  height: 3px;
  width: 100%;
  background: color-mix(in oklch, var(--foreground) 10%, transparent);
  z-index: 20;
}

.thin-top-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

CSS features used

  • • position: sticky bar
  • • Nested span width transition
  • • color-mix background tint
  • • z-index layering

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.