<progress>

HTML <progress> Tag

The <progress> tag is one of the HTML5 elements. It is used to display the progress of the task (progress bar). Dynamically changing values of the progress bar must be defined with the scripts (JavaScript).

The appearance of the element can differ, depending on the browser and operating system. （元素的外观可能会有所不同，具体取决于浏览器和操作系统。）

We recommend using the <meter> tag to represent a gauge (e.g., the relevance of a query result).

Syntax

Syntax （语法）

The <progress> tag comes in pairs. The content is written between the opening (<progress>) and closing (</progress>) tags.

Example of the HTML <progress> tag: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <span>Loading:</span>
   <progress value="35" max="100"></progress>
 </body>
</html>

Result

Progress bar

Progress bar （库存条）

A progress bar can be indeterminate and determinate. （进度条可以是不确定和确定的。）

It’s easier to style the indeterminate progress bar, as it doesn’t have the value attribute. We can style it using the CSS negation clause :not().

The determinate progress bar is targeted by the progress[value] selector. Add dimensions to your progress bar with the CSS width and height properties and set the appearance to none:

Styling progress bars

Styling progress bars （进度条的样式。）

Chrome, Safari, and the latest version of Opera (16+) belong to this category. Styling the appearance of the </progress> element can be done with the use of -webkit-appearance: progress-bar.

Set -webkit-appearance: none; to reset the default styles.

progress[value] {
 -webkit-appearance: none;
 appearance: none;
 width: 200px;
 height: 15px;
}

Example of the determinate state of the progress bar: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     progress[value] {
       -webkit-appearance: none;
       appearance: none;
       width: 200px;
       height: 15px;
     }
   </style>
 </head>
 <body>
   <span>Loading:</span>
   <progress value="30" max="100"></progress>
 </body>
</html>

After this, you may have problems because separate pseudo-classes are provided by different browsers for styling the progress bar. To solve this problem, you can use fallbacks. （在此之后，您可能会遇到问题，因为不同的浏览器提供了单独的伪类来设置进度条的样式。要解决此问题，您可以使用回退。）

WebKit/Blink provides two pseudo-classes:

  • -webkit-progress-bar, which styles the progress element container. （- -webkit-progress-bar ，用于设置progress元素容器的样式。）

  • -webkit-progress-value, which styles the value inside the progress bar. （- -webkit-progress-value ，用于设置进度条内的值的样式。）

Style the -webkit-progress-bar with different CSS properties:

progress[value]::-webkit-progress-bar {
 background-color: #eee;
 border-radius: 2px;
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}

Style the -webkit-progress-value, which is the same as the bar, with several gradient backgrounds for different purposes. Use the -webkit- prefix for the gradients:

progress[value]::-webkit-progress-value {
 background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
 border-radius: 4px;
 background-size: 20px 15px, 100% 100%, 100% 100%;
}

Example of the HTML <progress> tag used with CSS properties: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     progress[value] {
       -webkit-appearance: none;
       appearance: none;
       width: 200px;
       height: 15px;
     }
     progress[value]::-webkit-progress-bar {
       background-color: #cccccc;
       border-radius: 4px;
     }
     progress[value]::-webkit-progress-value {
       background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
       border-radius: 4px;
       background-size: 20px 15px, 100% 100%, 100% 100%;
     }
   </style>
 </head>
 <body>
   <span>Loading:</span>
   <progress value="55" max="100"></progress>
 </body>
</html>

Firefox

By using appearence: none we can remove the default bevel and emboss. However, this leaves a slight border in Firefox, which can be removed by using border: none. This solves the border issue with Opera 12 as well.

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     progress[value] {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       border: none;
       width: 200px;
       height: 15px;
     }
   </style>
 </head>
 <body>
   <span>Loading:</span>
   <progress value="55" max="100"></progress>
 </body>
</html>

Firefox provides a single pseudo-class (-moz-progress-bar) that can be used to target the progress bar value. In other words, we cannot style the background of the container in Firefox. （Firefox提供单个伪类（ -moz-progress-bar ） ，可用于定位进度条值。换句话说，我们无法在Firefox中设置容器背景的样式。）

progress[value]::-moz-progress-bar {
 background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
 background-size: 35px 20px, 100% 100%, 100% 100%;
}

Firefox doesn’t support the ::before or ::after pseudo-classes on the progress bar, and doesn’t allow CSS3 keyframe animation on the progress bar, which provides a reduced experience.

Example of the HTML <progress> tag for Firefox: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     progress[value]::-moz-progress-bar {
       background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, 
                         rgba(0, 0, 0, 0.1) 66%, transparent 66%), 
（rgba (0, 0, 0, 0.1) 66%,透明66%),）
                         -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), 
（-moz-linear-gradient (top, rgba (255, 255, 255, 0.25),）
                         rgba(0, 0, 0, 0.25)),
（rgba (0, 0, 0, 0.25)),）
                         -moz-linear-gradient( left, #ff00f7, #4e922a);
       background-size: 35px 20px, 100% 100%, 100% 100%;
     }
   </style>
 </head>
 <body>
   <span>Loading:</span>
   <progress value="35" max="100"></progress>
 </body>
</html>

Example of a cool progress bar use case by scrolling the page!

Example of a cool progress bar use case by scrolling the page! （滚动页面的酷进度条用例示例！）

Here’s an example of how to create a progress bar that shows how far you have scrolled down the page:

<!DOCTYPE html>
<html>
 <head>
   <style>
     #progress-bar {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 5px;
       background-color: #ddd;
     }

     #progress-bar-fill {
       height: 100%;
       background-color: blue;
       width: 0%;
     }
   </style>
 </head>
 <body>
   <div id="progress-bar">
     <div id="progress-bar-fill"></div>
   </div>

   <h1>Scrollable Content</h1>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
     facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
   </p>

   <script>
     window.addEventListener("scroll", function () {
       var progressBarFill = document.getElementById("progress-bar-fill");
       var scrollPosition = window.scrollY;
       var totalHeight = document.body.scrollHeight - window.innerHeight;
       var percentage = (scrollPosition / totalHeight) * 100;
       progressBarFill.style.width = percentage + "%";
     });
   </script>
 </body>
</html>

In this example, we have a fixed position div element with an id of progress-bar that serves as the container for the progress bar. Inside this container, we have another div element with an id of progress-bar-fill that serves as the actual progress bar. （在此示例中，我们有一个固定位置的div元素，其id为progress-bar ，用作progress bar的容器。在此容器中，我们有另一个div元素，其id为progress-bar-fill ，用作实际进度条。）

We’ve used CSS to set the initial width and height of the progress bar, as well as the background colors for the progress bar and the progress bar fill. （我们使用CSS设置进度条的初始宽度和高度，以及进度条和进度条填充的背景颜色。）

We’ve also included a JavaScript event listener that listens for the scroll event on the window object. When the user scrolls the page, we calculate the scroll position and the total height of the page, and then calculate the percentage of the page that has been scrolled. We update the width property of the progress-bar-fill element to reflect this percentage, thereby updating the progress bar. （我们还包括一个JavaScript事件侦听器，用于侦听窗口对象上的滚动事件。当用户滚动页面时，我们计算页面的滚动位置和总高度，然后计算已滚动页面的百分比。我们更新progress-bar-fill元素的width属性以反映此百分比，从而更新进度条。）

You can copy this code into a new HTML file and open it in your web browser to see how it looks. As you scroll down the page, the progress bar will update to reflect how far you have scrolled. You can adjust the height and color of the progress bar to suit your needs. （您可以将此代码复制到新的HTML文件中，并在Web浏览器中打开它，以查看其外观。向下滚动页面时，进度条将更新，以反映您滚动的距离。您可以根据需要调整进度条的高度和颜色。）

Attributes

Attributes （属性）

AttributeValueDescription
maxnumberDefines the maximum volume of the current process. The value can be a positive number bigger than the 0.
valuenumberDefines the size of the already completed task volume. The value can be a number from 0 to numbers, indicated in the max attribute, or a number in the range from 0 to 1, if the max attribute isn’t specified.

The <progress> tag also supports the Global Attributes and the Event Attributes.

← <pre>
<q> →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部