2 lines
1.3 KiB
CSS
2 lines
1.3 KiB
CSS
.loader{width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:center}.truckWrapper{width:200px;height:100px;display:flex;flex-direction:column;position:relative;align-items:center;justify-content:flex-end;overflow-x:hidden}.truckBody{width:130px;height:fit-content;margin-bottom:6px;animation:motion 1s linear infinite}@keyframes motion{0%{transform:translateY(0)}50%{transform:translateY(3px)}to{transform:translateY(0)}}.truckTires{width:130px;height:fit-content;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 15px;position:absolute;bottom:0}.truckTires svg{width:24px}.road{width:100%;height:1.5px;background-color:#282828;position:relative;bottom:0;align-self:flex-end;border-radius:3px}.road:before{content:"";position:absolute;width:20px;height:100%;background-color:#282828;right:-50%;border-radius:3px;animation:roadAnimation 1.4s linear infinite;border-left:10px solid white}.road:after{content:"";position:absolute;width:10px;height:100%;background-color:#282828;right:-65%;border-radius:3px;animation:roadAnimation 1.4s linear infinite;border-left:4px solid white}.lampPost{position:absolute;bottom:0;right:-90%;height:90px;animation:roadAnimation 1.4s linear infinite}@keyframes roadAnimation{0%{transform:translate(0)}to{transform:translate(-350px)}}
|