mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<span class="loader"></span>
|
|
<style>
|
|
/* From Uiverse.io by Shoh2008 - Tags: loader */
|
|
.loader {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 140px;
|
|
background-image: radial-gradient(circle 30px, #fff 100%, transparent 0),
|
|
radial-gradient(circle 5px, #fff 100%, transparent 0),
|
|
radial-gradient(circle 5px, #fff 100%, transparent 0),
|
|
linear-gradient(#FFF 20px, transparent 0);
|
|
background-position: center 127px , 94px 102px , 16px 18px, center 114px;
|
|
background-size: 60px 60px, 10px 10px , 10px 10px , 4px 14px;
|
|
background-repeat: no-repeat;
|
|
z-index: 10;
|
|
perspective: 500px;
|
|
}
|
|
|
|
.loader::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
border: 3px solid #fff;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -55%) rotate(-45deg);
|
|
border-right-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loader::after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 80px;
|
|
width: 80px;
|
|
transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg);
|
|
left: 50%;
|
|
top: 50%;
|
|
box-sizing: border-box;
|
|
border: 7px solid #FF3D00;
|
|
border-radius: 50%;
|
|
animation: rotate_4191 0.5s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate_4191 {
|
|
to {
|
|
transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)
|
|
}
|
|
}
|
|
</style>
|