* { margin: 0; padding: 0; box-sizing: border-box; } .gaugeContainer { width: 300px; height: 300px; border: 3px solid black; border-radius: 50%; margin: 50px auto; position: relative; } .center-point { width: 20px; height: 20px; background-color: black; border-radius: 50%; position: absolute; top: 137px; left: 137px; } .speedometer-scale { width: 8px; height: 280px; background-color: black; } /* CSS */ /* CSS */ .gaugeContainer { width: 300px; height: 300px; border: 3px solid black; border-radius: 50%; margin: 50px auto; position: relative; display: block; } .gaugeValue { width: 10px; height: 150px; position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rotation and color change */ } .gaugeImage { display: block; margin-left: auto; margin-right: auto; width: 100%; }