Progress
Page Scroll Reading Progress Indicator.
How to install
You can download the lib:
Please, this lib don't have CDN yet, so you need to download and put it in your own site.
Demo
Access the url and view in action.
How to use
Loading the lib
Like I said, you need to download and put this lib in your own site, using this tag below:
<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>In an AMD loader:
require(['/path/to/progress.min'], function(Progress) { Progress.init() });CSS Rules for the 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; }Compatibility
 |  |  |  |  |
|---|---|---|---|---|
| IE 9+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
License
MIT License: http://opensource.org/licenses/MIT
