css实现顶部文章滚动进度条效果代码-html代码-BFW代码库

css实现顶部文章滚动进度条效果代码

代码语言：html

所属分类：进度条

代码描述：css实现顶部文章滚动进度条效果代码，纯css实现进度条显示当前阅读进度。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@keyframes progress {
  to { width: 100%; }
}

.reading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 1rem;
  background: linear-gradient(45deg, red, blue);
  z-index: 1;
  animation: progress linear;
  animation-timeline: scroll(root);
}

/* demo */
body {
  font-family: Palatino, 'Palatino Linotype', Helvetica, Arial, sans-serif;
  font-size: 2rem;
  max-width: 60ch;
  line-height: 1.3;
  background:
    repeating-linear-gradient(45deg, #0000 0 2px, #00000008 0 4px),
    repeating-linear-gradient(-45deg, #0000 0 2px, #00000008 0 4px);
}
</style>

  
  
  
</head>

<body >
  <div class="reading-indicator"></div>

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet porttitor lacus luctus accumsan. Magna eget est lorem ipsum dolor sit amet consectetur. Ultricies lacus sed turpis tincidunt id aliquet. Nisi porta lorem mollis aliquam. Iaculis nunc sed augue lacus. Dolor sed viverra ipsum nunc aliquet bibendum enim. Faucibus nisl tincidunt eget nullam non. Nullam ac tortor vitae purus faucibus ornare. Diam vulputate ut pharetra sit amet aliquam id diam. Nisl vel pretium lectus quam id.</p>

<p>Massa id neque aliquam vestibulum morbi. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Tristique senectus et netus et malesuada fames ac. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Risus ultricies tristique nulla aliquet. Non odio euismod lacinia at quis risus sed vulputate. Massa id neque aliquam vestibulum morbi blandit cursus risus. Viverra mauris in aliquam sem fringilla ut. Rhoncus dolor purus non enim praesent elementum. Egestas sed sed risus pretium quam vulputate dignissim suspendisse in. Quam vulputate dignissim suspendisse in. Diam vel quam elementum pulvinar etiam. Enim sed faucibus turpis in eu mi bibendum neque. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. A scelerisque purus semper eget duis at tellus at. Felis imperdiet proin fermentum leo. Dui sapien eget mi proin sed libe.........完整代码请登录后点击上方下载按钮下载查看