首页 > 代码库 > 用css3写出来的进度条

用css3写出来的进度条

2024-08-10 23:07:29   211人阅读

夜深了，废话不多说，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.1.3.min.js"></script>
</head>
<style>
    * {
        box-sizing: border-box
    }

    .wrapper {
        width: 350px;
        margin: 200px auto
    }

    .wrapper .load-bar {
        width: 100%;
        height: 25px;
        border-radius: 30px;
        background: #70b4e5;
        border-radius: 1rem;
        -webkit-box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
        box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
        position: relative
    }

    .wrapper .load-bar:hover #counter, .wrapper .load-bar:hover .load-bar-inner {
        animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused
    }

    .wrapper .load-bar-inner {
        height: 99%;
        width: 0;
        border-radius: inherit;
        position: relative;
        background: url(images/bar.jpg) repeat;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, .3), 0 4px 5px rgba(0, 0, 0, .3);
        animation: loader 10s linear infinite;
        -moz-animation: loader 10s linear infinite;
        -webkit-animation: loader 10s linear infinite;
        -o-animation: loader 10s linear infinite
    }

    .wrapper #counter {
        position: absolute;
        background: #eeeff3;
        background: linear-gradient(#eeeff3, #cbcbd3);
        background: -moz-linear-gradient(#eeeff3, #cbcbd3);
        background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
        background: -o-linear-gradient(#eeeff3, #cbcbd3);
        padding: 5px 10px;
        border-radius: .4em;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
        left: -25px;
        top: -50px;
        font-size: 12px;
        font-weight: 700;
        width: 44px;
        animation: counter 10s linear infinite;
        -moz-animation: counter 10s linear infinite;
        -webkit-animation: counter 10s linear infinite;
        -o-animation: counter 10s linear infinite
    }

    .wrapper #counter:after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: #cbcbd3;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        left: 50%;
        margin-left: -4px;
        bottom: -4px;
        box-shadow: 3px 3px 4px rgba(0, 0, 0, .2), 1px 1px 1px 1px rgba(0, 0, 0, .1);
        border-radius: 0 0 3px 0
    }

    @keyframes loader {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    @-moz-keyframes loader {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    @-webkit-keyframes loader {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    @-o-keyframes loader {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    @keyframes counter {
        from {
            left: -25px
        }
        to {
            left: 323px
        }
    }

    @-moz-keyframes counter {
        from {
            left: -25px
        }
        to {
            left: 323px
        }
    }

    @-webkit-keyframes counter {
        from {
            left: -25px
        }
        to {
            left: 323px
        }
    }

    @-o-keyframes counter {
        from {
            left: -25px
        }
        to {
            left: 323px
        }
    }

    @keyframes loader {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    .load-bar-inner {
        height: 99%;
        width: 0;
        border-radius: inherit;
        position: relative;
        background: #c2d7ac;
        background: linear-gradient(#e0f6c8, #98ad84);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, .3), 0 4px 5px rgba(0, 0, 0, .3);
        animation: loader 10s linear infinite
    }

</style>
<body>
<div class="wrapper">
    <div class="load-bar">
        <div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
    </div>
</div>
<script type="text/javascript">
    $(function () {

        var interval = setInterval(increment, 99);
        var current = 0;
        function increment() {
            current++;
            $(‘#counter‘).html(current + ‘%‘);
            if (current == 95) {
                clearInterval(interval);
                location.href = "https://www.baidu.com";
                return;
            }
        }
    });
</script>

</body>
</html>

效果图：

技术分享

用css3写出来的进度条






























        

            
                
                  
                
                

                    联系

                    我们