Loader by carlosepcc
#e8e8e8
1/* Butterfly loader created by WerlynDev in Uiverse.io*/ 2 3.loader { 4 --sizeLoader: 60px; 5 --sizeLoaderHalf: calc(var(--sizeLoader) / 2); 6 --stepBtf: calc(var(--sizeLoader) / 10); 7 display: flex; 8 position: relative; 9 flex-direction: row; 10 justify-content: center; 11 align-items: center; 12 width: var(--sizeLoader); 13 height: var(--sizeLoader); 14 background: radial-gradient(#f1f8,transparent 30%); 15} 16 17.loader:hover { 18 cursor: progress; 19} 20 21.loader[anim1] { 22 animation: anim1 0.3s alternate ease-in-out infinite; 23} 24 25.loader:not([anim1]) { 26 right: var(--sizeLoaderHalf); 27 transform-origin: center right; 28 animation: moveAround 2s linear infinite; 29} 30 31.loader[showShadow] { 32 filter: drop-shadow(0 10px 10px #060606de); 33} 34 35.loader svg:nth-child(1) { 36 position: relative; 37 height: 100%; 38 left: 2%; 39 transform-origin: center right; 40 animation: wing 0.2s ease-in-out infinite; 41} 42 43.loader svg:nth-child(2) { 44 height: 50%; 45} 46 47.loader svg:nth-child(3) { 48 position: relative; 49 height: 100%; 50 left: -2%; 51 transform-origin: center left; 52 animation: wing 0.25s ease-in-out infinite; 53} 54 55@keyframes wing { 56 0% { 57 transform: rotateY(0deg); 58 } 59 60 50% { 61 transform: rotateY(60deg); 62 } 63 64 100% { 65 transform: rotateY(0deg); 66 } 67} 68 69@keyframes moveAround { 70 0% { 71 transform: rotate(0deg); 72 } 73 74 100% { 75 transform: rotate(360deg); 76 } 77} 78 79@keyframes anim1 { 80 from { 81 transform: translateY(0px); 82 } 83 84 to { 85 transform: translateY(var(--stepBtf)); 86 } 87} 88 89/* @media (prefers-color-scheme: dark) { 90 .loader[showShadow]{ 91 filter: drop-shadow(0 10px 10px #dbdbdbde); 92 } 93} */
537 views
Variation of aloader
MIT License