2019-11-05 04:05:17 +03:00
|
|
|
---
|
|
|
|
|
title: Loaders
|
|
|
|
|
path: components/loaders
|
|
|
|
|
status: New
|
2021-03-22 08:34:44 +03:00
|
|
|
source: 'https://github.com/primer/css/tree/main/src/loaders'
|
2019-11-05 04:05:17 +03:00
|
|
|
bundle: loaders
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Loaders inform users that an action is still in progress and might take a while to complete.
|
|
|
|
|
|
2020-04-02 16:18:44 +03:00
|
|
|
## Animated ellipsis
|
2019-11-05 04:05:17 +03:00
|
|
|
|
2019-11-05 10:33:02 +03:00
|
|
|
Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
|
2019-11-05 04:05:17 +03:00
|
|
|
|
2019-11-05 10:33:02 +03:00
|
|
|
```html live
|
|
|
|
|
<span>Loading</span><span class="AnimatedEllipsis"></span>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
It can also be used in combination with other components.
|
2019-11-05 04:05:17 +03:00
|
|
|
|
|
|
|
|
```html live
|
2019-11-05 10:33:02 +03:00
|
|
|
<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
|
|
|
|
|
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
|
2021-07-13 10:43:11 +03:00
|
|
|
<span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
|
2020-01-03 15:28:18 +03:00
|
|
|
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
|
2019-11-05 04:05:17 +03:00
|
|
|
```
|
