63 views
CSS
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} 15 16.loader:hover { 17 cursor: progress; 18} 19 20.loader[anim1] { 21 animation: anim1 0.3s alternate ease-in-out infinite; 22} 23 24.loader:not([anim1]) { 25 right: var(--sizeLoaderHalf); 26 transform-origin: center right; 27 animation: moveAround 2s linear infinite; 28} 29 30.loader[showShadow] { 31 filter: drop-shadow(0 10px 10px #060606de); 32} 33 34.loader svg:nth-child(1) { 35 position: relative; 36 height: 100%; 37 left: 2%; 38 transform-origin: center right; 39 animation: wing 0.5s ease-in-out infinite; 40} 41 42.loader svg:nth-child(2) { 43 height: 50%; 44} 45 46.loader svg:nth-child(3) { 47 position: relative; 48 height: 100%; 49 left: -2%; 50 transform-origin: center left; 51 animation: wing 0.5s ease-in-out infinite; 52} 53 54@keyframes wing { 55 0% { 56 transform: rotateY(0deg); 57 } 58 59 50% { 60 transform: rotateY(60deg); 61 } 62 63 100% { 64 transform: rotateY(0deg); 65 } 66} 67 68@keyframes moveAround { 69 0% { 70 transform: rotate(0deg); 71 } 72 73 100% { 74 transform: rotate(360deg); 75 } 76} 77 78@keyframes anim1 { 79 from { 80 transform: translateY(0px); 81 } 82 83 to { 84 transform: translateY(var(--stepBtf)); 85 } 86} 87 88/* @media (prefers-color-scheme: dark) { 89 .loader[showShadow]{ 90 filter: drop-shadow(0 10px 10px #dbdbdbde); 91 } 92} */
HTML
1<div class="loader"> 2 3 <svg viewBox="0 0 18.528 35.424" version="1.1" y="0" x="0" height="369" width="193" xmlns="http://www.w3.org/2000/svg"> 4 <path d="M3.358 35.05c.435-.175.646-.408.861-.95.374-.94.698-1.52 1.145-2.05.78-.92 1.757-1.638 2.666-1.957.603-.212.9-.204 1.505.041.843.343 1.597.25 2.062-.254.95-1.029 3.95-6.873 5.841-11.376.869-2.07.831-1.882.797-3.962-.034-2.106-.024-2.064-.927-3.887-1.639-3.31-4.426-6.582-7.147-8.392C8.71 1.298 6.715.504 5.296.328c-.718-.09-2.465-.001-3.183.16C.943.752.279 1.268.279 1.917c0 .119.437 1.136.97 2.26.533 1.126 1.044 2.291 1.135 2.591.334 1.106.776 3.567.945 5.27.065.652.357 1.286.751 1.633.419.367 1.351.786 1.964.883.286.044.534.096.553.115.018.018-.129.128-.327.244-.761.446-1.432 1.439-1.74 2.574-.216.802-.194 2.914.045 4.121.24 1.212.575 2.318 1.031 3.403.46 1.092.535 1.458.439 2.135-.223 1.575-1.958 4.03-3.489 4.937-.693.41-.885.587-1.066.98-.173.375-.185.535-.069.953.223.802 1.206 1.326 1.937 1.033z" fill="#000"></path> 5 </svg> 6 7 8 <svg viewBox="0 0 2.4 14.4" version="1.1" y="0" x="0" height="150" width="25" xmlns="http://www.w3.org/2000/svg"> 9 <path d="M2.2 13c0 .641-.447 1.16-1 1.16-.553 0-1-.519-1-1.16V1.4C.2.759.647.24 1.2.24c.553 0 1 .519 1 1.16z" fill="#000"></path> 10 </svg> 11 12 13 <svg viewBox="0 0 18.528 35.424" version="1.1" y="0" x="0" height="369" width="193" xmlns="http://www.w3.org/2000/svg"> 14 <path d="M15.105 35.155c-.42-.196-.627-.482-.902-1.253-.544-1.517-2.145-3.126-3.636-3.652-.69-.243-.887-.242-1.486.01-.617.26-1.342.278-1.798.045-.555-.283-1.76-2.262-3.476-5.708C2.628 22.232.984 18.575.455 17.144c-.236-.637-.237-.655-.237-2.485 0-2.164.01-2.209.9-4.013 1.011-2.049 2.53-4.189 4.185-5.9C7.679 2.293 9.783.995 12.49.313c.782-.197 1.554-.236 2.695-.137 1.619.14 2.38.38 2.882.909.21.22.246.321.243.684-.002.373-.122.67-.959 2.395-1.277 2.63-1.59 3.806-2.035 7.63-.111.951-.316 1.426-.809 1.87-.52.47-1.306.807-2.165.928l-.391.054.35.224c.897.574 1.58 1.674 1.834 2.956.193.969.12 2.791-.164 4.15-.222 1.061-.696 2.518-1.12 3.443-.336.735-.411 1.584-.203 2.3.505 1.738 2.056 3.692 3.736 4.705.693.417.938.83.874 1.476-.104 1.071-1.193 1.706-2.153 1.256z" fill="#000"></path> 15 </svg> 16 </div>