Author: | pinceladasdaweb |
---|---|
Views Total: | 324 views |
Official Page: | Go to website |
Last Update: | December 5, 2022 |
License: | MIT |
Preview:

Description:
Progress.js is a small JavaScript library that generates an animated, circular, SVG based progress bar to indicate the reading progress as you scroll down the page.
How to use it:
Load the Progress.js
at the end of the document.
<script src="path/to/progress.min.js"></script>
Create a circular progress bar using SVG element.
<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>
A little CSS to style the progress indicator.
.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; }
That’s it. The progress indicator will auto update based on the scroll depth.
Changelog:
v0.0.6 (12/06/2022)
- Upgrade dependencies.