Examples of Bootstrap's various progress bars-HTML Tutorial-php.cn

This chapter will explain the Bootstrap progress bar. In this tutorial, you'll see how to use Bootstrap to create a progress bar for loading, redirect, or action states.

Bootstrap progress bars use CSS3 transitions and animations to achieve this effect. Internet Explorer 9 and earlier and older versions of Firefox do not support this feature, and Opera 12 does not support animations.

Default progress bar

The steps to create a basic progress bar are as follows:

Add a

with class .progress.

Next, within the above

, add an empty

with class .progress-bar.

Add a style attribute with a width expressed in percentage, for example style="60%"; means the progress bar is at 60%.

Let us take a look at the following example:

Example

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div></div>

Copy after login

Basic style

The Bootstrap framework provides a basic style for the progress bar , a 100% width background color, and then a highlight color to indicate completion progress. In fact, it is very easy to make such a progress bar. Generally, two containers are used. The outer container has a certain width and a background color is set. The child element sets a width. For example, the completion degree is 30% (that is, the width ratio of the parent container). ), and set a highlight background color for it

The Bootstrap framework is also implemented in this way. It provides two containers. The outer container uses the "progress" style, and the sub-container uses the "progress- bar" style. Among them, progress is used to set the container style of the progress bar, and progress-bar is used to limit the progress of the progress bar

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;  transition: width .6s ease;
}

Copy after login

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

Copy after login

A better way to write accessibility is as follows

<div class="progress"><div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></div></div>

Copy after login

The role attribute tells the search engine that this div is used as a progress bar; the aria-valuenow="40" attribute tells the current progress bar of 40%; aria-valuemin="0 "The attribute tells the minimum value of the progress bar to be 0%; the aria-valuemax="100" attribute tells the maximum value of the progress bar to be 100%

Colored progress bar

The progress bar in the Bootstrap framework is the same as the warning message box. In order to give the user a better experience, different progress bar colors are configured according to different states. It is called a colored progress bar here, which mainly includes the following four types:

　☑ progress-bar-info: Indicates the information progress bar, the color of the progress bar is blue

　☑ progress-bar- success: Indicates a successful progress bar, the color of the progress bar is green

　☑ Progress-bar-warning: Indicates a warning progress bar, the color of the progress bar is yellow

　☑ Progress-bar-danger: Indicates an error Progress bar, the color of the progress bar is red

The specific use is very simple. You only need to add the corresponding class name to the basic progress. Compared with the basic progress bar, the color progress bar is the color of the progress bar. Certain changes

.progress-bar-success {
  background-color: #5cb85c;
}.progress-bar-info {
  background-color: #5bc0de;
}.progress-bar-warning {
  background-color: #f0ad4e;
}.progress-bar-danger {
  background-color: #d9534f;
}

Copy after login

<div class="progress"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Copy after login

Striped Progress Bar

In addition to providing a colored progress bar, the Bootstrap framework also provides a Striped progress bar, this striped progress bar is implemented using CSS3 linear gradient without using any pictures. To use the striped progress bar in the Bootstrap framework, you only need to add the class name "progress-striped" to the container "progress" of the progress bar. Of course, if you want the progress bar stripes to have a color effect like colored progress, you only need to add the class name "progress-striped" to the progress bar. Add the corresponding color class name to the bar

[Note] You can create a stripe effect for the progress bar through gradients. IE9-browser does not support

.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

Copy after login

.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

Copy after login

<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Copy after login

Dynamic Stripes

In order to make the striped progress bar move, the Bootstrap framework also provides a dynamic stripe progress bar. Its implementation principle is mainly accomplished through animation of CSS3. First, a progress-bar-stripes animation is created through @keyframes. This animation mainly does one thing, which is to change the position of the background image, which is the value of background-position. Because the striped progress bar is made through the linear gradient of CSS3, and linear-gradient implements the background image in the corresponding background

[Note] IE9-browser does not support

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}

Copy after login

In the Bootstrap framework, add a class name "active" to the progress bar container "progress", and let the "progress-bar-stripes" animation take effect when the document is loaded, so that it appears from the right Animation effect of left movement

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;
}

Copy after login

<div class="progress progress-striped active"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Copy after login

##Cascading progress bar

In addition to the above-mentioned progress bars, the Bootstrap framework also provides a cascading progress bar. Cascading progress bars can place progress bars in different states together and arrange them horizontally

Put multiple progress bars into the same

.progress to make them appear stacked

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"><span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span>
  </div></div>

Copy after login

[Note] The sum of the cascading progress bars cannot be greater than 100%

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

Copy after login

提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div></div>

Copy after login

　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div></div>

Copy after login

The above is the detailed content of Examples of Bootstrap's various progress bars. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

bootstrap schedule

source：php.cn

Previous article：Example tutorial on landing page design Next article：A detailed introduction to Bootstrap thumbnails

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn