galaxy/loaders/Admin12121_horrible-hound-96.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>