Display a circular progress bar with 60% completion using custom CSS and jQuery.

by rami7250

HTML

<div class="progress-bar-container">
  <div class="progress-bar-fill">
    <span class="progress-bar-text">Ready</span>
    <span class="progress-bar-percent">100%</span>
  </div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-fill" style="width: 75%;">
    <span class="progress-bar-text">Almost</span>
    <span class="progress-bar-percent">75%</span>
  </div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-fill" style="width: 50%;">
    <span class="progress-bar-text">Half Way</span>
    <span class="progress-bar-percent">50%</span>
  </div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-fill" style="width: 35%;">
    <span class="progress-bar-text">Barely</span>
    <span class="progress-bar-percent">25%</span>
  </div>
</div>


<div class="progress-bar-container">
  <div class="progress-bar-fill" style="width: 20%;">
    <span class="progress-bar-text">Not </span>
    <span class="progress-bar-percent">0%</span>
  </div>
</div>

CSS

/* הרקע הצבעוני של הסרגל כולו */
.progress-bar-container {
  width: 50%;
  height: 35px; /* גובה הסרגל */
  border-radius: 50px; /* פינות עגולות ליצירת צורת קפסולה */
  padding: 5px; /* מרווח פנימי שיוצר את "המסגרת" הצבעונית */
  background: linear-gradient(90deg, #9b59b6, #e84393, #e74c3c, #f39c12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  animation: bar-animation 1.5s ease-out forwards;
  margin-bottom: 25px; /* רווח מתחת לסרגל */
}

/* הפס השחור הפנימי שמייצג את ההתקדמות */
.progress-bar-fill {
  height: 100%;
  background-color: #111111; /* רקע שחור-כהה */
  border-radius: 45px; /* פינות מעוגלות פנימיות */
  display: flex;
  align-items: center; /* ממכרז את הטקסט אנכית */
  justify-content: space-between; /* דוחף את האלמנטים לקצוות */
  padding: 0 20px;
  overflow: hidden;
  white-space: nowrap; /* מונע שבירת שורות של הטקסט */
}

/* עיצוב הטקסט (הכותרת) */
.progress-bar-text {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif; /* מומלץ לוודא שהפונט זמין */
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
}

/* עיצוב האחוזים */
.progress-bar-percent {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

/* אנימציה שמגדילה את רוחב הסרגל */
@keyframes bar-animation {
  0% {
    width: 0%;
  }
  100% {
    /* הרוחב נקבע על ידי ה-style ב-HTML */
  }
}