Page Scroll Reading Progress Indicator.
You can download the lib:
Please, this lib doesn't have CDN yet, so you need to download and put it in your own site.
Download the file progress.min.js and put this lib in your own site, using the tag <script>:
<html>
<head></head>
<body>
<!-- The HTML of progress indicator -->
<div class="progress-indicator">
<svg>
<g>
<circle cx="0" cy="0" r="20" stroke="black" class="animated-circle" transform="translate(50,50) rotate(-90)" />
</g>
<g>
<circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)" />
</g>
</svg>
<div class="progress-count"></div>
</div>
<!-- Loading and initialize the progress lib -->
<script src="/path/to/progress.min.js"></script>
<script>Progress.init();</script>
</body>
</html>Or using an AMD loader:
require(['/path/to/progress.min'], function(Progress) {
Progress.init()
});.progress-indicator {
position: fixed;
top: 10px;
right: 20px;
width: 100px;
height: 100px;
z-index: 20;
}
.progress-count {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
color: #0082FF;
}
svg {
position: absolute;
}
circle {
fill: rgba(255,255,255,0.9);
}
svg .animated-circle {
fill: transparent;
stroke-width: 40px;
stroke: #0A74DA;
stroke-dasharray: 126;
stroke-dashoffset: 126;
} |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 9+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
MIT License: http://opensource.org/licenses/MIT