Home > Article > Web Front-end > How to create a static progress bar in HTML? (example)
How to create a static progress bar in HTML? (example)
- 藏色散人Original
- 2018-08-14 15:48:566162browse
This article mainly introduces how to implement HTML static progress bar. This can be achieved by combining HTML and CSS code, which is very easy to operate.
html progress bar code example is as follows:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html静态进度条示例</title>
<meta charset="UTF-8">
<style type="text/css">
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
}
.out{
margin:auto;
margin-top:20%;
text-align:center;
height:30px;
width:500px;
background-color: #fff;
border:1px solid #000;
position:relative;
}
.in{
position:absolute;
left:0px;
top:0px;
height:30px;
width:250px;
background-color: #ddd;
}
.num{
position:absolute;
left:0px;
top:0px;
height:30px;
line-height:30px;
width:500px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<div class="mask">
<div class="out">
<div class="in"></div>
<div class="num">50%</div>
</div>
</div>
</body>
</html>The above code displays on the web page as shown below:
As shown in the figure Display, there is a static progress bar on the page and shows 50% progress. Since it is an html static progress bar, it is also possible to change the speed of the html progress bar, that is, change the number, as long as the corresponding style is changed. The principle here is actually to divide a div into two parts, one is the dark part indicating the progress amount, and the other is the blank part indicating the remaining amount. Then mainly set the style of the progress part, that is, distinguish the color width.
Through the above code examples, do you have a certain understanding of the production of HTML static progress bars? I hope this article can help friends in need.
The above is the detailed content of How to create a static progress bar in HTML? (example). For more information, please follow other related articles on the PHP Chinese website!