用css3写出来的进度条

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

 <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:;
         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:;
         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:;
         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>

<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>

效果图：