Loader by vinodjangid07
#e8e8e8
1.loader { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6.panWrapper { 7 width: 200px; 8 height: fit-content; 9 position: relative; 10 display: flex; 11 align-items: flex-start; 12 justify-content: flex-end; 13 flex-direction: column; 14 gap: 20px; 15} 16 17.pan { 18 display: flex; 19 align-items: flex-start; 20 justify-content: flex-start; 21 width: 100%; 22 height: fit-content; 23 animation: cooking 1.7s infinite; 24} 25@keyframes cooking { 26 0% { 27 transform: rotate(0deg); 28 transform-origin: top right; 29 } 30 10% { 31 transform: rotate(-4deg); 32 transform-origin: top right; 33 } 34 50% { 35 transform: rotate(20deg); 36 } 37 100% { 38 transform: rotate(0deg); 39 } 40} 41 42.food { 43 position: absolute; 44 width: 40%; 45 height: 6px; 46 background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106)); 47 left: 10px; 48 border-radius: 50%; 49 animation: flip 1.7s infinite; 50 z-index: 2; 51} 52@keyframes flip { 53 0% { 54 transform: translateY(0px) rotate(0deg); 55 } 56 50% { 57 transform: translateY(-100px) rotate(180deg); 58 } 59 100% { 60 transform: translateY(0px) rotate(360deg); 61 } 62} 63.panBase { 64 z-index: 3; 65 width: 50%; 66 height: 22px; 67 border-bottom-left-radius: 40px; 68 border-bottom-right-radius: 40px; 69 background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191)); 70} 71.panHandle { 72 width: 40%; 73 background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74)); 74 height: 10px; 75 border-radius: 10px; 76} 77.panShadow { 78 width: 70px; 79 height: 8px; 80 background-color: rgba(0, 0, 0, 0.21); 81 margin-left: 15px; 82 border-radius: 10px; 83 animation: shadow 1.7s infinite; 84 filter: blur(5px); 85} 86@keyframes shadow { 87 0% { 88 transform: scaleX(0.7); 89 } 90 50% { 91 transform: scaleX(1); 92 } 93 100% { 94 transform: scaleX(0.7); 95 } 96} 97
527 views
527 views
MIT License