← All elements
<div class="Box">
Loading
<span></span>
</div>About this loader
A spinning arc and a glowing dot orbit a ring around a Loading label.
How it works
A circular border holds the label centred with line-height. Two spinning pieces draw the motion: the main ring arc rotates on one keyframe, and a span with a glowing dot rotates on another so the light seems to orbit the label.
Ways to customise it
- Change #57beec and the dot glow.
- Edit the 150px size.
- Change the Loading text.
Good to know
Add a role of status or aria-live if the label should be announced. The glow relies on box-shadow and costs very little.
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.