mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
|
|
/* HTML: <div class="loader"></div> */
|
|
.loader {
|
|
width: 120px;
|
|
height: 20px;
|
|
background: linear-gradient(#000 50%,#0000 0),
|
|
linear-gradient(#0000 50%,#000 0),
|
|
linear-gradient(#000 50%,#0000 0),
|
|
linear-gradient(#0000 50%,#000 0),
|
|
linear-gradient(#000 50%,#0000 0),
|
|
linear-gradient(#0000 50%,#000 0)
|
|
#ddd;
|
|
background-size: calc(100%/6 + 1px) 200%;
|
|
background-repeat: no-repeat;
|
|
animation: l12 2s infinite;
|
|
}
|
|
|
|
@keyframes l12 {
|
|
0% {
|
|
background-position: calc(0*100%/5) 100%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
16.67% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 0%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
33.33% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
50% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 0%,calc(4*100%/5) 100%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
66.67% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
83.33% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 0%
|
|
}
|
|
|
|
100% {
|
|
background-position: calc(0*100%/5) 0%,calc(1*100%/5) 100%,calc(2*100%/5) 0%,calc(3*100%/5) 100%,calc(4*100%/5) 0%,calc(5*100%/5) 100%
|
|
}
|
|
}
|
|
</style>
|