Search
Menu
  1. Home
    1. OnePage
      1. Home
      2. About Us
      3. Testimonials
      4. Prices
      5. Our Team
      6. Contact
    2. Home Page 2
    3. Home Page 3
    4. Home Page 4
    5. Home Page 5
    6. Home Page 6
    7. Home Page 7
  2. Blog
    1. Blog 1
    2. Blog 2
    3. Events
    4. Events 2
    5. Events with maps
    6. Masonry
    7. Catalog
    8. Documents&FAQ
    9. Classifieds
      1. Real Estates
      2. Classifieds with maps
      3. Cars
    10. More examples
      1. Masonry layout 1
      2. Masonry layout 2
      3. Masonry layout 3
      4. Tabs layout
      5. Gallery Slideshow
      6. Multiarticle 1
      7. Multiarticle 2
      8. Simple 1
      9. Simple 2
      10. Simple 3
      11. Accordion 1
      12. Accordion 2
      13. Timeline
  3. Gallery
    1. Gravity gallery 1
    2. Gravity gallery 2
    3. Chameleon
    4. Portfolio 1
    5. Portfolio 2
  4. Groups
  5. Features
    1. Typography
      1. Typography Elements
      2. Tables
      3. Buttons
      4. Responsive Images
      5. Glyphicons
      6. Font Awesome
      7. Boxes
      8. Forms
      9. Content Layout
      10. Info Messages
      11. Progress Bar
      12. Alerts
      13. Labels and Badges
      14. Jumbotron
      15. Dividers
      16. Wells
      17. List Group
      18. List Style
      19. Responsive embed
    2. Short Codes
      1. Pricing
      2. Testimonials
      3. Tabs
      4. Accordions
      5. Flipbox
      6. Counters
      7. Animated Thumbnails
      8. Animations
      9. Dropdowns
      10. Alert Messages
      11. Collapse
      12. Carousel
      13. Affix
      14. Font Icon
      15. Side Menu
      16. Circular menu
      17. Floating menus
    3. Skin Layout
      1. Panes
        1. Home
        2. Inside
        3. Social
      2. Containers
  6. Pages
    1. Full Width
    2. Boxed
    3. FAQ
    4. 404 Error Page
    5. Our Services
    6. Our Team
    7. Testimonials
    8. Pricing
    9. Contact us
  7. Contact us
Search

Progress Bar

FeaturesTypographyProgress Bar

PROGRESS BAR

Basic example 60% Complete
60% Complete 
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
	<span class="sr-only">60% Complete</span>
	</div>
</div>
With label 60%
60% 
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">60%
	</div>
</div>
Low percentages 0%
0% 
<div class="progress">
	<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar">
	0%
	</div>
</div>
Low percentages 2%
2% 
<div class="progress">
	<div style="width: 2%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="2" role="progressbar" class="progress-bar">
	2%
	</div>
</div>
Contextual alternatives 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete 
<div class="progress">
	<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
	<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
	<span class="sr-only">20% Complete</span>
	</div>
</div>
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
	<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
	<span class="sr-only">80% Complete</span>
	</div>
</div>
Striped 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<div class="progress">
	<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success progress-bar-striped">
	<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info progress-bar-striped">
	<span class="sr-only">20% Complete</span>
	</div>
</div>
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning progress-bar-striped">
	<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped">
	<span class="sr-only">80% Complete (danger)</span>
	</div>
</div>
Animated 45% Complete
45% Complete 
<div class="progress">
	<div style="width: 45%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-striped active">
		<span class="sr-only">45% Complete</span>
	</div>
</div>
Stacked 35% Complete (success) 20% Complete (warning) 10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger) 
<div class="progress">
	<div style="width: 35%;" class="progress-bar progress-bar-success">
		<span class="sr-only">35% Complete (success)</span>
	</div>
	<div style="width: 20%;" class="progress-bar progress-bar-warning progress-bar-striped">
		<span class="sr-only">20% Complete (warning)</span>
	</div>
	<div style="width: 10%;" class="progress-bar progress-bar-danger">
		<span class="sr-only">10% Complete (danger)</span>
	</div>
</div>

Animated Progress Loading

90% Complete
65% Complete
80% Complete
50% Complete
View Code 
<div class="progress">
    <div class="progress-bar progress-bar-info eds_progressAnimated" style="width: 90%;">
        <span class="sr-only">90% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success eds_progressAnimated" style="width: 65%;">
        <span class="sr-only">65% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning eds_progressAnimated" style="width: 80%;">
        <span class="sr-only">80% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger eds_progressAnimated" style="width: 50%;">
        <span class="sr-only">50% Complete</span>
    </div>
</div>

RECENT COMMENTS

"It's minimal not just sleek!
"Mission accomplished. It's classic!"

Libero donec, quam in etiam nulla enim eu, pharetra nulla.

RECENT PROJECTS

Check out our carefully crafted products and let us exceed your expectations.

CONTACT US

Feel free to contact us and find out more about pur products.

EDS GALORE SKIN

Galore skin is a unique skin that will satisfy all your needs regarding your webpage. Start at the very beginning or simply use our existing presets. With a few clicks you can lift your webpage to a completely higher level and feel the power of the Galore skin.

Copyright 2024 by DNN Corp Terms Of Use Privacy Statement
Back To Top