« Previous Next »

What is a Progress Bar?

A progress bar is a graphical element that shows the progress of a process, typically represented as a horizontal bar that fills as the process advances.

Why Use Progress Bars?

  • User Feedback: They provide immediate visual feedback about the status of a task.
  • Expectation Management: Help users understand how much of a task is completed and how much is left.
  • Engagement: Keep users engaged during lengthy operations.
  • Information Visualization: Effectively convey task completion in a simple, intuitive manner.
  • Encouragement: Motivate users to continue with a task as they see progress.
  • Design Aesthetics: Enhance the overall design, making it look more modern and user-friendly.

ProgressBar Code Examples

            
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Bootstrap progress-bar Example</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>
            
        <!-- Default Progress Bar -->
        <div class="mb-3">
          <h5>Default Progress Bar</h5>
          <div class="progress">
           <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
          </div>
        </div>
            
        <!-- Success Progress Bar -->
        <div class="mb-3">
          <h5>Success Progress Bar</h5>
          <div class="progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
          </div>
        </div>
            
        <!-- Info Progress Bar -->
        <div class="mb-3">
          <h5>Info Progress Bar</h5>
            <div class="progress">
              <div class="progress-bar bg-info" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
            </div>
        </div>
            
        <!-- Warning Progress Bar -->
        <div class="mb-3">
          <h5>Warning Progress Bar</h5>
          <div class="progress">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
          </div>
        </div>
            
        <!-- Danger Progress Bar -->
        <div class="mb-3">
            <h5>Danger Progress Bar</h5>
            <div class="progress">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">15%</div>
            </div>
          </div>
            
        <!-- Multiple Progress Bars -->
        <div class="mb-3">
            <h5>Multiple Progress Bars</h5>
            <div class="progress">
              <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
              <div class="progress-bar bg-info" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
              <div class="progress-bar bg-warning" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
            </div>
        </div>
            
        <!-- Animated Progress Bar -->
        <div class="mb-3">
            <h5>Animated Progress Bar</h5>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
            </div>
        </div>
            
        <!-- Stacked Progress Bars -->
        <div class="mb-3">
          <h5>Stacked Progress Bars</h5>
          <div class="progress">
            <div class="progress-bar bg-primary" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
            <div class="progress-bar bg-secondary" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
          </div>
        </div>
            
        <!-- Custom Height Progress Bar -->
        <div class="mb-3">
          <h5>Custom Height Progress Bar</h5>
          <div class="progress" style="height: 30px;">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
          </div>
        </div>
            
        <!-- Vertical Progress Bar (using custom CSS) -->
        <div class="mb-3">
          <h5>Vertical Progress Bar (Custom)</h5>
          <div class="d-flex align-items-end" style="height: 200px;">
            <div class="progress flex-grow-1" style="height: 100%; width: 30px;">
              <div class="progress-bar bg-success" role="progressbar" style="height: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
            </div>
          </div>
        </div>
            
        <!-- Custom Animated Progress Bar -->
          <div class="mb-3">
            <h5>Custom Animated Progress Bar</h5>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
            </div>
          </div>
            
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      </body>
    </html>

Output Example


Default Progress Bar
70%
Success Progress Bar
50%
Info Progress Bar
25%
Warning Progress Bar
60%
Danger Progress Bar
15%
Multiple Progress Bars
30%
20%
25%
Animated Progress Bar
80%
Stacked Progress Bars
40%
60%
Custom Height Progress Bar
50%
Vertical Progress Bar (Custom)
80%
Custom Animated Progress Bar
90%
« Previous Next »