Cargando
HTML + CSSLoaders
Fast hands clock loader
A clock face with hour marks where the minute hand races and the hour hand follows slowly.
Settings
16px
1x
Code
<div class="uv-lck" role="status"><span class="sr">Loading</span><b style="--a:0deg"></b><b style="--a:30deg"></b><b style="--a:60deg"></b><b style="--a:90deg"></b><b style="--a:120deg"></b><b style="--a:150deg"></b><b style="--a:180deg"></b><b style="--a:210deg"></b><b style="--a:240deg"></b><b style="--a:270deg"></b><b style="--a:300deg"></b><b style="--a:330deg"></b><i class="h"></i><i class="m"></i><i class="c"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
See all LoadersWhere to use it
Time is the obvious metaphor for waiting, and a clock loader makes it literal without feeling generic. This face has twelve ticks, a thick hour hand that completes a lap slowly and a thin red minute hand that spins once per second, both pivoting on a small center cap. It suits scheduling tools, time trackers and booking flows.
The rim and hands take their colors from the two controls, and the speed control scales both hands together. It is pure CSS with no images, so it stays sharp and tiny at any size.