纯CSS进度条

进度条样式与动态效果实现

最新推荐文章于 2025-08-04 14:52:35 发布

原创最新推荐文章于 2025-08-04 14:52:35 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #html #css #进度条

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个动态的进度条，包括静态样式设置和动态宽度变化的实现，通过代码片段展示了如何根据数据动态调整进度条的宽度。

<!doctype html>
<head>
<meta charset="UTF-8">
<title>process</title>
<style>
    .ui-process {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    .ui-process .ui-process-static {
        width: 100%;
        height: 15px;
        border-radius: 10px;
        -webkit-box-shadow: 0 0 5px rgba(0, 198, 255,.6);
        box-shadow: 0 0 5px rgba(0, 198, 255,.6);
        background-color: rgba(0, 198, 255,.6);
    }
    .ui-process .ui-process-active {
        position: absolute;
        top: -1px;
        left: 0;
        width: 0;
        height: 14px;
        border: 1px solid #4dafe2;
        border-radius: 10px;
        background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);
        background-color: #008cd5;
        background-size: 20px 38px;
        -box-shadow: box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);
        box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);
        -webkit-animation: process 800ms infinite linear;
        animation: process 800ms infinite linear;
    }
    .ui-process .ui-process-active:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: 10px;
        background-image: linear-gradient(to bottom,rgba(0, 140, 213, .6), rgba(0, 140, 213, .6) 15%, transparent 60%, rgba(0, 140, 213, .6));
    } 

    /* 动画 */
    @-webkit-keyframes process {
        0% { background-position: 0 0; }
        100% { background-position: 20px 0; }
    }
    @keyframes process {
        0% { background-position: 0 0; }
        100% { background-position: 20px 0; }
    }
</style>
<script src="http://10.1.200.15/static/js/jquery-2.1.1.js"></script>
</head>
<body>
<div style="width: 20%;height: 50%">
    <div class="ui-process" data-has='10' data-total='20'>
        <i class="icon-flag"></i>
        <div class="ui-process-static"></div>
        <div class="process-bar ui-process-active"></div>
    </div>
    <div class="ui-process" data-has='10' data-total='30'>
        <div class="ui-process-static"></div>
        <div class="process-bar ui-process-active"></div>
    </div>
    <div class="ui-process" data-has='10' data-total='15'>
        <div class="ui-process-static"></div>
        <div class="process-bar ui-process-active"></div>
    </div>
</div>
<script>
function process(){
    $(".ui-process").each(function(){
        var processBar = $(this).find('.process-bar'),
            widthPercentage = Math.round($(this).data('has')/$(this).data('total')*100);
        if (widthPercentage >= 100) {
            widthPercentage = 100;
        }
        $(this).find('.process-bar').css('width',widthPercentage + '%')
        if (widthPercentage == 0) {
            $(this).find('.process-bar').css('border-style','none');
        }
    });
}
</script>
</body>
</html>