zoukankan      html  css  js  c++  java
  • 飞机进度条

    css部分
    *{padding:0; margin:0;}

    .container{
        margin: 0 auto;
         60%;
        padding:20px;
    }

    .progress{
        margin-top: 50px;
        padding: 10px;
        background: grey;
        border-radius: 5px;
        height: 20px;
        
    }
    .progress::after{
        content:"";
        display: block;
        margin-top: 9px;
         100%;
        border-top: dashed 3px white;
        
    }
    .progress .progress-bar {
        float: left;
        height: 100%;
        position: relative;
    }
    .progress .progress-bar span{
        display: block;
         40px;
        height: 30px;
        background: #333;
        position: absolute;
        right: -40px;
        top: -50px;
        color: white;
        text-align:center;
        line-height: 30px;
        border-radius: 3px;
    }
    .progress .progress-bar span::before{
        position: absolute;
        font-family: fontawesome;
        content: "f0d7";
        font-size: 24px;
        color: #333;
        top: 18px;
        right: 13px;
    }
    .progress .progress-bar span::after{
        position: absolute;
        font-family: fontawesome;
        content: "f072";
        font-size: 48px;
        color: #333;
        transform: rotateZ(45deg);
        top: 47px;
        right: 5px;
        
    }
    html部分和js部分
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Bootstrap飞机跑道进度条动画特效 - 站长素材</title>
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
     
    <div class="container">
        <div class="progress">
            <div class="progress-bar" style=" 55%; background:#005394;">
                <span>55%</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar" style=" 100%; background:#d9534f;">
                <span>100%</span>
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar" style=" 40%; background:#f0ad4e;">
                <span>40%</span>
            </div>
        </div>
    </div>

    </body>
    </html>
    <script>
        var ps = document.getElementsByClassName("progress-bar");
        for( let i = 0 ; i < ps.length ; i++ ){
            let timer = setInterval( ()=>{
                if( parseInt( ps[i].style.width ) == 100 ){
                    clearInterval( timer );
                }else{
                    ps[i].style.width = parseInt( ps[i].style.width ) +1 + "%";
                    ps[i].children[0].innerHTML = ps[i].style.width;
                }
            },60 )
        }
    </script>
  • 相关阅读:
    Azure ARM (8) ARM Template
    Azure ARM (7) ARM Template
    Azure ARM (6) ARM Template简单介绍
    HBase集群安装过程中的问题集锦
    修改linux最大文件句柄数
    Hadoop 2.2.0部署安装(笔记,单机安装)
    sqoop安装部署(笔记)
    HIVE部署安装(笔记)
    防盗链Nginx设置图片防盗链,设置无效的请仔细看红字
    postgresql 内存分配
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328871.html
Copyright © 2011-2022 走看看