模拟动态进度条

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hmycheryl/p/9042783.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用纯CSS实现的动画进度条效果，通过线性渐变和关键帧动画来展示进度变化的过程。该进度条能够随着设定的时间逐渐填充，并最终完成整个进度条的显示。

<style type="text/css">
        .process {
            width: 10px;
            height: 18px;  
            background-color: #5bc0de;
            background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
            -webkit-animation: stripes 5s linear infinite;
            animation: stripes 5s linear infinite;
        }
        .processed {
            padding-right: 100%;
            -webkit-animation: none;
            animation: none;
        }

        @keyframes stripes {
            0%   { padding-right: 1%; } 
            1%   { padding-right: 2%; } 
            3%   { padding-right: 4%; } 
            10%  { padding-right: 5%; } 
            20%  { padding-right: 8%; } 
            30%  { padding-right: 30%; } 
            40%  { padding-right: 50%; } 
            60%  { padding-right: 80%; } 
            80%  { padding-right: 100%; }  
        }

        @-webkit-keyframes stripes {/*Safari and Chrome*/
            0%   { padding-right: 1%; } 
            1%   { padding-right: 2%; } 
            3%   { padding-right: 4%; } 
            10%  { padding-right: 5%; } 
            20%  { padding-right: 8%; } 
            30%  { padding-right: 30%; } 
            40%  { padding-right: 50%; } 
            60%  { padding-right: 80%; } 
            80%  { padding-right: 100%; }  
        }

    </style>
    <body>
        <div style="width:500px;height:20px;">
            <div id="process" class="process"></div>
        </div> 
    </body>
    <script type="text/javascript">
        setTimeout(function(){
            document.getElementById('process').className += ' processed';
        }, 4000);
    </script>