mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
47 lines
870 B
HTML
47 lines
870 B
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by Kemboi-Dun - Source: https://uiverse.io/Saiyed-Tanvir/old-mole-38 - Tags: simple, animation, blue, minimalist, loading, loader, cube, animated */
|
|
.loader {
|
|
height: 5cm;
|
|
width: 5cm;
|
|
border-radius: 1rem;
|
|
/* border: 1px solid #0a7cbe; */
|
|
box-shadow: inset 0 0 0 #0a7cbe;
|
|
animation: load 4s ease infinite;
|
|
}
|
|
|
|
@keyframes load {
|
|
|
|
0% {
|
|
box-shadow: inset -5cm -2.5cm 0 #0a7cbe;
|
|
}
|
|
|
|
25% {
|
|
box-shadow: inset 5cm -2.5cm 0 #0a7cbe;
|
|
}
|
|
|
|
25.01% {
|
|
box-shadow: inset 2.5cm -5cm 0 #0a7cbe;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: inset 2.5cm 5cm 0 #0a7cbe;
|
|
}
|
|
|
|
50.01% {
|
|
box-shadow: inset 5cm 2.5cm 0 #0a7cbe;
|
|
}
|
|
|
|
75% {
|
|
box-shadow: inset -5cm 2.5cm 0 #0a7cbe;
|
|
}
|
|
|
|
75.01% {
|
|
box-shadow: inset -2.5cm 5cm 0 #0a7cbe;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: inset -2.5cm -5cm 0 #0a7cbe;
|
|
}
|
|
}
|
|
</style>
|