7.14. Bootstrap5 progress bar

发布时间：2024-01-14 23:00:03 UTC

The progress bar shows the completion of the user’s task.

The steps to create a basic progress bar are as follows

Add a file with a .progress analogous <div> .
And then, up there, <div> inside, add a file with class .progress-bar is empty. <div> .
Object with a width expressed as a percentage style properties, such as style="width:70%" indicates that the progress bar is at 70% of the position.

7.14.1. Example ¶

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

Progress bar height ¶

The progress bar height defaults to 16px. We can use CSS’s height property to modify him:

7.14.2. Example ¶

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

Progress bar label ¶

You can add text to the progress bar, such as the percentage of progress:

7.14.3. Example ¶

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

Progress bars of different colors ¶

By default, the progress bar is blue, and Bootstrap5 also provides progress bars in the following colors:

7.14.4. Example ¶

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

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

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

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

Striped progress bar ¶

Can be used .progress-bar-striped class to set the stripe progress bar

7.14.5. Example ¶

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

Animation progress bar ¶

Use .progress-bar-animated class to add animation to the progress bar:

7.14.6. Example ¶

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

Mixed color progress bar ¶

The progress bar can set a variety of colors:

7.14.7. 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>

文章链接： 7.14. Bootstrap5 progress bar

Principles and Applications of WebGIS 37

Web Frameworks 49

Principles, Technologies, and Methods of Geographic Information Systems 102

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.

Systems 232

Programming Language 353