吐槽改进日志

静态进度条

字数统计: 1.8k字   |   阅读时长: 9分
,

摘要: 通过 html + css 的方式显示一个静态的进度条

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

在写文章的时候，有时候会想插入个进度条，这个进度条可以在文章里面设置比例，而在浏览器中无法拖动。表示自己对一些事情的预期，或者作为对待办事项的管理等等。

本文用 html 和 CSS 制作简单的静态进度条。最后记录一下调通的 HTML 简单进度条代码，以后需要的时候可以用。

如果熟悉 CSS 的基本知识和特性的话应该会很轻松，例如 border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient 等。不过本文就不专门学习了，直接整理结果可用的代码片段备用即可。

进度条的基本框架

元素

进度条由两部分组成，一个是进度条的总长度，一个是进度的长度。因此我们创建两个 div，一个 div 作为父元素，另一个 div 作为子元素，并分别给他们一个 class 类名，便于对其设置样式。

HTML 代码如下：

1
2
3
<div class="bar">
   <div class="progress">《橘黄bar, 浅黄色progress》70%</div>
</div>

样式

在上面的基本框架下，我们需要给两个 div 设置样式。

  • 第一个 div: 长设置为 300px，高设为 30px，背景颜色设为 #ddd，用 border-radius 属性变为圆角。
  • 第二个 div: 长设置为 70%，高度用 line-height，设置为 30px，颜色设置为 white，用 text-align: center 让位置水平垂直居中。

CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bar {
    width: 600px;
    height: 30px;
    background-color: #ddd;
    border-radius: 20px;
}

.progress {
    line-height: 30px;
    width: 70%;
    color: white;
    border-radius: 20px;
    text-align: center;
    background-color: #4CAF50;
}

完整代码 (灰色bar, 绿色progress)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            body {   
                background-color: LavenderBlush;   
            }   

            .bar {
                width: 600px;
                height: 30px;
                background-color: #ddd;
                border-radius: 20px;
            }
            
            .progress {
                line-height: 30px;
                width: 70%;
                color: white;
                border-radius: 20px;
                text-align: center;
                background-color: #4CAF50;
            }
        </style>
    </head>
    <body>
        <div class="bar">
           <div class="progress">《橘黄bar, 浅黄色progress》70%</div>
        </div>
    </body>
</html>

效果图

HTML+CSS 一些不错的模板

模板1 (橘黄bar, 浅黄色progress)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {   
                background-color: LavenderBlush;   
            }   

            .bar{
                width: 600px;
                height: 30px;
                background-color: #FFCC99;
            }
            
            .progress{
                line-height: 30px;
                width: 50%;
                color: black;
                text-align:center;
                background-color: #FFFFCC;
            }
        </style>
    </head>

    <body>
        <div class="bar">
            <div class="progress">《橘黄bar, 浅黄色progress》50%</div>
        </div>
    </body>
</html>

模板2 (浅蓝bar, 绿色progress)

这个模板在进度条的两段都有字，用了 span，值得注意一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {   
                background-color: AntiqueWhite;   
            }   

            .progress-bar {   
                background-color: AliceBlue;   
                border-radius:3px;   
                width:600px;   
                height:24px;   
                padding:5px;   
                margin:50px;   
                border-bottom:1px solid #444;   
                box-shadow:inset 0 0 2px 0 #000;   
            }   
            .progress-bar span {   
                display:inline-block;   
                width:140px;   
                height:24px;   
                       border-radius:2px;   
                box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
            }   

            .green span{   
                display:inline-block;
                vertical-align:top;
                background-color:#00ff24;   
                box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;   
                -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
                -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
            }  
        </style>
    </head>

    <body>  
        <div class="progress-bar green">
            <span style="width:80%;">《浅蓝bar, 绿色progress》</span>80%
        </div>  
    </body>  
</html>

模板3 (蓝色bar，橘黄progress)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {   
                background-color: AntiqueWhite;   
            }   

            .progress-bar {   
                background-color: LightSkyBlue;   
                border-radius:3px;   
                width:600px;   
                height:24px;   
                padding:5px;   
                margin:50px;   
                border-bottom:1px solid #444;   
                box-shadow:inset 0 0 2px 0 #000;   
            }   
            .progress-bar span {   
                display:inline-block;   
                width:140px;   
                height:24px;   
                       border-radius:2px;   
                box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
            }   

            .orange span{   
                background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
                background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
            }  
        </style>
    </head>

    <body>  
        <div class="progress-bar orange"> 
            <span style="width:40%;">《蓝色bar，橘黄progress》</span>40%
        </div>  
    </body>  
</html>

模板4 (褐色bar, 粉色progress)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {   
                background-color: AntiqueWhite;   
            }   

            .progress-bar {   
                background-color:SteelBlue;   
                border-radius:3px;   
                width:600px;   
                height:24px;   
                padding:5px;   
                margin:50px;   
                border-bottom:1px solid #444;   
                box-shadow:inset 0 0 2px 0 #000;   
            }   
            .progress-bar span {   
                display:inline-block;   
                width:140px;   
                height:24px;   
                       border-radius:2px;   
                box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
                -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
            }   

            .purple span{   
                background-color:#F09;   
                background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);   
                background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));   
                background-size:16px 16px;   
            }  
            .purple span:hover{   
                -webkit-animation:animate-stripes 3s linear infinite;   
                -moz-animation:3s linear 0s normal none infinite animate-stripes;   
            }   
            @-webkit-keyframes animate-stripes {   
                0% {background-position: 0 0;} 100% {background-position: 60px 0;}   
            }   
            @-moz-keyframes animate-stripes {   
                0% {background-position: 0 0;} 100% {background-position: 60px 0;}   
            }  
        </style>
    </head>

    <body>  
        <div class="progress-bar purple"> 
            <span style="width:60%;">《褐色bar, 粉色progress》</span>60%
        </div>  
    </body>  
</html>

模板5: 多个进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {   
                background-color: AntiqueWhite;   
            }   
            .container {
                width: 100%;
                background-color: #ddd;
            }
            .skills {
                text-align: right;
                padding-right: 20px;
                line-height: 40px;
                color: white;
            }
            .html {
                width: 90%; 
                background-color: Green;
            }
            .css {
                width: 80%; 
                background-color: Blue;
            }
            .js {
                width: 65%; 
                background-color: Red;
            }
        </style>
    </head>

    <body>  
        <h1>进度条</h1>
        <p>HTML</p>
        <div class="container">
            <div class="skills html">90%</div>
        </div>
        <p>CSS</p>
        <div class="container">
            <div class="skills css">80%</div>
        </div>
        <p>JavaScript</p>
        <div class="container">
            <div class="skills js">65%</div>
        </div>
    </body>  
</html>

HTML5 自带的方案

meter

1
<meter min="0" max="500" value="350"></meter>

其中，min、max、value 分别表示最小值，最大值与当前值。我们通过修改value属性，即可实现进度条的动态显示。

progress

1
<progress value="22" max="100"></progress>

其中：max 属性描述这个 progress 元素所表示的任务一共需要完成多少工作量，value 属性用来指定该进度条已完成的工作量。

Share