Loader by csemszepp
#212121
1.loader { 2 width: 200px; 3 max-height: 900px; 4 transform-origin: 50% 50%; 5 overflow: visible; 6} 7 8.ci1 { 9 fill: var(--higru); 10 animation: toBig 3s infinite -1.5s; 11 transform-box: fill-box; 12 transform-origin: 50% 50%; 13} 14 15.ciw { 16 transform-box: fill-box; 17 transform-origin: 50% 50%; 18 animation: breath 3s infinite; 19} 20 21.ci2 { 22 fill: var(--higru); 23 animation: toBig2 3s infinite; 24 transform-box: fill-box; 25 transform-origin: 50% 50%; 26} 27 28.points { 29 animation: rot 3s infinite; 30 transform-box: fill-box; 31 transform-origin: 50% 50%; 32} 33 34@keyframes rot { 35 0% { 36 transform: rotate(0deg); 37 } 38 39 30% { 40 transform: rotate(360deg); 41 } 42 43 50% { 44 transform: rotate(360deg); 45 } 46 47 80% { 48 transform: rotate(0deg); 49 } 50 51 100% { 52 transform: rotate(0deg); 53 } 54} 55 56@keyframes toBig { 57 0% { 58 transform: scale(1) translateX(0px); 59 } 60 61 30% { 62 transform: scale(1) translateX(0px); 63 } 64 65 50% { 66 transform: scale(10) translateX(-4.5px); 67 } 68 69 80% { 70 transform: scale(10) translateX(-4.5px); 71 } 72 73 100% { 74 transform: scale(1) translateX(0px); 75 } 76} 77 78@keyframes toBig2 { 79 0% { 80 transform: scale(1) translateX(0px); 81 } 82 83 30% { 84 transform: scale(1) translateX(0px); 85 } 86 87 50% { 88 transform: scale(10) translateX(4.5px); 89 } 90 91 80% { 92 transform: scale(10) translateX(4.5px); 93 } 94 95 100% { 96 transform: scale(1) translateX(0px); 97 } 98} 99 100@keyframes breath { 101 15% { 102 transform: scale(1); 103 } 104 105 40% { 106 transform: scale(1.1); 107 } 108 109 65% { 110 transform: scale(1); 111 } 112 113 90% { 114 transform: scale(1.1); 115 } 116} 117 118.dwf, .share { 119 position: fixed; 120 bottom: 4px; 121 right: 10px; 122 background-color: #0003; 123 padding: 3px; 124 border-radius: 3px; 125}
511 views
511 views
MIT License