mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
42 lines
735 B
HTML
42 lines
735 B
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by Shoh2008 - Tags: loader */
|
|
.loader {
|
|
width: 100px;
|
|
height: 46px;
|
|
position: relative;
|
|
border-bottom: 5px solid #FFF;
|
|
border-top: 5px solid #FFF;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loader:before , .loader:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: -20px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: orange;
|
|
border: 5px solid #FFF;
|
|
box-sizing: border-box;
|
|
animation: slide_391 1s infinite ease-in-out alternate;
|
|
}
|
|
|
|
.loader:after {
|
|
top: 20px;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
@keyframes slide_391 {
|
|
0% , 20% {
|
|
transform: translateX(70px)
|
|
}
|
|
|
|
80% , 100% {
|
|
transform: translateX(-1px)
|
|
}
|
|
}
|
|
|
|
</style>
|