1
1
mirror of https://github.com/primer/css.git synced 2024-12-12 10:47:14 +03:00
css/docs/content/components/loaders.md

27 lines
879 B
Markdown
Raw Normal View History

2019-11-05 04:05:17 +03:00
---
title: Loaders
path: components/loaders
status: Beta
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
Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
2019-11-05 04:05:17 +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
<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>
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
```