From 71582eabff54b6ff98aa471350258da70a14c802 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Mar 2022 13:49:57 -0700 Subject: Convert spinners to CSS variables (#35960) * Convert spinners to CSS variables * bundlewatch --- site/content/docs/5.1/components/spinners.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'site') 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 {{< /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 -- cgit v1.2.3