← All elements
<div class="container">
<div class="loader">
<div class="ball"></div>
</div>
</div>About this loader
A thick cyan arc that rocks back and forth while a white ball swings around it, with a soft reflection below.
How it works
A circle with only its right and bottom borders coloured forms an arc. The arc and a ball element share keyframes that rotate to 90 and 180 degrees and back, so the ball slides around the arc and returns. A box-reflect rule draws the faint mirror image below.
Ways to customise it
- Change #06c8f0 to recolour the arc.
- Edit the 4s duration.
- Resize the 200px circle.
Good to know
-webkit-box-reflect is only supported in WebKit and Blink browsers, so the reflection is a bonus rather than a requirement. The motion itself works everywhere.
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.