CSSFolder — Copy useful CSS

Step progress indicator

A clear progress indicator for multi-step forms, setup flows, and onboarding.

Edit CSS live

.cf-step-progress { width: min(100%, 42rem); font: 600 .95rem/1.3 system-ui, sans-serif; color: #171817; }
.cf-step-progress ol { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.cf-step-progress li { display: grid; grid-template-columns: 2rem auto; align-items: center; gap: .55rem; flex: 1; position: relative; padding: 0 .7rem; color: #596174; }
.cf-step-progress li:not(:last-child)::after { content: ""; height: 2px; background: #c9c5ba; position: absolute; left: calc(2rem + 1.1rem); right: -.2rem; top: 1rem; z-index: -1; }
.cf-step-progress li span:first-child { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid #c9c5ba; background: #fffdf7; }
.cf-step-progress .is-complete span:first-child, .cf-step-progress .is-current span:first-child { border-color: #315cff; background: #315cff; color: #fff; }
.cf-step-progress .is-current { color: #171817; }
.cf-step-progress li:focus-visible { outline: 3px solid #9cff57; outline-offset: 3px; }
@media (max-width: 480px) { .cf-step-progress ol { display: grid; gap: .8rem; } .cf-step-progress li { grid-template-columns: 2rem 1fr; padding: 0; } .cf-step-progress li:not(:last-child)::after { width: 2px; height: .8rem; left: 1rem; right: auto; top: 2rem; } }
@media (prefers-reduced-motion: reduce) { .cf-step-progress * { transition: none; } }

Step progress indicator

Prompt it