نوار جدول زمانی پیشرفت را در مرحله آسان اسکرول کنید.

Scroll Watcher یک نوار پیشرفت است که نوار اسکرول را بررسی می کند. این به عنوان یک نوار عمل می کند که 0٪ را به عنوان شروع صفحه وب و 100٪ را به عنوان پایان صفحه وب نشان می دهد.
مثال:
1- ما در بالای صفحه وب هستیم.

2- ما در انتهای صفحه وب هستیم.

HTML: –

فقط یک div با نام کلاس اضافه کنید.

CSS:-

1- Make div with some initial height, i have given of 5px and width of 100%
2- Choose color of as you like.
3- Give z-index of max so that our scroll watcher do not go behind any other component. It should be at the top.
4- Scroll watcher should be sticked to the top of the page.
5- I have given “margin:auto” to make the scroller at the top-center.

.scroll-watcher{
    height: 5px;
    background-color: rgb(110, 36, 213);
    border-radius: 15px;
    position: sticky;
    width: 100%;
    z-index: 999;
    margin: auto;
    top: 0;
  }

پس از انجام، به این نتیجه خواهید رسید:

اکنون زمان اضافه کردن انیمیشن است.
فریم کلیدی را با از و به اضافه کنید. from نشان می دهد که عرض اولیه چقدر خواهد بود و to نشان می دهد که عرض نهایی چیست.

@keyframes scroll-watcher {
    from{width:5%}
    to{width:100%}
  }

اکنون ویژگی animation را برای اسکرول اضافه کنید.
1- نام انیمیشن و ویژگی انیمیشن را در اینجا خطی داده ام.
animation: scroll-watcher linear;
2- تایم لاین انیمیشن بدهید، در اینجا اسکرول نشان دهید که انیمیشن کار خواهد کرد
وقتی در حال پیمایش هستید
animation-timeline: scroll();

بنابراین CSS نهایی خواهد بود

.scroll-watcher {
    height: 5px;
    background-color: rgb(110, 36, 213);
    border-radius: 15px;
    position: sticky;
    width: 100%;
    z-index: 1000;
    margin: auto;
    top: 0;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
}

با تشکر،
با خیال راحت هر گونه سوالی را بپرسید.