This post is saved as a draft.
#212121
1.loader { 2 width: 200px; 3 height: 200px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 animation: float 2s ease-in-out infinite; 8} 9 10@keyframes float { 11 0%, 12 100% { 13 transform: translateY(0); 14 } 15 50% { 16 transform: translateY(-12px); 17 } 18} 19 20.loader:before { 21 content: ""; 22 width: 10px; 23 height: 7px; 24 border-radius: 50%; 25 background-color: rgba(0, 0, 0, 0.9); 26 position: absolute; 27 bottom: -9px; 28 animation: shadow046 2s alternate infinite ease; 29} 30@keyframes shadow046 { 31 0% { 32 transform: scaleX(1); 33 } 34 40% { 35 transform: scaleX(15); 36 opacity: 0.7; 37 } 38} 39 40.circle { 41 width: 140px; 42 height: 140px; 43 border-radius: 50%; 44 display: flex; 45 align-items: center; 46 justify-content: center; 47 position: absolute; 48} 49.loader .p1 { 50 height: 20px; 51 width: 7px; 52 background-color: #ffe71c; 53 position: absolute; 54 margin-top: -118px; 55 margin-left: 3px; 56} 57.loader .p2 { 58 height: 20px; 59 width: 7px; 60 background-color: #ffe71c; 61 position: absolute; 62 margin-top: 118px; 63 margin-left: 3px; 64} 65 66.loader .p3 { 67 height: 20px; 68 width: 7px; 69 background-color: #ffe71c; 70 position: absolute; 71 transform: rotate(90deg); 72 margin-right: -120px; 73} 74.loader .p4 { 75 height: 20px; 76 width: 7px; 77 background-color: #ffe71c; 78 position: absolute; 79 transform: rotate(90deg); 80 margin-right: 119px; 81} 82.loader .p5 { 83 height: 25px; 84 width: 7px; 85 background-color: #ffe71c; 86 position: absolute; 87 margin-top: -84px; 88 margin-right: -89px; 89 transform: rotate(45deg); 90} 91.loader .p6 { 92 height: 23px; 93 width: 7px; 94 background-color: #ffe71c; 95 position: absolute; 96 margin-top: 88px; 97 margin-right: 84px; 98 transform: rotate(45deg); 99} 100.loader .p7 { 101 height: 23px; 102 width: 7px; 103 background-color: #ffe71c; 104 position: absolute; 105 margin-top: -86px; 106 margin-right: 80px; 107 transform: rotate(-45deg); 108} 109.loader .p8 { 110 height: 23px; 111 width: 7px; 112 background-color: #ffe71c; 113 position: absolute; 114 margin-top: 80px; 115 margin-right: -83px; 116 transform: rotate(-45deg); 117} 118.circle .traco { 119 position: absolute; 120 z-index: -99; 121} 122.loader .content { 123 width: 100px; 124 height: 100px; 125 border-radius: 50%; 126 border: 4px solid #ffe71c; 127 overflow: hidden; 128} 129.content .eyes { 130 width: 80px; 131 height: 30px; 132 display: flex; 133 align-items: center; 134 justify-content: space-between; 135 margin: 18px auto 0px; 136 padding: 3.5px 10px; 137} 138.eyes .eye-left { 139 width: 22px; 140 height: 100%; 141 background-color: #ffe71c; 142 border-radius: 50%; 143} 144.eyes .eye-right { 145 width: 22px; 146 height: 100%; 147 background-color: #ffe71c; 148 border-radius: 50%; 149} 150 151.content .nouse { 152 margin: -4px auto; 153 height: 5px; 154 width: 5px; 155 border-radius: 50%; 156 background-color: #ffe71c; 157} 158.content .mouth { 159 margin: 9px auto 0; 160 height: 3px; 161 width: 100%; 162 background-color: #ffe71c; 163} 164.content .teeth { 165 margin: 0 auto; 166 height: 37px; 167 display: flex; 168 align-items: center; 169 justify-content: space-between; 170 padding: 0 12px; 171} 172.teeth .tooth { 173 height: 100%; 174 width: 4px; 175 background-color: #ffe71c; 176} 177
Variation of aloader
Variation of aloader