Bootstrap 5 Progress SASS
Last Updated :
16 Jan, 2023
Bootstrap 5 Progress SASS has a set of variables with default values and keyframes which are used to create CSS animations for the progress bars.
Bootstrap 5 Progress Sass:
- Variables: $progress-height, $progress-bg, $progress-border-radius, etc variables are used to customize the progress bars. You can find the whole list of variables and their default values here.
- Keyframes: They are used for animating progress bars. They are included in the scss/_progress-bar.scss file.
SASS variables with their default values:
$progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: $box-shadow-inset;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;
Â
Description of SASS variables of Progress:
- $progress-height: This variable is used to set the height of the progress bar.
- $progress-bg: This variable is used to set the background color of the progress bar.
- $progress-border-radius: This variable is used to set the border radius of the progress bar.
- $progress-font-size: This variable is used to set the font size of the progress bar.
- $progress-box-shadow: This variable is used to provide a shadow for the progress bar.Â
- $progress-bar-color: This variable is used to set the color of the progress bar.
- $progress-bar-bg: This variable is used to set the background color of how much progress is done in the progress bar.
- $progress-bar-animation-timing: It is the time taken by the animation to complete one cycle.
- $progress-bar-transition: This variable is used to set the transition property given to the progress bar.
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
$progress-height: value;
$progress-bg: value;
$progress-border-radius: value;
...
// Keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
*
}
}
‘. . . ‘ in the above syntax are other variables that you can add and set their value.
‘*’ in the above syntax refers to animation CSS that you can add there.
Example 1: Values of variables are modified from default values in SCSS file.
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss";
$progress-height: 2rem;
$progress-bg: rgba(32, 32, 32, 0.53);
$progress-border-radius: 2rem;
.progress {
--#{$prefix}progress-height: #{$progress-height};
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
}
|
CSS
.progress {
--bs-progress-height: 2rem;
--bs-progress-bg: rgba(32, 32, 32, 0.53);
--bs-progress-border-radius: 2rem;
}
|
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>Progress 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 Progress SASS
</h2>
<br>
<div class="progress">
<div class="progress-bar bg-success"
role="progressbar" style="width: 40%"
aria-valuenow="40"aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</div>
</body>
</html>
|
Output:
Â
Example 2: Keyframes are used in this example to show the animated strips
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss";
$progress-height: 1.5rem;
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% {
background-position-x: $progress-height;
}
}
}
|
CSS
@keyframes progress-bar-stripes {
0% {
background-position-x: 1.5rem;
}
}
|
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>Progress 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 Progress SASS
</h2>
<br>
<div class="progress">
<div class="progress-bar progress-bar-striped
progress-bar-animated"
role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"
style="width: 75%">
</div>
</div>
</div>
</body>
</html>
|
Output:
.gif)
Â
Reference: https://getbootstrap.com/docs/5.0/components/progress/#sass
Share your thoughts in the comments
Please Login to comment...