mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
103 lines
1.6 KiB
HTML
103 lines
1.6 KiB
HTML
<div class="con">
|
|
<div class="side left"></div>
|
|
<div class="side right"></div>
|
|
<div class="side rightAbove"></div>
|
|
<div class="side bottom"></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Admin12121 - Tags: loader, animated, effect loader */
|
|
.con {
|
|
width: 120px;
|
|
height: 120px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
transform-origin: 60px 50px;
|
|
-webkit-animation: spin 3s infinite;
|
|
animation: spin 3s infinite;
|
|
}
|
|
|
|
.side {
|
|
width: 110px;
|
|
height: 30px;
|
|
background: white;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.side:before, .side:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
.side:before {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0px solid transparent;
|
|
border-right: 20px solid #fff;
|
|
border-top: 35px solid #111;
|
|
left: 0;
|
|
}
|
|
|
|
.side:after {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0px solid transparent;
|
|
border-right: 20px solid #111;
|
|
border-bottom: 35px solid transparent;
|
|
right: 0;
|
|
}
|
|
|
|
.left {
|
|
left: 0px;
|
|
transform: rotate(120deg);
|
|
z-index: 2;
|
|
}
|
|
|
|
.right, .rightAbove {
|
|
transform: rotate(-120deg);
|
|
right: -30px;
|
|
top: 50px;
|
|
}
|
|
|
|
.rightAbove {
|
|
clip: rect(0px 90px 30px 0);
|
|
z-index: 4;
|
|
}
|
|
|
|
.under {
|
|
z-index: 1;
|
|
}
|
|
|
|
.bottom {
|
|
left: -24px;
|
|
bottom: 30px;
|
|
z-index: 3;
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
50% {
|
|
transform: rotate(720deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(720deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
50% {
|
|
transform: rotate(720deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(720deg);
|
|
}
|
|
}
|
|
</style>
|