Loader by vinodjangid07
#e8e8e8
1.loader { 2 width: fit-content; 3 height: fit-content; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7} 8 9.truckWrapper { 10 width: 200px; 11 height: 100px; 12 display: flex; 13 flex-direction: column; 14 position: relative; 15 align-items: center; 16 justify-content: flex-end; 17 overflow-x: hidden; 18} 19/* truck upper body */ 20.truckBody { 21 width: 130px; 22 height: fit-content; 23 margin-bottom: 6px; 24 animation: motion 1s linear infinite; 25} 26/* truck suspension animation*/ 27@keyframes motion { 28 0% { 29 transform: translateY(0px); 30 } 31 50% { 32 transform: translateY(3px); 33 } 34 100% { 35 transform: translateY(0px); 36 } 37} 38/* truck's tires */ 39.truckTires { 40 width: 130px; 41 height: fit-content; 42 display: flex; 43 align-items: center; 44 justify-content: space-between; 45 padding: 0px 10px 0px 15px; 46 position: absolute; 47 bottom: 0; 48} 49.truckTires svg { 50 width: 24px; 51} 52 53.road { 54 width: 100%; 55 height: 1.5px; 56 background-color: #282828; 57 position: relative; 58 bottom: 0; 59 align-self: flex-end; 60 border-radius: 3px; 61} 62.road::before { 63 content: ""; 64 position: absolute; 65 width: 20px; 66 height: 100%; 67 background-color: #282828; 68 right: -50%; 69 border-radius: 3px; 70 animation: roadAnimation 1.4s linear infinite; 71 border-left: 10px solid white; 72} 73.road::after { 74 content: ""; 75 position: absolute; 76 width: 10px; 77 height: 100%; 78 background-color: #282828; 79 right: -65%; 80 border-radius: 3px; 81 animation: roadAnimation 1.4s linear infinite; 82 border-left: 4px solid white; 83} 84 85.lampPost { 86 position: absolute; 87 bottom: 0; 88 right: -90%; 89 height: 90px; 90 animation: roadAnimation 1.4s linear infinite; 91} 92 93@keyframes roadAnimation { 94 0% { 95 transform: translateX(0px); 96 } 97 100% { 98 transform: translateX(-350px); 99 } 100} 101
1.6K views
1.6K views
MIT License