mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
66 lines
1 KiB
HTML
66 lines
1 KiB
HTML
<div class="loader">LOADING</div>
|
|
<style>
|
|
/* From Uiverse.io by KSAplay - Tags: loader */
|
|
.loader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #f2df95;
|
|
height: 150px;
|
|
width: 250px;
|
|
background-color: #907A24;
|
|
border-style: solid;
|
|
border-width: 50px 250px 50px 0px;
|
|
border-color: #C9B656 #AD9531 #87621B #AD9531;
|
|
animation: camera_effect 4s infinite linear;
|
|
}
|
|
|
|
@keyframes camera_effect {
|
|
0% {
|
|
border-width: 0px 250px 0px 0px;
|
|
}
|
|
|
|
10% {
|
|
border-width: 45px 250px 45px 0px;
|
|
}
|
|
|
|
20% {
|
|
border-width: 50px 160px 50px 0px;
|
|
}
|
|
|
|
30% {
|
|
border-width: 50px 80px 50px 80px;
|
|
}
|
|
|
|
45% {
|
|
border-width: 45px 75px 55px 85px;
|
|
}
|
|
|
|
55% {
|
|
border-width: 55px 70px 45px 90px;
|
|
}
|
|
|
|
65% {
|
|
border-width: 55px 85px 45px 75px;
|
|
}
|
|
|
|
70% {
|
|
border-width: 50px 80px 50px 80px;
|
|
}
|
|
|
|
80% {
|
|
border-width: 50px 0px 50px 160px;
|
|
}
|
|
|
|
90% {
|
|
border-width: 45px 0px 45px 250px;
|
|
}
|
|
|
|
100% {
|
|
border-width: 0px 0px 0px 250px;
|
|
}
|
|
}
|
|
</style>
|