primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-29 17:12:27 +03:00
Code Issues Projects Releases Wiki Activity

Replace animated-ellipsis with AnimatedEllipsis

Browse Source
This commit is contained in:
simurai 2019-11-05 16:33:02 +09:00
parent 83f1f9797e
commit 1bb86e9a6e
2 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/content/components/loaders.md
View File

@ -8,12 +8,19 @@ bundle: loaders
Loaders inform users that an action is still in progress and might take a while to complete.
## Animated ellipsis
The `.animated-ellipsis` can be used for any kind of text to add an animated ellipsis.
## Animated Ellipsis
Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
```html live
<span>Loading</span>
<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span>
<span>Loading</span><span class="AnimatedEllipsis"></span>
```
It can also be used in combination with other components.
```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 bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<button class="btn mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
```

32
src/loaders/loaders.scss
View File

@ -2,30 +2,18 @@
// Animated Ellipsis
.animated-ellipsis-container {
.AnimatedEllipsis {
display: inline-block;
width: 12px;
height: 12px;
// TODO@14.0.0: Remove `overflow: visible`. Used to override styleguide.css
overflow: visible;
transform: translateZ(0);
overflow: hidden;
vertical-align: bottom;
> .animated-ellipsis {
&::after {
content: "...";
display: inline-block;
overflow: hidden;
vertical-align: bottom;
animation: ellipsis 1s infinite;
animation: AnimatedEllipsis-keyframes 1.2s steps(4,jump-none) infinite;
}
@keyframes AnimatedEllipsis-keyframes {
0% { transform: translateX(-100%); }
}
}
@keyframes ellipsis {
from { width: 2px; }
to { width: 12px; }
}
.large-loading-area {
// stylelint-disable-next-line primer/variables
padding: 100px 0;
text-align: center;
}