Bootstrap Progress bar Examples

Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)


Dan's Deals All Deals


Recent Comments

Validation Output: 11 ErrorsError Line 1, Column 1: character "." not allowed in prolog.progress{✉Error Line 15, Column 5: character "b" not allowed in prolog border: 12px solid #fff;✉Error Line 20, Column 13: character "s" not allowed in prolog.progress > span{✉Error Line 35, Column 5: character "b" not allowed in prolog border-width: 12px;✉Error Line 46, Column 5: character "t" not allowed in prolog transform-origin: center left;✉Error Line 57, Column 5: character "t" not allowed in prolog transform-origin: center right;✉Error Line 68, Column 5: character "t" not allowed in prolog text-align: center;✉Error Line 80, Column 5: character "b" not allowed in prolog border-color: #fdba04;✉Error Line 90, Column 1: character "}" not allowed in prolog}✉Error Line 101, Column 5: this is not an SGML document }✉Error Line 101, Column 5: cannot continue because of previous errors }
Barre de progression du cercle des extraits de bootstrap à l'aide de HTML CSS Bootstrap

Dommage que le compteur ne fonctionne pas dans ce modèle d'origine. il faut sans doute mixer ceci avec counter js
Barre de progression du cercle des extraits de bootstrap à l'aide de HTML CSS Bootstrap

You need to add the Bootstrap css & js into the html<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
Form wizard (

How to include Same??Save And Continue button doesnot working.. Please hellp
Form wizard (

Ajax call which updates the number and increments the circle.
circle progress bar

Work with Bootstrap v4. All you need to do is to not increment :<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script><!------ Include the above in your HEAD tag ---------->and modify in each sub div tags which contains : class="col-xs-3 bs-wizard-step ...""col-xs-3" by "col-sm-3"
Form Process Steps

waitingDialog.hide() is undefine
"Waiting for..." modal dialog

Are you including jquery and bootstrap?
Form wizard (

Hi, Its very nice demo but I have an issue with that I have paste entire code but page is not showing complete, are there any other libraries, kindly help me.
Form wizard (

How do we change the progress dynamically through JS and Jquery with this snippet? would like to progress smoothly from 0-100 as the value set dynamically.
circle progress bar