mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
53 lines
2.5 KiB
HTML
53 lines
2.5 KiB
HTML
<div class="spinner"></div>
|
|
<style>
|
|
/* From Uiverse.io by Nawsome - Tags: loader */
|
|
/* Normal Usage */
|
|
.spinner:before {
|
|
transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
|
|
animation: 750ms rotateBefore infinite linear reverse;
|
|
}
|
|
|
|
.spinner:after {
|
|
transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
|
|
animation: 750ms rotateAfter infinite linear;
|
|
}
|
|
|
|
.spinner:before,
|
|
.spinner:after {
|
|
box-sizing: border-box;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
margin-top: -5em;
|
|
margin-left: -5em;
|
|
width: 10em;
|
|
height: 10em;
|
|
transform-style: preserve-3d;
|
|
transform-origin: 50%;
|
|
transform: rotateY(50%);
|
|
perspective-origin: 50% 50%;
|
|
perspective: 340px;
|
|
background-size: 10em 10em;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
|
|
}
|
|
/* sitNSpin.less */
|
|
@keyframes rotateBefore {
|
|
from {
|
|
transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateAfter {
|
|
from {
|
|
transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
</style>
|