mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
32 lines
767 B
HTML
32 lines
767 B
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by doniaskima - Tags: simple, material design, loader */
|
|
/* HTML: <div class="loader"></div> */
|
|
.loader {
|
|
width: 80px;
|
|
height: 70px;
|
|
border: 5px solid #000;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(#fff 0 0) 0 0/8px 20px,
|
|
linear-gradient(#fff 0 0) 100% 0/8px 20px,
|
|
radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,
|
|
#000;
|
|
background-repeat: no-repeat;
|
|
animation: l3 2s infinite linear;
|
|
}
|
|
|
|
@keyframes l3 {
|
|
25% {
|
|
background-position: 0 0 ,100% 100%,100% calc(100% - 5px)
|
|
}
|
|
|
|
50% {
|
|
background-position: 0 100%,100% 100%,0 calc(100% - 5px)
|
|
}
|
|
|
|
75% {
|
|
background-position: 0 100%,100% 0,100% 5px
|
|
}
|
|
}
|
|
</style>
|