Progress — 100 CSS effects

Progress bars, rings, meters, and completion indicators.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 2 of 2

Ink soaks across a fibrous paper strip and the blurred wet edge keeps creeping at the verge.

A neumorphic groove pressed into a soft slab, holding a raised pill and a slowly breathing marker.

A frosted glass panel floating over coloured light, with a specular streak gliding across it.

A hairline gradient halo turns forever around a static value arc that holds forty six percent.

Progress effects