diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-03-17 23:49:57 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-17 23:49:57 +0300 |
| commit | 71582eabff54b6ff98aa471350258da70a14c802 (patch) | |
| tree | bfc7ec94555c6eeb7c4774a8ab72574301aca331 /site | |
| parent | 8182fd94308f83f2432aa61bf43268fc40740a92 (diff) | |
Convert spinners to CSS variables (#35960)
* Convert spinners to CSS variables
* bundlewatch
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.1/components/spinners.md | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/site/content/docs/5.1/components/spinners.md b/site/content/docs/5.1/components/spinners.md index ef7efaf58c..bc1b1e64f8 100644 --- a/site/content/docs/5.1/components/spinners.md +++ b/site/content/docs/5.1/components/spinners.md @@ -171,10 +171,28 @@ Use spinners within buttons to indicate an action is currently processing or tak </button> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +Border spinner variables: + +{{< scss-docs name="spinner-border-css-vars" file="scss/_spinners.scss" >}} + +Growing spinner variables: + +{{< scss-docs name="spinner-grow-css-vars" file="scss/_spinners.scss" >}} + +For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following: + +{{< scss-docs name="spinner-border-sm-css-vars" file="scss/_spinners.scss" >}} + +### Sass variables + {{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}} ### Keyframes |