一个漂亮的进度条

 在今年上半年的项目中用div做过一个进度条，动态显示库存情况，展示方式有点像win10风格的磁盘空间，简洁明了，那个进度条也是来自几年前的收藏。这几年为了更好的适应移动端，响应式布局成为主流，下面这个进度条除了有动态的效果，还具备自适应能力，美观大方的同时更加适合于执行具体任务的场景，留作备用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress</title>
    <style type="text/css">
        .main {
            padding: 20px 28px;
            margin: 0 auto;
        }

        .progressNum {
            text-align: center;
            font-size: 12px;
            font-family: 'microsoft yahei';
            color: #000;
        }
        @keyframes progress-bar-stripes {
            from {
                background-position: 40px 0;
            }

            to {
                background-position: 0 0;
            }
        }
        .progress {
            height: 22px;
            margin-bottom: 22px;
            overflow: hidden;
            background-color: #e4eaec;
            border-radius: 3px;
            -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: 22px;
            color: #fff;
            text-align: center;
            background-color: #62a8ea;
            -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;
            -o-transition: width .6s ease;
            transition: width .6s ease;
        }
        .progress-bar-striped, .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: -o-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);
            -webkit-background-size: 40px 40px;
            background-size: 40px 40px;
        }
        .progress-bar.active, .progress.active .progress-bar {
            -webkit-animation: progress-bar-stripes 2s linear infinite;
            -o-animation: progress-bar-stripes 2s linear infinite;
            animation: progress-bar-stripes 2s linear infinite;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 35.5%" role="progressbar">
            </div>
        </div>
        完成进度:<span id="progressNum">35.5% </span>
    </div>
</body>
</html>

 

posted @ 2016-11-18 08:18  京沙  阅读(802)  评论(0)    收藏  举报