// 13 examples
CSS Feedback Examples
Feedback is how an interface says what just happened, or what is happening right now. Spinners, progress bars, toast notifications, alert banners, skeleton placeholders, and confirmation states all belong here, and none of them need JavaScript to move.
Most run on animation rather than stored state: a keyframe starts on load, on hover, or the moment a checkbox flips. The ones that have to be dismissed use :target or a checkbox, so the dismissal sticks. Several of these pages are candid about the limit involved, since a progress bar with no script is choreography rather than measurement.
Theme preview area
Dark / Light Mode
A theme switcher built from a checkbox, CSS custom properties and no JavaScript at all.
Hover over me
Hover Tooltip
Tooltips on hover built from CSS pseudo-elements and a
data-tip attribute, with no JavaScript.Examples
Pure CSS
Animated Number Counter
Numbers that count up using
@property, CSS counters, and animations.
Ring
Loading Spinners
Four spinner variants (ring, dots, bars, and orbit) built entirely with CSS animations.
7
Countdown Timer
A visual countdown using
@property integers, CSS counters, and steps() animation.
✓
Changes saved successfully!
✕
ℹ
Session expires in 5 minutes.
✕
Toast Notification
A slide-in notification using
:target to trigger and a CSS animation to auto-dismiss.
Top ↑
Tooltip above
Right →
Right tip
Bottom ↓
← Left
Tooltip Directions
Tooltips pointing top, right, bottom, and left using
::before and ::after pseudo-elements.
Pure CSS
Golden Shimmer
// loading content...
Text Shimmer
A moving gradient shimmer across text using
background-clip: text and CSS keyframes.