Bootstrap 5 Spinners SASS
Bootstrap 5 Spinners SASS has a set of variables with default values and keyframes which are used to create CSS animations for the spinners.
Bootstrap 5 Spinners Sass:
- Variables: $spinner-height, $spinner-width, $spinner-border-width, etc variables are used to customize the spinners. You can find the whole list of variables and their default values here.
- Keyframes: They are used for animating spinners. They are included in scss/_spinners.scss file.
The default value of SASS variables of Spinners:
$spinner-width: 2rem; $spinner-height: $spinner-width; $spinner-vertical-align: -.125em; $spinner-border-width: .25em; $spinner-animation-speed: .75s; $spinner-width-sm: 1rem; $spinner-height-sm: $spinner-width-sm; $spinner-border-width-sm: .2em;
Description of SASS variables of Spinners:
- $spinner-width: This variable is used to set the width of the spinner.
- $spinner-height: This variable is used to set the height of the spinner, mostly it is the same as $spinner-width.
- $spinner-border-width: This variable is used to set the border width of the spinner.
- $spinner-animation-speed: This variable is used to set the speed of the animation.
- $spinner-vertical-align: This variable is used to set the vertical alignment of the spinner.
- $spinner-width-sm: This variable is used to set the width of the spinner for a small viewport size (sm).
- $spinner-height-sm: This variable is used to set the height of the spinner for a small viewport size (sm).
- $spinner-border-width-sm: This variable is used to set the border width of the spinner for small viewport size (sm).
Steps to override SCSS of Bootstrap:
Step 1: Install bootstrap using the following command
npm i bootstrap
Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.
@import "../node_modules/bootstrap/scss/bootstrap.scss"; $variable_to_override: value;
Step 3: Convert the SCSS file to CSS using a live server extension.
Step 4: Include your CSS file in your HTML file.
<link rel="stylesheet" href="./assets/css/style.css">
Project Structure:
Syntax:
// Variables $spinner-width: value; $spinner-height: value; $spinner-border-width:value; ... // Keyframes @keyframes spinner-grow { ** }
Here ‘…’ is replaced by the other variables which you want to customize.
Here ‘**’ is replaced by CSS of customized animation.
Example 1: Values of variables are changed from the default values in this example
- SCSS
CSS
@import "../scss/bootstrap.scss" ; $spinner- width : 3 rem; $spinner- height : $spinner-width; $spinner- border-width : . 50em ; $spinner-animation-speed: 1 s; |
- CSS
CSS
.spinner-border { --bs-spinner- width : 3 rem; --bs-spinner- height : 3 rem; --bs-spinner- border-width : 0.5em ; --bs-spinner-animation-speed: 1 s; --bs-spinner-animation-name: spinner-border; } |
- index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Spinners SASS</ title > < link rel = "stylesheet" href = "./assets/css/style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 > Bootstrap 5 Spinners SASS </ h2 > < br > < div class = "d-flex justify-content-center" > < div class = "spinner-border text-success" role = "status" > < span class = "visually-hidden" > Loading... </ span > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: Keyframes .spinner-grow is used in this example and its value is changed to new values which will give a new animation
- SCSS
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ; @keyframes spinner-grow { 0% { transform: scale( -0.5 , 1 ); } 80% { opacity: 5 ; transform: none ; } } |
- CSS
CSS
@keyframes spinner-grow { 0% { transform: scale( -0.5 , 1 ); } 80% { opacity: 5 ; transform: none ; } } |
- index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Spinners SASS</ title > < link rel = "stylesheet" href = "./assets/css/style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 > Bootstrap 5 Spinners SASS </ h2 > < br > < div class = "d-flex justify-content-center" > < div class = "spinner-grow text-success" style = "width: 3rem; height: 3rem;" role = "status" > < span class = "visually-hidden" > Loading... </ span > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#sass
Contact Us