Bootstrap 5 Progress SASS
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.
- style.scss
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ; $progress- height : 2 rem; $progress-bg: rgba( 32 , 32 , 32 , 0.53 ); $progress-border-radius: 2 rem; .progress { --#{$prefix}progress- height : #{$progress-height}; --#{$prefix}progress-bg: #{$progress-bg}; --#{$prefix}progress-border-radius: #{$progress-border-radius}; } |
- style.css
CSS
.progress { --bs-progress- height : 2 rem; --bs-progress-bg: rgba( 32 , 32 , 32 , 0.53 ); --bs-progress-border-radius: 2 rem; } |
- 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 >Progress 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 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
- style.scss
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ; $progress- height : 1.5 rem; @if $enable-transitions { @keyframes progress-bar-stripes { 0% { background-position-x: $progress-height; } } } |
- style.css
CSS
@keyframes progress-bar-stripes { 0% { background-position-x: 1.5 rem; } } |
- 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 >Progress 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 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:
Reference: https://getbootstrap.com/docs/5.0/components/progress/#sass
Contact Us