SCSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #B24592;
background: linear-gradient(to left, #B24592 , #F15F79);
}
.line {
position: relative;
width: 400px;
height: 10px;
background: rgba(255, 255, 255, .1);
&:before {
animation: progress-1 4s infinite;
transform-origin: 0 0;
content: "";
display: block;
width: 400px;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,1));
}
&:after {
content: "";
position: absolute;
animation: progress-2 4s infinite;
transform-origin: 90% 50%;
margin-left: -24px;
top: -9px;
width: 40px;
height: 21px;
border-radius: 2px;
background: rgba(210,189,255,.55);
filter: blur(8px);
box-shadow: 0 0 10px 6px rgba(210,189,255,.4),
-20px 0 15px 4px rgba(210,189,255,.3),
-40px 0 15px 2px rgba(210,189,255,.2),
-60px 0 10px 1px rgba(210,189,255,.1),
-80px 0 10px 1px rgba(210,189,255,.05);
}
}
@keyframes progress-1 {
0% {
transform: scalex(0);
opacity: .5;
}
90% {
transform: scalex(1);
opacity: 1;
}
92% {
transform: scalex(1);
opacity: 1;
}
100% {
transform: scalex(1);
opacity: 0;
}
}
@keyframes progress-2 {
0% {
transform: scale(.3,.8) translatez(0);
opacity: 0;
}
90% {
transform: scale(1,1) translatex(400px) translatez(0);
opacity: 1;
}
100% {
transform: scale(1,1) translatex(400px) translatez(0);
opacity: 0;
}
}
2 Responses
Can you give me your contact (example: twitter, facebook, ..) or your website. I really want follow you because you are very cool in Front-end.
If you can't, please contact me at: minhnghia7793@gmail.com.
Tks Bro.