NEW 3 PROGRESS BARS

by rami7250

HTML

<h3>עיצוב 1: סרגל ניאון "קפסולה"</h3>
<div class="progress-bar-wrapper neon-bar-1" data-progress="70">
    <div class="progress-bar-background">
        <div class="progress-bar-progress-wrap">
            <div class="progress-bar-progress">
                <span class="percentage">0%</span>
            </div>
        </div>
    </div>
</div>

<h3>עיצוב 2: סרגל ניאון ורוד-כחול</h3>
<div class="progress-bar-wrapper neon-bar-2" data-progress="70">
    <div class="progress-bar-background">
        <div class="progress-bar-progress-wrap">
            <div class="progress-bar-progress">
                <span class="percentage">0%</span>
            </div>
        </div>
    </div>
</div>

<h3>עיצוב 3: סרגל ניאון "אנרגיה" ירוקה</h3>
<div class="progress-bar-wrapper neon-bar-3" data-progress="70">
    <div class="progress-bar-background">
        <div class="progress-bar-progress-wrap">
            <div class="progress-bar-progress">
                <span class="percentage">0%</span>
            </div>
        </div>
    </div>
</div>

CSS

/* ============================================== */
/* ============= הגדרות כלליות ================== */
/* ============================================== */
body {
    background-color: #0b071a; /* רקע סגול-כהה עמוק */
    padding: 30px;
    font-family: sans-serif;
}
.progress-bar-wrapper {
    margin-bottom: 50px;
}
.percentage {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    position: relative; /* לוודא שהטקסט תמיד נראה */
    z-index: 2;
}
/* הגדרת מעבר חלק לאנימציית המילוי שתופעל על ידי JS */
.progress-bar-progress-wrap {
    transition: width 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ======================================================== */
/* ============ עיצוב 1: קפסולה כחולה (מדויק) ============ */
/* ======================================================== */
.neon-bar-1 .progress-bar-background {
    background: rgba(0,0,0,0.3);
    border: 1px solid #2a94ff; /* גוון כחול מדויק יותר */
    border-radius: 50px;
    padding: 5px;
    box-shadow: 0 0 15px rgba(42, 148, 255, 0.4);
}
.neon-bar-1 .progress-bar-progress-wrap {
    filter: drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 20px #5dfaff);
}
.neon-bar-1 .progress-bar-progress {
    height: 30px;
    border-radius: 50px;
    background: #c3faff; /* לב ליבה בהיר יותר */
    box-shadow: inset 0 0 8px #fff, inset 0 0 15px #26c0e8;
    display: flex; align-items: center; justify-content: center;
}
.neon-bar-1 .percentage {
    color: #004b5c; text-shadow: 0 0 2px rgba(255,255,255,0.6);
}


/* ===================================================== */
/* ============ עיצוב 2: ורוד-כחול (מתוקן) ============== */
/* ===================================================== */
.neon-bar-2 { position: relative; }
.neon-bar-2 .progress-bar-background {
    border-radius: 50px;
    padding: 6px;
    position: relative;
    /* גבול בצבע ורוד זוהר */
    border: 2px solid #ff5af2;
    box-shadow: 0 0 15px rgba(255,90,242,0.6), 0...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    // לולאה שרצה על כל סרגל התקדמות בעמוד
    document.querySelectorAll('.progress-bar-wrapper').forEach(bar => {
        // קריאת אחוז ההתקדמות הרצוי מה-HTML
        const finalProgress = parseInt(bar.dataset.progress, 10);
        if (isNaN(finalProgress)) return; // דלג אם אין מספר
        
        const wrap = bar.querySelector('.progress-bar-progress-wrap');
        const percentageElement = bar.querySelector('.percentage');

        // איפוס לפני התחלת האנימציה
        wrap.style.width = '0%';
        if (percentageElement) {
            percentageElement.textContent = '0%';
        }

        // הפעלת האנימציות לאחר השהייה קצרה (כדי לאפשר לדף להיטען)
        setTimeout(() => {
            // אנימציית מילוי הסרגל
            wrap.style.width = finalProgress + '%';

            // אנימציית עדכון הטקסט של האחוזים
            if (percentageElement) {
                let currentProgress = 0;
                const animationDuration = 2500; // 2.5 שניות, תואם ל-transition ב-CSS
                
                // ודא שהמונה לא ימשיך לרוץ ללא הפסקה אם האחוז הוא 0
                if (finalProgress === 0) {
                     percentageElement.textContent = '0%';
                     return;
                }

                const stepTime = Math.abs(animationDuration / finalProgress);
                const timer = setInterval(() => {
                    currentProgress++;
                    percentageElement.textContent = currentProgress + '%';
                    if (currentProgress >= finalProgress) {
                        clearInterval(timer);
                    }
                }, stepTime);
            }
        }, 100);
    });
});