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 sen.........完整代码请登录后点击上方下载按钮下载查看