← All elements
<div class="dob"><span></span></div>About this border
A circular avatar surrounded by a slowly turning dotted ring drawn with a repeating conic gradient.
How it works
A repeating conic gradient draws short dashes around a circle. A radial-gradient mask cuts out the middle so only the ring remains, and the ring slowly rotates around the avatar in the centre.
Ways to customise it
- Change the dash length 6deg and the gap 15deg.
- Recolour the ring.
- Place a photo in the centre.
Good to know
Masks are well supported in current browsers. The rotation stops under reduced motion.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.