mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 06:21:26 +02:00
Code Issues Releases Wiki Activity

WIP: Add loading dots spinner

Browse Source
This commit is contained in:
Mark Otto
2022-12-19 21:39:39 -08:00
parent 33dd82448c
commit 61c57c4e4e
2 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
scss/_spinners.scss
View File

@@ -83,3 +83,36 @@
}
}
}
//
// Moving dots
//
// scss-docs-start spinner-dots-keyframes
@keyframes spinner-dots {
0% {
opacity: 1;
}
50%,
100% {
opacity: .3;
}
}
// scss-docs-end spinner-dots-keyframes
.spinner-dots {
user-select: none;
> circle:first-of-type,
> circle:nth-of-type(2),
> circle:last-of-type {
fill: currentcolor;
animation: spinner-dots .75s infinite ease-in-out alternate;
}
> circle:nth-of-type(2) {
animation-delay: .25s;
}
> circle:last-of-type {
animation-delay: .5s;
}
}

26
site/content/docs/5.2/components/spinners.md
View File

@@ -66,6 +66,32 @@ Once again, this spinner is built with `currentColor`, so you can easily change
{{< /spinner.inline >}}
{{< /example >}}
## Loading dots spinner
The loading dots spinner is a special spinner that's built using an SVG, making it much easier to work style and animate with CSS. Rather than generate pseudo-elements with `::before` and `::after`, we just have one, tiny HTML element.
{{< callout info >}}
Loading dots should be named `.loading-dots`, but for consistency's sake, we're using `.spinner-dots`.
{{< /callout >}}
{{< example >}}
<svg class="spinner-dots" width="32" height="16" role="status" xmlns="http://www.w3.org/2000/svg">
<title>Loading...</title><circle cx="4" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><circle cx="28" cy="8" r="4"/>
</svg>
{{< /example >}}
And as usual, this spinner is styled with `currentColor`, so text color utilities can be applied.
{{< example >}}
{{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<svg class="spinner-dots text-{{ .name }}" width="32" height="16" role="status" xmlns="http://www.w3.org/2000/svg">
<title>Loading...</title><circle cx="4" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><circle cx="28" cy="8" r="4"/>
</svg>
{{- end -}}
{{< /spinner.inline >}}
{{< /example >}}
## Alignment
Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.