mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
79 lines
No EOL
1.5 KiB
HTML
79 lines
No EOL
1.5 KiB
HTML
<div class="center-body">
|
|
<div class="loader-spanne-20">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vikramsinghnegi - Tags: loading, loader, html, css */
|
|
.loader-spanne-20 {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 30px;
|
|
padding: 0;
|
|
}
|
|
.loader-spanne-20 > span {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 3px;
|
|
height: 30px;
|
|
background-color: rgb(116, 204, 197);
|
|
display: block;
|
|
border-radius: 3px;
|
|
transform-origin: 50% 100%;
|
|
animation: move 2.8s linear infinite;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(1) {
|
|
animation-delay: -0.4s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(2) {
|
|
animation-delay: -0.8s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(3) {
|
|
animation-delay: -1.2s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(4) {
|
|
animation-delay: -1.6s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(5) {
|
|
animation-delay: -2s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(6) {
|
|
animation-delay: -2.4s;
|
|
}
|
|
.loader-spanne-20 > span:nth-child(7) {
|
|
animation-delay: -2.8s;
|
|
}
|
|
@keyframes move {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
transform: translateX(-40px) rotate(0deg);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translateX(-50px) rotate(22deg);
|
|
}
|
|
85% {
|
|
opacity: 1;
|
|
transform: translateX(-85px) rotate(60deg);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-100px) rotate(65deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|