CSS
语言：
CSSSCSS
确定
body,
html,
.wrapper {
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
background: #e7f0f7;
}
.progressbar {
display: block;
position: absolute;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 30px;
}
.progressbar::before,
.progressbar::after {
content: '';
display: block;
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-position: 0 0;
background-repeat: repeat-x;
-webkit-animation: movebar 5s linear infinite;
animation: movebar 5s linear infinite;
}
.progressbar::before {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
}
.progressbar::after {
z-index: 9;
top: 6px;
-webkit-filter: blur(16px);
filter: blur(16px);
opacity: 0.7;
}
.stylization {
position: absolute;
z-index: 999;
height: 4px;
width: 90%;
left: 5%;
top: 6px;
opacity: 0.3;
}
.stylization::before,
.stylization::after {
content: '';
display: block;
position: absolute;
height: 4px;
top: 0;
border-radius: 2px;
}
.stylization::before {
background: #fff;
left: 0;
right: 10px;
}
.stylization::after {
width: 6px;
background: #fff;
right: 0;
}
@-webkit-keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
}
@keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
}
