Menu
  1. World
    • All
    • World
      More
    1. Lifestyle
      • All
      • Arts
      • Fashion
      • Health
      • Photography
      • Recipes
      • Travel
      • Cars
      • Business
        More

        No content

        A problem occurred while loading content.

        Previous Next
      1. Fashion
        Previous Next
      2. Sport
      3. Music

        No content

        A problem occurred while loading content.

        Previous Next
      4. Events
        Previous Next
      5. Forum
      6. Maps
      7. Features
      User Menu Search
      Close

      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>
      Terms Of UsePrivacy StatementCopyright 2019 NewsMagazine DNN/DotNetNuke/EVOQ theme Demo by EasyDNNsolutions.com
      Back To Top