progress's Introduction

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;
}