Bootstrap 5 Progress SASS

Last Updated : 23 Jul, 2025

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:

👁 Image

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.