https://i.sstatic.net/FxCzs.png
Struggling to create a progress bar with distinct checkpoints, here's my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles for the elements */
.outer-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.progress-container {
width: 80%;
height: 5px;
background-color: green;
position: relative;
}
.car {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: -10px;
left: 0;
transition: left 1s linear;
}
.checkpoint {
width: 10px;
height: 10px;
background-color: #88CCDF;
border-radius: 50%;
position: absolute;
top: -5px;
margin-left: -5px;
}
.before-reached {
background-color: #88CCDF;
}
.reached {
background-color: yellow;
}
.passed {
background-color: green;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="progress-container">
<!-- Checkpoints -->
<div class="checkpoint before-reached" style="left: 5%;"></div>
<div class="checkpoint before-reached" style="left: 25%;"></div>
<div class="checkpoint before-reached" style="left: 45%;"></div>
<div class="checkpoint before-reached" style="left: 65%;"></div>
<div class="checkpoint before-reached" style="left: 85%;"></div>
<!-- Car icon -->
<div class="car"></div>
</div>
</div>
<script>
// JavaScript to move the car along the progress line
const car = document.querySelector('.car');
const checkpoints = document.querySelectorAll('.checkpoint');
let currentCheckpointIndex = 0;
function moveCarToNextCheckpoint() {
if (currentCheckpointIndex < checkpoints.length - 1) {
checkpoints[currentCheckpointIndex].classList.remove('before-reached');
checkpoints[currentCheckpointIndex].classList.add('reached');
currentCheckpointIndex++;
const nextCheckpoint = checkpoints[currentCheckpointIndex];
car.style.left = nextCheckpoint.style.left;
} else {
checkpoints[currentCheckpointIndex].classList.remove('before-reached');
checkpoints[currentCheckpointIndex].classList.add('passed');
}
}
// Initially set color of first checkpoint to yellow
checkpoints[currentCheckpointIndex].classList.add('before-reached');
// Move the car every 2 seconds
setInterval(moveCarToNextCheckpoint, 2000);
</script>
</body>
</html>
The outcome didn't match the design vision: https://i.sstatic.net/cTZnz.png
I experimented with various approaches like adding lines after each point and adjusting margins, but none worked. Note that the JavaScript functionality simulates a "delivery tracking system."