用css3写出来的进度条

Posted 2020-08-04 杜Amy

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

  1 <style>
  2     * {
  3         box-sizing: border-box
  4     }
  5 
  6     .wrapper {
  7         width: 350px;
  8         margin: 200px auto
  9     }
 10 
 11     .wrapper .load-bar {
 12         width: 100%;
 13         height: 25px;
 14         border-radius: 30px;
 15         background: #70b4e5;
 16         border-radius: 1rem;
 17         -webkit-box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
 18         box-shadow: inset -2px 0 2px #3189dd, inset 0 -2px 2px #d4edf9, inset 2px 0 2px #d4edf9, inset 0 2px 2px #3189dd;
 19         position: relative
 20     }
 21 
 22     .wrapper .load-bar:hover #counter, .wrapper .load-bar:hover .load-bar-inner {
 23         animation-play-state: paused;
 24         -moz-animation-play-state: paused;
 25         -o-animation-play-state: paused;
 26         -webkit-animation-play-state: paused
 27     }
 28 
 29     .wrapper .load-bar-inner {
 30         height: 99%;
 31         width: 0;
 32         border-radius: inherit;
 33         position: relative;
 34         background: url(images/bar.jpg) repeat;
 35         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);
 36         animation: loader 10s linear infinite;
 37         -moz-animation: loader 10s linear infinite;
 38         -webkit-animation: loader 10s linear infinite;
 39         -o-animation: loader 10s linear infinite
 40     }
 41 
 42     .wrapper #counter {
 43         position: absolute;
 44         background: #eeeff3;
 45         background: linear-gradient(#eeeff3, #cbcbd3);
 46         background: -moz-linear-gradient(#eeeff3, #cbcbd3);
 47         background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
 48         background: -o-linear-gradient(#eeeff3, #cbcbd3);
 49         padding: 5px 10px;
 50         border-radius: .4em;
 51         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);
 52         left: -25px;
 53         top: -50px;
 54         font-size: 12px;
 55         font-weight: 700;
 56         width: 44px;
 57         animation: counter 10s linear infinite;
 58         -moz-animation: counter 10s linear infinite;
 59         -webkit-animation: counter 10s linear infinite;
 60         -o-animation: counter 10s linear infinite
 61     }
 62 
 63     .wrapper #counter:after {
 64         content: "";
 65         position: absolute;
 66         width: 8px;
 67         height: 8px;
 68         background: #cbcbd3;
 69         transform: rotate(45deg);
 70         -moz-transform: rotate(45deg);
 71         -webkit-transform: rotate(45deg);
 72         -o-transform: rotate(45deg);
 73         left: 50%;
 74         margin-left: -4px;
 75         bottom: -4px;
 76         box-shadow: 3px 3px 4px rgba(0, 0, 0, .2), 1px 1px 1px 1px rgba(0, 0, 0, .1);
 77         border-radius: 0 0 3px 0
 78     }
 79 
 80     @keyframes loader {
 81         from {
 82             width: 0
 83         }
 84         to {
 85             width: 100%
 86         }
 87     }
 88 
 89     @-moz-keyframes loader {
 90         from {
 91             width: 0
 92         }
 93         to {
 94             width: 100%
 95         }
 96     }
 97 
 98     @-webkit-keyframes loader {
 99         from {
100             width: 0
101         }
102         to {
103             width: 100%
104         }
105     }
106 
107     @-o-keyframes loader {
108         from {
109             width: 0
110         }
111         to {
112             width: 100%
113         }
114     }
115 
116     @keyframes counter {
117         from {
118             left: -25px
119         }
120         to {
121             left: 323px
122         }
123     }
124 
125     @-moz-keyframes counter {
126         from {
127             left: -25px
128         }
129         to {
130             left: 323px
131         }
132     }
133 
134     @-webkit-keyframes counter {
135         from {
136             left: -25px
137         }
138         to {
139             left: 323px
140         }
141     }
142 
143     @-o-keyframes counter {
144         from {
145             left: -25px
146         }
147         to {
148             left: 323px
149         }
150     }
151 
152     @keyframes loader {
153         from {
154             width: 0
155         }
156         to {
157             width: 100%
158         }
159     }
160 
161     .load-bar-inner {
162         height: 99%;
163         width: 0;
164         border-radius: inherit;
165         position: relative;
166         background: #c2d7ac;
167         background: linear-gradient(#e0f6c8, #98ad84);
168         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);
169         animation: loader 10s linear infinite
170     }
171 
172 </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>

效果图：