css彩色加载进度条

css彩色加载进度条

HTML代码

code

1. <div class=”progress”>
2.   <span class=”progress-bar” style=”width: 75%”></span>
3. </div>

CSS代码

code

1. * {
2.   box-sizing: border-box;
3. }
4. body {
5.   min-height: 100vh;
6.   display: -webkit-box;
7.   display: flex;
8.   -webkit-box-pack: center;
9.           justify-content: center;
10.   -webkit-box-align: center;
11.           align-items: center;
12.   background: #191919;
13. }
14. .progress {
15.   width: 100%;
16.   max-width: 260px;
17.   height: 6px;
18.   background: #e1e4e8;
19.   border-radius: 3px;
20.   overflow: hidden;
21. }
22. .progress .progress-bar {
23.   display: block;
24.   height: 100%;
25.   background: -webkit-gradient(linear, left top, right top, from(#ffd33d), color-stop(17%, #ea4aaa), color-stop(34%, #b34bff), color-stop(51%, #01feff), color-stop(68%, #ffd33d), color-stop(85%, #ea4aaa), to(#b34bff));
26.   background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
27.   background-size: 300% 100%;
28.   -webkit-animation: progress-animation 2s linear infinite;
29.           animation: progress-animation 2s linear infinite;
30. }
31. @-webkit-keyframes progress-animation {
32.   0% {
33.     background-position: 100%;
34.   }
35.   100% {
36.     background-position: 0;
37.   }
38. }
39. @keyframes progress-animation {
40.   0% {
41.     background-position: 100%;
42.   }
43.   100% {
44.     background-position: 0;
45.   }
46. }