איך ליצור Progress Bar בגלילה ב-CSS בלבד (בלי JS)

ולהפעם... אנימציה מגניבה פרו מקס פורטה פלוס פרימיום, משהו עם 4 מצלמות שיכולות לצלם אמבות על נוגה 😎. איך עושים progress-bar שמתקדם בגלילה של הדף ללא js בכלל, רק css, דבק מגע ואמונה בצדקת הדרך. דיייי 🤨 כן כן. מגיע לכם כי אתם חמודים, וכי חג, וכי בא לי. והיום נראה איך כמובטח אנחנו עושים קו התקדמות צמוד לtop:0 של המסך שבגלילה ימתח לאיטו לכל הרוחב של הדף לפי ההתקדמות של הלקוח קצה האומלל. 😋 לא הבנתם? תפתחו את הcodepen

ישנו div שמנמנן בposotion-fixed. שעם translate 100% מתחבא מחוץ לגבולות הדף ואנחנו מחזירים אותו בהדרגה ככל שהדף נגלל בהורדה של האחוזים עד 0%. (תמיד נעדיף לדבר עם transform והנגזרות שלו מאשר width וheight, למה? תשאלו את גוגל) ודרך הכתיבה?😏 😎 נצטרך אנימציה פשוטה - keyframes שמורידה אחוזים. 👨‍👩‍👧‍👧 ואז? למה תמיד אנחנו צריכים לחלוב אותך? שפוך כבר!!!! 😎 תנו לסיים משפט! יא נודניקים animation: scroll-progress auto linear; animation-timeline: scroll(); אלו שני שורות הקסם.🤩 הראשונה דיי ברורה למי שמשתמש באנימציות - (ואולי אקדיש בהמשך כמה פוסטים על אנימציות). וauto אומר שהduration של האנימציה יהיה אוטומטי כי אנחנו לא יודעים כמה זמן יקח לדביל לגלול עד למטה. והשניה? משו חדש בcss שאומר במילים של עברית צחה: ציר הזמן של האנימציה משוייך לגלילה של הדף. וזהו? אכן! אז שיהיה חג שמח לכולכם ואל תשכחו לתת לי קרדיט וביטקוין. ויודעים מה? מוותר על הקרדיט. 🤗