ONE PROGRESS BAR with lines animated

by rami7250

HTML

<!-- דוגמה 1: 0% -->
<h3>0% - אדום בוהק</h3>
<div class="oxy-progress-bar" data-progress="0">
    <div class="oxy-progress-bar-background">
        <!-- ב-0% הסרגל ריק, והטקסט לא ייראה. זהו המצב ההתחלתי. -->
        <div class="oxy-progress-bar-progress-wrap" style="width: 0%;">
            <div class="oxy-progress-bar-progress">
                <div class="oxy-progress-bar-overlay-text"></div>
                <div class="oxy-progress-bar-overlay-percent">0%</div>
            </div>
        </div>
    </div>
</div>

<!-- דוגמה 2: 25% -->
<h3>25% - אדום בהיר</h3>
<div class="oxy-progress-bar" data-progress="25">
    <div class="oxy-progress-bar-background">
        <div class="oxy-progress-bar-progress-wrap" style="width: 25%;">
            <div class="oxy-progress-bar-progress">
                <div class="oxy-progress-bar-overlay-text">מתחילים...</div>
                <div class="oxy-progress-bar-overlay-percent">25%</div>
            </div>
        </div>
    </div>
</div>

<!-- דוגמה 3: 50% -->
<h3>50% - כחול עמוק</h3>
<div class="oxy-progress-bar" data-progress="50">
    <div class="oxy-progress-bar-background">
        <div class="oxy-progress-bar-progress-wrap" style="width: 50%;">
            <div class="oxy-progress-bar-progress">
                <div class="oxy-progress-bar-overlay-text">בחצי הדרך</div>
                <div class="oxy-progress-bar-overlay-percent">50%</div>
            </div>
        </div>
    </div>
</div>

<!-- דוגמה 4: 75% -->
<h3>75% - כחול בהיר</h3>
<div class="oxy-progress-bar" data-progress="75">
    <div class="oxy-progress-bar-background">
        <div class="oxy-progress-bar-progress-wrap" style="width: 75%;">
            <div class="oxy-progress-bar-progress">
                <div class="oxy-progress-bar-overlay-text">כמעט שם</div>
                <div class="oxy-progress-bar-overlay-percent">75%</div>
            </div>
        </div>
    </div>
</div>

<!-- דוגמה 5: 100%...

CSS

/* --- הגדרות כלליות לדוגמה --- */
body {
    padding: 20px 40px;
    font-family: sans-serif;
    color: #000;
}
h3 {
    margin-top: 30px;
    margin-bottom: 10px;
}

/* --- עיצוב בסיסי של הסרגל --- */
.oxy-progress-bar-background {
    background-color: #000000;
    border-radius: 25px;
    overflow: hidden;
}

.oxy-progress-bar-progress-wrap {
    width: 0%; /* מתחילים מאפס */
    transition: width 2s ease-out; /* אנימציה חלקה לכל רוחב שנקבע ב-HTML */
}

.oxy-progress-bar-progress {
    padding: 10px 15px;
    border-radius: 25px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    
    background-image: linear-gradient(-45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%, transparent);
    background-size: 44px 44px;
    animation: oxy_progress_bar_stripes 1s linear infinite;
}

/* 
  --- ✨ החלק החדש: קביעת צבע הרקע לפי אחוזים --- 
*/
[data-progress="0"] .oxy-progress-bar-progress,
[data-progress="25"] .oxy-progress-bar-progress {
    background-color: #ff5252; /* אדום בהיר */
}

[data-progress="0"] .oxy-progress-bar-progress {
    background-color: #ff1744; /* אדום בוהק - דורס את הקודם */
}

[data-progress="50"] .oxy-progress-bar-progress {
    background-color: #0d47a1; /* כחול עמוק */
}

[data-progress="75"] .oxy-progress-bar-progress {
    background-color: #42a5f5; /* כחול בהיר */
}

[data-progress="100"] .oxy-progress-bar-progress {
    background-color: #4caf50; /* ירוק בהיר */
}


/* --- אנימציית הפסים --- */
@keyframes oxy_progress_bar_stripes {
  from { background-position: 44px 0; }
  to { background-position: 0 0; }
}

/* --- עיצוב טקסטים --- */
.oxy-progress-bar-overlay-text,
.oxy-progress-bar-overlay-percent {
    font-size: 14px;
    font-weight: 600;
}