galaxy/loaders/bernethe_friendly-termite-42.html

47 lines
839 B
HTML

<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
width: 2rem;
height: 2rem;
clear: both;
margin: 1rem auto;
border: 0.0625rem #000 solid;
border-radius: .25rem;
overflow: hidden;
position: relative;
}
.loader:after, .loader:before {
content: '';
border-radius: 50%;
position: absolute;
width: inherit;
height: inherit;
animation: spVortex 2s infinite linear;
}
.loader:before {
border-top: 0.375rem #000 solid;
top: -0.1875rem;
left: calc( -50% - 0.1875rem );
transform-origin: right center;
}
.loader:after {
border-bottom: 0.375rem #000 solid;
top: 0.1875rem;
right: calc( -50% - 0.1875rem );
transform-origin: left center;
}
@keyframes spVortex {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>