Progress Bar

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-text">75%</div>
</div>

.progress-container {
  width: 100%;
  max-width: 300px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  width: 75%;
  height: 20px;
  background: linear-gradient(90deg, #00d4ff, #0099cc);
  border-radius: 10px;
  position: relative;
  animation: fillBar 2s ease-in-out;
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: #333;
}
@keyframes fillBar {
  0% { width: 0%; }
  100% { width: 75%; }
}