使用純CSS實現(xiàn)網(wǎng)頁閱讀進(jìn)度條

發(fā)布時間：2023-12-05 11:51:09 作者：獨(dú)立開發(fā)者張張

為了構(gòu)建一個閱讀進(jìn)度條，即顯示用戶向下滾動時閱讀文章的進(jìn)度，很難不考慮 JavaScript,但是，事實證明，您也可以使用純 CSS 構(gòu)建閱讀進(jìn)度條，本文小編就給大家介紹如何使用純CSS實現(xiàn)網(wǎng)頁閱讀進(jìn)度條,需要的朋友可以參考下

為了構(gòu)建一個閱讀進(jìn)度條，即顯示用戶向下滾動時閱讀文章的進(jìn)度，很難不考慮 JavaScript。但是，事實證明，您也可以使用純 CSS 構(gòu)建閱讀進(jìn)度條。

從本質(zhì)上講，一個名為 animation-timeline 的新實驗性 CSS 屬性可以讓你指定用于控制 CSS 動畫進(jìn)度的時間軸。我們將用它來創(chuàng)建閱讀進(jìn)度條。

首先，我們需要定義一個用作進(jìn)度條的 div 元素。我們將使用一個固定在視口頂部的容器來包裝這個 div 。這將確保用戶向下滾動頁面時進(jìn)度條始終可見。

<div class="progress-bar-container">
    <div class="progress-bar"></div>
</div>
<div class="content">
    <!-- content goes here -->
</div>

接下來，我們將定義進(jìn)度條的樣式。我們將設(shè)置 progress-bar-container 固定在視口頂部并調(diào)整其背景顏色，該顏色始終對用戶可見。我們還將 progress-bar 設(shè)置為 100% 寬度。

.progress-bar-container {
    position: fixed;
    top: 0px;
    width: 100%;
    background: #6c2fa2;
    z-index: 999;
}

現(xiàn)在，為了使進(jìn)度條動畫化，我們將為 progress-bar 使用不同的背景顏色，并將其高度設(shè)置為 7px 。我們還將 animation-name 設(shè)置為 width ，這實際上將進(jìn)度條的寬度從 0 動畫到 100%。

最后，我們將 animation-timeline 設(shè)置為 scroll(y) ，將動畫時間軸綁定到視口的垂直滾動位置。這將確保當(dāng)用戶向下滾動頁面時進(jìn)度條具有動畫效果。

.progress-bar {
    height: 7px;
    background: #e131ff;
    animation-name: width;
    /* animation timeline is tied to vertical scroll position */
    animation-timeline: scroll(y);
}
@keyframes width {
    from { width: 0 }
    to   { width: 100% }
}

就是這樣！您可以在下面看到它的實際效果。