Loader by Pradeepsaranbishnoi
#e8e8e8
1.π€ { 2 --skin-color: #E4C560; 3 --tap-speed: 0.6s; 4 --tap-stagger: 0.1s; 5 position: relative; 6 width: 80px; 7 height: 60px; 8 margin-left: 80px; 9} 10 11.π€:before { 12 content: ''; 13 display: block; 14 width: 180%; 15 height: 75%; 16 position: absolute; 17 top: 70%; 18 right: 20%; 19 background-color: black; 20 border-radius: 40px 10px; 21 filter: blur(10px); 22 opacity: 0.3; 23} 24 25.π΄ { 26 display: block; 27 width: 100%; 28 height: 100%; 29 position: absolute; 30 top: 0; 31 left: 0; 32 background-color: var(--skin-color); 33 border-radius: 10px 40px; 34} 35 36.π { 37 position: absolute; 38 width: 120%; 39 height: 38px; 40 background-color: var(--skin-color); 41 bottom: -18%; 42 right: 1%; 43 transform-origin: calc(100% - 20px) 20px; 44 transform: rotate(-20deg); 45 border-radius: 30px 20px 20px 10px; 46 border-bottom: 2px solid rgba(0, 0, 0, 0.1); 47 border-left: 2px solid rgba(0, 0, 0, 0.1); 48} 49 50.π:after { 51 width: 20%; 52 height: 60%; 53 content: ''; 54 background-color: rgba(255, 255, 255, 0.3); 55 position: absolute; 56 bottom: -8%; 57 left: 5px; 58 border-radius: 60% 10% 10% 30%; 59 border-right: 2px solid rgba(0, 0, 0, 0.05); 60} 61 62.π { 63 position: absolute; 64 width: 80%; 65 height: 35px; 66 background-color: var(--skin-color); 67 bottom: 32%; 68 right: 64%; 69 transform-origin: 100% 20px; 70 animation-duration: calc(var(--tap-speed) * 2); 71 animation-timing-function: ease-in-out; 72 animation-iteration-count: infinite; 73 transform: rotate(10deg); 74} 75 76.π:before { 77 content: ''; 78 position: absolute; 79 width: 140%; 80 height: 30px; 81 background-color: var(--skin-color); 82 bottom: 8%; 83 right: 65%; 84 transform-origin: calc(100% - 20px) 20px; 85 transform: rotate(-60deg); 86 border-radius: 20px; 87} 88 89.π:nth-child(1) { 90 animation-delay: 0; 91 filter: brightness(70%); 92 animation-name: tap-upper-1; 93} 94 95.π:nth-child(2) { 96 animation-delay: var(--tap-stagger); 97 filter: brightness(80%); 98 animation-name: tap-upper-2; 99} 100 101.π:nth-child(3) { 102 animation-delay: calc(var(--tap-stagger) * 2); 103 filter: brightness(90%); 104 animation-name: tap-upper-3; 105} 106 107.π:nth-child(4) { 108 animation-delay: calc(var(--tap-stagger) * 3); 109 filter: brightness(100%); 110 animation-name: tap-upper-4; 111} 112 113@keyframes tap-upper-1 { 114 0%, 50%, 100% { 115 transform: rotate(10deg) scale(0.4); 116 } 117 118 40% { 119 transform: rotate(50deg) scale(0.4); 120 } 121} 122 123@keyframes tap-upper-2 { 124 0%, 50%, 100% { 125 transform: rotate(10deg) scale(0.6); 126 } 127 128 40% { 129 transform: rotate(50deg) scale(0.6); 130 } 131} 132 133@keyframes tap-upper-3 { 134 0%, 50%, 100% { 135 transform: rotate(10deg) scale(0.8); 136 } 137 138 40% { 139 transform: rotate(50deg) scale(0.8); 140 } 141} 142 143@keyframes tap-upper-4 { 144 0%, 50%, 100% { 145 transform: rotate(10deg) scale(1); 146 } 147 148 40% { 149 transform: rotate(50deg) scale(1); 150 } 151} 152
Β
15K views
15K views
MIT License