mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
62 lines
1.2 KiB
HTML
62 lines
1.2 KiB
HTML
<div class="loader-1">
|
|
<div class="loader-2"></div>
|
|
<div class="loader-3"></div>
|
|
<div class="loader-4"></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by omar-alghaish - Tags: loader */
|
|
.loader-1 {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
border: 5px solid rgb(218, 203, 4);
|
|
border-left-color: transparent;
|
|
animation: animate_681 3s linear infinite;
|
|
position: relative;
|
|
}
|
|
|
|
.loader-2 {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
border: 5px solid rgb(0, 119, 255);
|
|
border-top-color: transparent;
|
|
animation: animate_6810 .9s linear infinite;
|
|
position: absolute;
|
|
margin: 5px;
|
|
}
|
|
|
|
.loader-3 {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
border: 5px solid rgb(30, 255, 0);
|
|
border-right-color: transparent;
|
|
animation: animate_681 2s linear infinite;
|
|
position: absolute;
|
|
margin: 15px;
|
|
}
|
|
|
|
.loader-4 {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 5px solid rgb(194, 3, 92);
|
|
border-bottom-color: transparent;
|
|
animation: animate_6810 .7s linear infinite;
|
|
position: absolute;
|
|
margin: 25px;
|
|
}
|
|
|
|
@keyframes animate_6810 {
|
|
0% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes animate_681 {
|
|
0% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
</style>
|