9+ Bootstrap Progress Bar Examples

This post contains a total of 9+ Bootstrap Progress Bar Examples with Source Code. All these Progress Bars are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Progress Bar Examples

1. By Aashima Jain

Made by Aashima Jain. Bootstrap Progress Bar with Icons. Source

Bootstrap Progress Bar by Aashima Jain

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body{
            margin-top: 50px! important;
        }
        h3{
            margin: 0;
        }
        .progress-title{
            font-size: 16px;
            color:#011627;
            margin:0px 0 30px !important;
            font-weight: 700;
        }
        .progress{
            background-color:#f7f7f7;
            height:15px;
            overflow: visible !important;
            position: relative;
            margin-bottom: 30px;
            border-radius:0px !important;
            box-shadow: none;
        }
        .progress .progress-bar{
            animation: animate-cycle 2s;
            box-shadow: none;
            position: relative;
        }
        .progress .progress-bar:before{
            content: "";
            position: absolute;
            width: 100%;
            top: 6px;
            left: 0;
            border: 2px dashed #fff;
        }
        .progress .progress-bar:after{
            content: "\f206";
            font-family: fontawesome;
            position: absolute;
            right: 0px;
            top: -20px;
            font-size: 50px;
            color: #000;
        }
        @-webkit-keyframes animate-cycle {
            0% { width: 0%; }
        }

        @keyframes animate-cycle {
            0% { width: 0%; }
        }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <h3 class="progress-title">Heading - 90%</h3>
            <div class="progress pink">
                <div class="progress-bar" style="width: 90%;  background-color:#ff007f;">
                </div>
            </div>

            <h3 class="progress-title">Heading - 50%</h3>
            <div class="progress green">
                <div class="progress-bar" style="width: 50%;  background-color:#89E539;">
                </div>
            </div>

            <h3 class="progress-title">Heading - 80%</h3>
            <div class="progress blue">
                <div class="progress-bar" style="width:80%;  background-color:#604BDA;">
                </div>
            </div>


            <h3 class="progress-title">Heading - 65%</h3>
            <div class="progress yellow">
                <div class="progress-bar" style="width:65%; background-color:#FFBD0A;">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2. By Rodolfo RomΓ‘n

Made by Rodolfo RomΓ‘n. Basic Progress Bar. Source

Bootstrap Progress Bar by Rodolfo Roman
<!DOCTYPE html>
<html lang='en' class=''>
<head>
  <title>CodePen Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

  <style class="INLINE_PEN_STYLESHEET_ID">
    .container {
  margin-top: 100px;
}

.progress-bar{
  transition: width 1s;
  height: 50px;
  width: 55%;
}
  </style>
</head>
<body>
  <div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
</body>
</html>

3. By nelle

Made by nelle. Bootstrap Time Progress bar with Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<style>
html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
}
</style>
</head>
<body>
  <div class="container">
 <div class="wrapper align-middle">
   <h1 class="text-center">24 HOURS</h1>
   <h2 class="text-center" id="current-time"></h2>
   <div class="row">
     <div class="col-sm-6">
       <span class="w-100 border" id="start"></span>
     </div>
     <div class="col-sm-6 text-right">
       <span class="w-100 border" id="end"></span>
     </div>
   </div>
     
    <div class="progress">
<!--       <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> -->
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" id="time_spent"></div>
<!--       <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> -->
    </div>
 </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(function () {
  var mmnt, cTime, timeInSec, timeSpent;
  var timeInSec = moment().format('ss');
  var startDay = "1:00 am";
  var endDay = "12:00 am";
  var maxVal = 100;
  var oneDay = 86400;

  $("#start").text(startDay);
  $('#end').text(endDay);

  setInterval(function () {
    mmnt = moment();
    cTime = mmnt.format('h:mm:ss a');
    var dt = new Date();
    var timeInSec = dt.getSeconds() + 60 * (dt.getMinutes() + 60 * dt.getHours());
    tS = timeInSec / 86400 * 100;
    timeSpent = Number.parseFloat(tS).toFixed(3);

    $("#current-time").text(cTime);
    $("#time_spent").attr("aria-valuenow", timeSpent).css({ 'width': timeSpent + "%" });
  }, 1000);
  // mmnt.format('ss') + (60 * (mmnt.format('mm') + (60 * mmnt.format('h'))));
});
    </script>
</body>
</html>

4. By Victor

Made by Victor. Progress Bars with Modern design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans: 100, 200, 300, 400, 500, 600, 700, 800, 900');

* {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  user-select: none;
}

:root {
  /* General Colors */
  --body-bg-color: #191970;
  --main-color: #fff;
  
  /* Progress Bar Colors */
  --html-progress-bar-color: #f66045;
  --css-progress-bar-color: #a37c7c;
  --js-progress-bar-color: #68eb85;
  --react-progress-bar-color: #e01a63;
  --bootstrap-progress-bar-color: #a6afd6;
  
  /* Radii */
  --border-radius: 10px;
  
  /* Shadows */
  --shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--main-color);
  background-color: var(--body-bg-color);
  overflow: hidden;
}

h1 {
  position: absolute;
  top: 30px;
  font-size: 40px;
  text-transform: uppercase;
}

.progress-bar-container {
  position: absolute;
  top: 30vh;
  left: 20%;
}

.progress-bar-container h3 {
  font-size: 25px;
  text-align: left;
  margin-bottom: -30px;
}

.progress-bar-outer {
  width: 900px;
  height: 20px;
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, .3);
  box-shadow: inset var(--shadow);
  margin-bottom: 40px;
  overflow: hidden;
}

.progress-bar-inner {
  width: 0%;
  height: 20px;
  border-radius: var(--border-radius);
  transition: width 3s ease-in-out;
}

.progress-bar-inner-html {
  background-color: var(--html-progress-bar-color);
}

.progress-bar-inner-css {
  background-color: var(--css-progress-bar-color);
}

.progress-bar-inner-js {
  background-color: var(--js-progress-bar-color);
}

.progress-bar-inner-react {
  background-color: var(--react-progress-bar-color);
}

.progress-bar-inner-bootstrap {
  background-color: var(--bootstrap-progress-bar-color);
}

span.progress-percentage {
  position: relative;
  left: 425px;
  bottom: 10px;
  font-size: 30px;
}
</style>
</head>
<body>
  <h1>Progress Bars</h1>

  
  <div class="progress-bar-container">
    <h3>HTML</h3>
    <span class="progress-percentage" id="progress-percentage" data-target="80">0 %</span>
    <div class="progress-bar progress-bar-outer progress-bar-outer-html">
      <div class="progress-bar progress-bar-inner progress-bar-inner-html" id="html-progress-bar"></div>
    </div>

    <h3>CSS</h3>
    <span class="progress-percentage" id="progress-percentage" data-target="32">0 %</span>
    <div class="progress-bar progress-bar-outer progress-bar-outer-css">
      <div class="progress-bar progress-bar-inner progress-bar-inner-css" id="css-progress-bar"></div>
    </div>

    <h3>JavaScript</h3>
    <span class="progress-percentage" id="progress-percentage" data-target="50">0 %</span>
    <div class="progress-bar progress-bar-outer progress-bar-outer-js">
      <div class="progress-bar progress-bar-inner progress-bar-inner-js" id="js-progress-bar"></div>
    </div>

    <h3>React</h3>
    <span class="progress-percentage" id="progress-percentage" data-target="100">0 %</span>
    <div class="progress-bar progress-bar-outer progress-bar-outer-react">
      <div class="progress-bar progress-bar-inner progress-bar-inner-react" id="react-progress-bar"></div>
    </div>

    <h3>Bootstrap</h3>
    <span class="progress-percentage" id="progress-percentage" data-target="79">0 %</span>
    <div class="progress-bar progress-bar-outer progress-bar-outer-bootstrap">
      <div class="progress-bar progress-bar-inner progress-bar-inner-bootstrap" id="bootstrap-progress-bar"></div>
    </div>
  </div>
      <script>
// Progress bars
const htmlProgressBar = document.getElementById('html-progress-bar');
const cssProgressBar = document.getElementById('css-progress-bar');
const javascriptProgressBar = document.getElementById('js-progress-bar');
const reactProgressBar = document.getElementById('react-progress-bar');
const bootstrapProgressBar = document.getElementById('bootstrap-progress-bar');
const innerProgressBars = document.querySelectorAll('.progress-bar-inner');

// Percentage counters
let progressPercentageCounters = document.querySelectorAll('#progress-percentage');


// HTML
setInterval(() => {
  htmlProgressBar.style.width = '80%';
}, 500);

// CSS
setInterval(() => {
  cssProgressBar.style.width = '32%';
}, 700);

// JavaScript
setInterval(() => {
  javascriptProgressBar.style.width = '50%';
}, 900);

// React
setInterval(() => {
  reactProgressBar.style.width = '100%';
}, 1100);

// Bootstrap
setInterval(() => {
  bootstrapProgressBar.style.width = '79%';
}, 1300);
    </script>
</body>
</html>

5. By sebix

Made by sebix. Vertical Bootstrap Progress Bar. Source

Bootstrap Progress Bar by Sebix
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.container { margin-top: 10px; }

.progress-bar-vertical {
  width: 20px;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
  float: left;
}

.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
</style>
</head>
<body>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js type="text/javascript"></script>

<div class="container">

  <div class="progress progress-bar-vertical">
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
      <span class="sr-only">30% Complete</span>
    </div>
  </div>
  
    <div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>

  <div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 100%;">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>

</div>
</body>
</html>

6. By abidibo

Made by abidibo. Bootstrap Progress Bar Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<style>
#progress-bar {
  width: 300px;
  margin: 50px;
}
.progress {
  height: 25px;
  width: 300px;
}
.progress-info {
    color: #000;
    text-align: center;
    font-weight: bold;
}
</style>
</head>
<body>
  <div id="progress-bar">
  <progress class="progress progress-striped progress-success" value="1" max="100">
    <div class="progress">
      <span class="progress-bar" style="width: 1%;">1%</span>
    </div>
  </progress>
  <div class="progress-info">init</div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
var progressBarContainer = $('#progress-bar');
var progressBar = {
  chain: [],
  progress: progressBarContainer.children('progress'),
  progressBar: progressBarContainer.find('.progress-bar'),
  progressInfo: progressBarContainer.children('.progress-info'),
  set: function (value, info, noPush) {
    if (!noPush) {
      this.chain.push(value);
    }
    if (this.chain[0] == value) {
      this.go(value, info);
    } else
    {
      var self = this;
      setTimeout(function () {
        self.set(value, info, true);
      }, 200);
    }
  },
  go: function (value, info) {
    this.progressInfo.text(info);
    var self = this;
    var interval = setInterval(function () {
      var curr = self.progress.attr('value');
      if (curr >= value) {
        clearInterval(interval);
        self.progress.attr('value', value);
        self.progressBar.css('width', value + '%');
        self.chain.shift();
      } else
      {
        self.progress.attr('value', ++curr);
        self.progressBar.css('width', curr + '%');
      }
    }, 10);
  } };


progressBar.set(5, 'some init stuff');
progressBar.set(12, 'checking things');
progressBar.set(22, 'having a beer');
progressBar.set(52, 'installing nothing');
progressBar.set(82, 'Doing something');
progressBar.set(96, 'having a glass of wine');
progressBar.set(100, 'complete');
    </script>
</body>
</html>

7. By Jonathan

Made by Jonathan. Bootstrap Progress bar with Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
      <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Progress Bar</h1>

        <p>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="reset" data-level="info" class="btn btn-default">Reset</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="0" class="btn btn-default">0%</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="10" class="btn btn-default">10%</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="30" class="btn btn-default">30%</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="75" class="btn btn-default">75%</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="100" class="btn btn-default">100%</button>
            <button data-toggle="progressbar" data-target="#myProgressbar" data-value="finish" data-level="success" class="btn btn-default">Finish</button>
        </p>

        <div id="myProgressbar" class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            <span class="sr-only">0% Complete</span>
          </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
      <script>
!function ($) {

  "use strict";

  // PROGRESSBAR CLASS DEFINITION
  // ============================

  var Progressbar = function (element) {
    this.$element = $(element);
  };

  Progressbar.prototype.update = function (value) {
    var $div = this.$element.find('div');
    var $span = $div.find('span');
    $div.attr('aria-valuenow', value);
    $div.css('width', value + '%');
    $span.text(value + '% Complete');
  };

  Progressbar.prototype.finish = function () {
    this.update(100);
  };

  Progressbar.prototype.reset = function () {
    this.update(0);
  };

  // PROGRESSBAR PLUGIN DEFINITION
  // =============================

  $.fn.progressbar = function (option) {
    return this.each(function () {
      var $this = $(this),
      data = $this.data('jbl.progressbar');

      if (!data) $this.data('jbl.progressbar', data = new Progressbar(this));
      if (typeof option == 'string') data[option]();
      if (typeof option == 'number') data.update(option);
    });
  };

  // PROGRESSBAR DATA-API
  // ====================

  $(document).on('click', '[data-toggle="progressbar"]', function (e) {
    var $this = $(this);
    var $target = $($this.data('target'));
    var value = $this.data('value');

    e.preventDefault();

    $target.progressbar(value);
  });

}(window.jQuery);
    </script>
</body>
</html>

8. By Gusti Tammam

Made by Gusti Tammam. Dynamic Bootstrap Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
.progress {
  margin: 10px;
  width: 700px;
}
</style>
</head>
<body>
  <h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
  <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span id="current-progress"></span>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
      <script>
$(function () {
  var current_progress = 0;
  var interval = setInterval(function () {
    current_progress += 10;
    $("#dynamic").
    css("width", current_progress + "%").
    attr("aria-valuenow", current_progress).
    text(current_progress + "% Complete");
    if (current_progress >= 100)
    clearInterval(interval);
  }, 1000);
});
    </script>
</body>
</html>

9. By Daniel

Made by Daniel. Bootstrap Progress Bar with Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
</head>
<body>
  <div class="container border">
  <div id="loading-div" class="progress d-none">
    <div id="dynamic"
         class="progress-bar progress-bar-striped progress-bar-animated" 
         role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    </div>
  </div>
  <form id="selectForm" class="row g-1" style="width: 900;">
    <div class="form-text mt-3">Currently Selecting: <span id="selecting"></span></div>
    <div>
      <input type="range" class="form-range" min="0" max="10" step="1" id="start">
      <input type="range" class="form-range" min="0" max="10" step="1" id="end">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
      <script>
var arr = ["pathnames", "pathIds", "file name", "fileid", "created", "updated", "sheet_id", "sheet_name", "columns", "row_count", "stuff"];

var $minRng = $('#start');
var $maxRng = $('#end');
var min = 0;
var max = arr.length - 1;
var stepDist = 100 / (max - min);
var startVal = min;
var endVal = max;


function updateLabelText() {
  $('#selecting').text(arr[startVal] + ' - ' + arr[endVal]);
}

$minRng.attr('min', min).attr('max', max).val(min);
$maxRng.attr('min', min).attr('max', max).val(max);
updateLabelText(min, max);

$('.form-range').change(function () {
  startVal = parseInt($minRng.val());
  endVal = parseInt($maxRng.val());

  if ($(this).attr('id') == 'end') {
    if (endVal < min + 1) {
      startVal = min;
      endVal = min + 1;
    } else if (endVal < startVal) {
      startVal = endVal - 1;
    }
  }
  if ($(this).attr('id') == 'start') {
    if (startVal > max - 1) {
      startVal = max - 1;
      endVal = max;
    } else if (startVal > endVal) {
      endVal = startVal + 1;
    }
  }

  $minRng.val(startVal);
  $maxRng.val(endVal);
  updateLabelText();
});

$('#selectForm').submit(function (e) {
  e.preventDefault();
  updateBar();
});

function updateBar() {
  $('#loading-div').toggleClass('d-none');
  var current_progress = 0;
  var stepDist = 100 / (max - min);
  var interval = setInterval(function () {
    current_progress += stepDist;
    $("#dynamic").
    css("width", current_progress + "%").
    attr("aria-valuenow", current_progress).
    text(current_progress + "% Complete");
    if (current_progress >= 100) {
      $('#loading-div').toggleClass('d-none');
      clearInterval(interval);
    }
  }, 1000);
};
    </script>
</body>
</html>

10. By Steve Raeburn

Made by Steve Raeburn. Simple Progress Bar. Source

Bootstrap Progress Bar by Steve Raeburn
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.container {
  margin: 2em;
}

.progress {
  overflow: hidden;
  height: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-bar-todo {
  background-color: #4a6785;
}
.progress-bar-inProgress {
  background-color: #ffd351;
}
.progress-bar-done {
  background-color: #14892c;
}
</style>
</head>
<body>
  <div class="container">

<div class="progress">
  <div class="progress-bar progress-bar-done" style="width: 30%"></div>
  <div class="progress-bar progress-bar-inProgress" style="width: 10%"></div>
  <div class="progress-bar progress-bar-todo" style="width: 60%"></div>
</div>
</div>
</body>
</html>