Quiet Input Field

01.loader {
02  width: fit-content;
03  height: fit-content;
04  display: flex;
05  align-items: center;
06  justify-content: center;
07}
08
09.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}