Loaders

Beta
Not reviewed for accessibility

Source

On this page

Loaders inform users that an action is still in progress and might take a while to complete.

Animated ellipsis

Add an animated ellipsis at the end of text with <span class="AnimatedEllipsis"></span>.

<span>Loading</span><span class="AnimatedEllipsis"></span>

<span>Loading</span><span class="AnimatedEllipsis"></span>

It can also be used in combination with other components.

<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>

<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>

Edit this page on GitHub

4 contributors

Last edited by joelhawksley on August 18, 2021