Bootstrap 5 Spinners SASS
Last Updated :
16 Jan, 2023
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Â
CSS
@import "../scss/bootstrap.scss";
$spinner-width: 3rem;
$spinner-height: $spinner-width;
$spinner-border-width: .50em;
$spinner-animation-speed: 1s;
|
CSS
.spinner-border {
--bs-spinner-width: 3rem;
--bs-spinner-height: 3rem;
--bs-spinner-border-width: 0.5em;
--bs-spinner-animation-speed: 1s;
--bs-spinner-animation-name: spinner-border;
}
|
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">
GeeksforGeeks
</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:
.gif)
Â
Example 2: Keyframes .spinner-grow is used in this example and its value is changed to new values which will give a new animation
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@keyframes spinner-grow {
0% {
transform: scale(-0.5, 1);
}
80% {
opacity: 5;
transform: none;
}
}
|
CSS
@keyframes spinner-grow {
0% {
transform: scale(-0.5, 1);
}
80% {
opacity: 5;
transform: none;
}
}
|
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">
GeeksforGeeks
</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:
.gif)
Â
Reference: https://getbootstrap.com/docs/5.0/components/spinners/#sass
Share your thoughts in the comments
Please Login to comment...