Bootstrap 4 Progress Bars






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



Bootstrap 4 Progress Bars



❮ Previous
Next ❯


Basic Progress Bar


A progress bar can be used to show a user how far along he/she is in a
process.




25% Complete




50% Complete




100% Complete



To create a default progress bar, add a .progress class to a
container element
and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:



Example



<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Try it Yourself »



Progress Bar Height

















The height of the progress bar is 16px by default. Use the CSS height property to change
it. Note that you must set the same height for the progress container and the
progress bar:



Example



<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Try it Yourself »


Progress Bar Labels


Add text inside the progress bar to show the visible percentage:




70%



Example



<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Try it Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Colored Progress Bars















































By default, the progress bar is blue (primary). Use any of the Bootstrap 4 contextual background classes to its color:



Example



<!-- Blue -->
<div class="progress">
  <div class="progress-bar"
style="width:10%"></div>
</div>

<!-- Green -->
<div
class="progress">
  <div
class="progress-bar bg-success" style="width:20%"></div>
</div>

<!--
Turquoise -->
<div class="progress">
 
<div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning"
style="width:40%"></div>
</div>

<!-- Red -->
<div
class="progress">
  <div class="progress-bar bg-danger"
style="width:50%"></div>
</div>

<!-- White -->
<div
class="progress border">
  <div
class="progress-bar bg-white" style="width:60%"></div>
</div>

<!--
Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>

<!-- Light Grey -->
<div
class="progress border">
  <div class="progress-bar bg-light"
style="width:80%"></div>
</div>

<!--
Dark Grey -->
<div class="progress">
 
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Try it Yourself »


Striped Progress Bars



























Use the .progress-bar-striped class to add stripes to the progress bars:



Example



<div class="progress">
  <div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>

Try it Yourself »


Animated Progress Bar







Add the .progress-bar-animated class to animate the progress bar:



Example



<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width: 40%"></div>

Try it Yourself »


Multiple Progress Bars


Progress bars can also be stacked:




Free Space


Warning


Danger



Example



<div class="progress">
  <div class="progress-bar bg-success"
style="width:40%">
    Free Space
  </div>
 
<div class="progress-bar bg-warning" style="width:10%">
   
Warning
  </div>
  <div class="progress-bar bg-danger"
style="width:20%">
    Danger
  </div>
</div>

Try it Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more