← All elements
<div class="dr"></div>About this loader
Two concentric rings spinning in opposite directions, built from partly transparent borders.
How it works
One element draws the outer ring using only its top and bottom borders in colour, and a pseudo-element draws the inner ring with left and right borders. Each rotates at a different speed, the inner one in reverse.
Ways to customise it
- Change #6366f1 and #f43f5e.
- Adjust the border widths for thicker rings.
- Change the speeds.
Good to know
A spinner has no meaning for assistive technology on its own, so add a label. The speeds slow 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.