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

Convert spinners to CSS variables (#35960)

Browse Source 
* Convert spinners to CSS variables

* bundlewatch
This commit is contained in:
Mark Otto
2022-03-17 13:49:57 -07:00
committed by GitHub
parent 8182fd9430
commit 71582eabff
3 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
site/content/docs/5.1/components/spinners.md
View File

@@ -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