├── example
    ├── assets
    │   ├── img
    │   │   ├── blog01.jpg
    │   │   └── user.png
    │   └── css
    │   │   └── style.css
    └── index.html
├── package.json
├── .gitignore
├── Gruntfile.js
├── LICENSE
├── lib
    └── progress.js
└── README.md


/example/assets/img/blog01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pinceladasdaweb/progress/HEAD/example/assets/img/blog01.jpg


--------------------------------------------------------------------------------
/example/assets/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pinceladasdaweb/progress/HEAD/example/assets/img/user.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Progress",
 3 |     "description": "Page Scroll Progress Indicator",
 4 |     "version": "0.0.6",
 5 |     "author": "Pedro Rogério",
 6 |     "scripts": {
 7 |         "test": "echo \"Error: no test specified\" && exit 1"
 8 |     },
 9 |     "devDependencies": {
10 |         "grunt": "^1.4.1",
11 |         "grunt-contrib-uglify": "^5.0.1"
12 |     },
13 |     "repository": "https://github.com/pinceladasdaweb/Progress",
14 |     "bugs": {
15 |         "url": "https://github.com/pinceladasdaweb/Progress/issues"
16 |     },
17 |     "licenses": [{
18 |         "type": "MIT",
19 |         "url": "http://opensource.org/licenses/MIT"
20 |     }]
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | # Dependency directory
23 | # Commenting this out is preferred by some people, see
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
25 | node_modules
26 | 
27 | # Users Environment Variables
28 | .lock-wscript
29 | 
30 | # Mac
31 | .DS_Store


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (grunt) {
 2 |     "use strict";
 3 | 
 4 |     var pkg  = grunt.file.readJSON("package.json"),
 5 |         date = new Date();
 6 | 
 7 |     grunt.initConfig({
 8 |         meta: {
 9 |           banner: '/*! ' + pkg.name + ' ' + pkg.version + ' | (c) ' + date.getFullYear() + ' ' + pkg.author + ' | ' + pkg.licenses[0].type + ' License */'
10 |         },
11 |         uglify: {
12 |             options: {
13 |                 banner: '<%= meta.banner %>\n'
14 |             },
15 |             target: {
16 |                 files: {
17 |                     'build/progress.min.js': ['lib/progress.js']
18 |                 }
19 |             }
20 |         }
21 |     });
22 | 
23 |     grunt.loadNpmTasks('grunt-contrib-uglify');
24 | 
25 |     grunt.registerTask('default', [ 'uglify' ]);
26 | };
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Pedro Rogério
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/lib/progress.js:
--------------------------------------------------------------------------------
 1 | /*jslint browser: true*/
 2 | /*global define, module, exports*/
 3 | (function (root, factory) {
 4 |     'use strict';
 5 |     if (typeof define === 'function' && define.amd) {
 6 |         define([], factory);
 7 |     } else if (typeof exports === 'object') {
 8 |         module.exports = factory();
 9 |     } else {
10 |         root.Progress = factory();
11 |     }
12 | }(this, function () {
13 |     'use strict';
14 |     var $w         = window,
15 |         $d         = document,
16 |         $circ      = document.querySelector('.animated-circle'),
17 |         $progCount = document.querySelector('.progress-count'),
18 |         init,
19 |         wh,
20 |         h,
21 |         sHeight;
22 | 
23 |     function trigger(eventName) {
24 |         var event = $d.createEvent('HTMLEvents');
25 |         event.initEvent(eventName, true, false);
26 | 
27 |         $w.dispatchEvent(event);
28 |     }
29 | 
30 |     function updateProgress(perc) {
31 |         var circle_offset = 126 * perc;
32 | 
33 |         $circ.style.strokeDashoffset = 126 - circle_offset;
34 | 
35 |         $progCount.innerHTML = (Math.round(perc * 100) + "%");
36 |     }
37 | 
38 |     function setSizes() {
39 |         wh = $w.innerHeight;
40 |         h  = $d.body.offsetHeight;
41 | 
42 |         sHeight = h - wh;
43 |     }
44 | 
45 |     function handler() {
46 |         setSizes();
47 |         trigger('scroll');
48 |     }
49 | 
50 |     init = function () {
51 |         var events = ['DOMContentLoaded', 'load', 'resize'], top, perc;
52 | 
53 |         setSizes();
54 | 
55 |         $w.addEventListener('scroll', function () {
56 |             top  = this.pageYOffset || $d.documentElement.scrollTop;
57 |             perc = Math.max(0, Math.min(1, top / sHeight));
58 | 
59 |             updateProgress(perc);
60 |         }, false);
61 | 
62 |         events.map(function (event) {
63 |             $w.addEventListener(event, handler, false);
64 |         });
65 |     };
66 | 
67 |     return {
68 |         init : init
69 |     };
70 | }));


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Progress
 2 | 
 3 | Page Scroll Reading Progress Indicator.
 4 | 
 5 | # How to install
 6 | 
 7 | You can download the lib:
 8 | 
 9 | * [development version](lib/progress.js)
10 | * [minified version](build/progress.min.js)
11 | 
12 | Please, this lib doesn't have CDN yet, so you need to download and put it in your own site.
13 | 
14 | # How to use
15 | 
16 | ### Loading the lib
17 | 
18 | Download the file **progress.min.js** and put this lib in your own site, using the tag _&lt;script&gt;_:
19 | 
20 | ```html
21 | <html>
22 |     <head></head>
23 |     <body>
24 |         <!-- The HTML of progress indicator -->
25 |         <div class="progress-indicator">
26 |             <svg>
27 |                 <g>
28 |                     <circle cx="0" cy="0" r="20" stroke="black" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
29 |                 </g>
30 |                 <g>
31 |                     <circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)"  />
32 |                 </g>
33 |             </svg>
34 |             <div class="progress-count"></div>
35 |         </div>
36 |         <!-- Loading and initialize the progress lib -->
37 |         <script src="/path/to/progress.min.js"></script>
38 |         <script>Progress.init();</script>
39 |     </body>
40 | </html>
41 | ```
42 | 
43 | Or using an AMD loader:
44 | 
45 | ```js
46 | require(['/path/to/progress.min'], function(Progress) {
47 |     Progress.init()
48 | });
49 | ```
50 | 
51 | ### CSS Rules for the indicator
52 | 
53 | ```css
54 | .progress-indicator {
55 |     position: fixed;
56 |     top: 10px;
57 |     right: 20px;
58 |     width: 100px;
59 |     height: 100px;
60 |     z-index: 20;
61 | }
62 | .progress-count {
63 |     position: absolute;
64 |     top: 0;
65 |     left: 0;
66 |     width: 100%;
67 |     height: 100%;
68 |     text-align: center;
69 |     line-height: 100px;
70 |     color: #0082FF;
71 | }
72 | 
73 | svg {
74 |     position: absolute;
75 | }
76 | 
77 | circle {
78 |     fill: rgba(255,255,255,0.9);
79 | }
80 | 
81 | svg .animated-circle {
82 |     fill: transparent;
83 |     stroke-width: 40px;
84 |     stroke: #0A74DA;
85 |     stroke-dasharray: 126;
86 |     stroke-dashoffset: 126;
87 | }
88 | ```
89 | 
90 | # Compatibility
91 | 
92 | ![IE](https://cloud.githubusercontent.com/assets/398893/3528325/20373e76-078e-11e4-8e3a-1cb86cf506f0.png) | ![Chrome](https://cloud.githubusercontent.com/assets/398893/3528328/23bc7bc4-078e-11e4-8752-ba2809bf5cce.png) | ![Firefox](https://cloud.githubusercontent.com/assets/398893/3528329/26283ab0-078e-11e4-84d4-db2cf1009953.png) | ![Opera](https://cloud.githubusercontent.com/assets/398893/3528330/27ec9fa8-078e-11e4-95cb-709fd11dac16.png) | ![Safari](https://cloud.githubusercontent.com/assets/398893/3528331/29df8618-078e-11e4-8e3e-ed8ac738693f.png)
93 | --- | --- | --- | --- | --- |
94 | IE 9+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
95 | 
96 | # License
97 | 
98 | MIT License: http://opensource.org/licenses/MIT
99 | 


--------------------------------------------------------------------------------
/example/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
  2 | 
  3 | body {
  4 |   	background-color: #ffffff;
  5 |   	font-family: 'Montserrat', sans-serif;
  6 |     font-weight: 400;
  7 |     font-size: 14px;
  8 |     color: #555;
  9 | 
 10 |     -webkit-font-smoothing: antialiased;
 11 |     -webkit-overflow-scrolling: touch;
 12 | }
 13 | 
 14 | /* Titles */
 15 | h1, h2, h3, h4, h5, h6 {
 16 | 	font-family: 'Montserrat', sans-serif;
 17 |     font-weight: 700;
 18 |     color: #333;
 19 | }
 20 | 
 21 | h1 {
 22 | 	font-size: 35px;
 23 | 	margin-top: 30px;
 24 | 	margin-bottom: 30px;
 25 | }
 26 | 
 27 | /* Paragraph & Typographic */
 28 | p {
 29 |     line-height: 28px;
 30 |     margin-bottom: 25px;
 31 |     font-size: 16px;
 32 | }
 33 | 
 34 | .centered {
 35 |     text-align: center;
 36 | }
 37 | 
 38 | /* Links */
 39 | a {
 40 |     color: #1abc9c;
 41 |     word-wrap: break-word;
 42 | 
 43 |     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 44 |     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 45 |     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 46 |     -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 47 |     transition: color 0.1s ease-in, background 0.1s ease-in;
 48 | }
 49 | 
 50 | a:hover,
 51 | a:focus {
 52 |     color: #7b7b7b;
 53 |     text-decoration: none;
 54 |     outline: 0;
 55 | }
 56 | 
 57 | a:before,
 58 | a:after {
 59 |     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 60 |     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 61 |     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 62 |     -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 63 |     transition: color 0.1s ease-in, background 0.1s ease-in;
 64 | }
 65 | 
 66 | hr {
 67 |     display: block;
 68 |     height: 1px;
 69 |     border: 0;
 70 |     border-top: 1px solid #ccc;
 71 |     margin: 1em 0;
 72 |     padding: 0;
 73 | }
 74 | 
 75 | 
 76 | .navbar {
 77 |     border-radius: 0;
 78 | 	text-transform: uppercase;
 79 | 	margin-bottom: 0px;
 80 |     position: fixed;
 81 |     width: 100%;
 82 |     z-index: 100
 83 | }
 84 | 
 85 | .navbar-inverse {
 86 | 	background-color: #2a3744;
 87 |     padding-bottom: 40px;
 88 |     padding-top: 40px;
 89 | }
 90 | 
 91 | .navbar-brand {
 92 | 	font-weight: 700;
 93 | 	font-size: 20px;
 94 |     height: 35px;
 95 |     line-height: 35px;
 96 | 	letter-spacing: 2px;
 97 |     margin: 0;
 98 |     padding: 0
 99 | }
100 | 
101 | .navbar-inverse .navbar-brand {
102 | 	color: white;
103 | }
104 | 
105 | /* +++++ WRAP SECTIONS +++++ */
106 | #footer {
107 | 	background-color: #2f2f2f;
108 | 	padding-top: 50px;
109 | 	padding-bottom: 50px;
110 | }
111 | 
112 | #footer p {
113 | 	color: white;
114 | }
115 | 
116 | /* Color Wraps */
117 | #white {
118 | 	padding-top: 200px;
119 | 	padding-bottom: 60px;
120 | 	background-color: #ffffff;
121 | }
122 | 
123 | /* Blog Date*/
124 | .bd {
125 | 	font-size: 12px;
126 | 	text-transform: uppercase;
127 | 	color: #d2d2d2;
128 | 	font-weight: 700;
129 | }
130 | 
131 | /* Blog Author*/
132 | .ba {
133 | 	font-size: 12px;
134 | 	text-transform: uppercase;
135 | }
136 | 
137 | /* Blog Tags */
138 | .bt {
139 | 	font-size: 12px;
140 | }
141 | 
142 | /* progress Configuration */
143 | .progress-indicator {
144 |     position: fixed;
145 |     top: 10px;
146 |     right: 20px;
147 |     width: 100px;
148 |     height: 100px;
149 |     z-index: 20;
150 | }
151 | .progress-count {
152 |     position: absolute;
153 |     top: 0;
154 |     left: 0;
155 |     width: 100%;
156 |     height: 100%;
157 |     text-align: center;
158 |     line-height: 100px;
159 |     color: #0082FF;
160 | }
161 | 
162 | svg {
163 |     position: absolute;
164 | }
165 | 
166 | circle {
167 |     fill: rgba(255,255,255,0.9);
168 | }
169 | 
170 | svg .animated-circle {
171 |     fill: transparent;
172 |     stroke-width: 40px;
173 |     stroke: #0A74DA;
174 |     stroke-dasharray: 126;
175 |     stroke-dashoffset: 126;
176 | }


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Progress - Page Scroll Progress Indicator</title>
 8 |     <!-- Bootstrap core CSS -->
 9 |     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
10 |     <!-- Custom styles for this template -->
11 |     <link href="assets/css/style.css" rel="stylesheet">
12 |     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
13 |     <!--[if lt IE 9]>
14 |         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
15 |         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
16 |     <![endif]-->
17 | </head>
18 | <body>
19 |     <!-- Static navbar -->
20 |     <div class="navbar navbar-inverse">
21 |         <div class="container">
22 |             <div class="navbar-header">
23 |                 <h1 class="navbar-brand">Progress</h1>
24 |             </div>
25 |         </div>
26 |         <div class="progress-indicator">
27 |             <svg>
28 |                 <g>
29 |                     <circle cx="0" cy="0" r="20" stroke="black" class="animated-circle" transform="translate(50,50) rotate(-90)"  />
30 |                 </g>
31 |                 <g>
32 |                     <circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)"  />
33 |                 </g>
34 |             </svg>
35 |             <div class="progress-count"></div>
36 |         </div>
37 |     </div>
38 | 
39 |     <!-- +++++ Post +++++ -->
40 |     <div id="white">
41 |         <div class="container">
42 |             <div class="row">
43 |                 <div class="col-lg-8 col-lg-offset-2">
44 |                     <p><img src="assets/img/user.png" width="50px" height="50px"> <span class="ba">Stanley Stinson</p>
45 |                     <p class="bd">January 3, 2014</p>
46 |                     <h4>An Image Post</h4>
47 |                     <p><img class="img-responsive" src="assets/img/blog01.jpg" alt=""></p>
48 |                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec nisl vitae quam commodo cursus. Phasellus porta placerat dolor vitae placerat. Sed eros nibh, vulputate sit amet purus sed, congue tempor libero. Sed semper urna ornare diam interdum, nec tincidunt mauris dictum. Sed consectetur lectus vitae sagittis volutpat. Duis sit amet condimentum lectus. Proin eu massa nec lectus viverra efficitur vel nec lorem. Praesent fermentum eros id purus ultricies feugiat. Ut et ligula interdum, sollicitudin ante a, fermentum ipsum. Mauris elementum diam est, nec finibus libero fringilla eu. In vulputate, magna in pulvinar mollis, sem lectus consectetur erat, a porta mi erat eget mauris. Suspendisse dignissim velit risus, ac pharetra orci iaculis in. Proin lobortis leo lectus. Vestibulum dolor leo, vulputate nec pharetra ac, tempus et sem. Nulla facilisi. Pellentesque ac eros lobortis, vestibulum ex vel, varius quam.</p>
49 |                     <p>Cras non ante in lectus malesuada ultricies. Duis semper pellentesque volutpat. Pellentesque tempor nec lacus sit amet lacinia. Suspendisse non augue neque. Proin scelerisque turpis mi, eget auctor velit consequat a. Vivamus dignissim sapien id viverra malesuada. Nunc eleifend sodales mauris suscipit gravida. Praesent a augue id felis hendrerit rhoncus. Nam tristique eros eu lobortis aliquet. Nunc sed lacinia arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed porta maximus turpis eu sodales. Vivamus efficitur tortor quis turpis tempor, efficitur ultrices est commodo. Nunc a porta felis. Morbi dui quam, interdum ac mi et, tristique commodo ipsum. Maecenas purus lacus, rhoncus sed nisi ut, ultrices pharetra enim.</p>
50 |                     <p>Nulla suscipit velit vitae tortor imperdiet, vel egestas enim rutrum. Vivamus lobortis justo nisl, ac fringilla odio placerat eget. Sed quis tortor eros. Morbi orci mauris, maximus quis nulla non, feugiat varius augue. Aliquam sed mauris varius, vestibulum augue eget, pretium nisl. Aenean eget purus semper, sagittis augue non, dignissim lacus. Vestibulum fringilla, sem sed posuere pulvinar, nisi odio efficitur lorem, vitae eleifend magna augue nec nisi. Duis sed facilisis sapien, ut vulputate quam. Nulla ullamcorper, ex nec hendrerit malesuada, urna nibh sodales turpis, eu bibendum quam ligula eu turpis. In eu velit lorem. Integer aliquam vitae diam lobortis varius. Sed congue porta mauris, sed imperdiet mi sollicitudin vel. Etiam vitae blandit lorem. Mauris a aliquet est, vel vehicula neque. Donec in justo at ligula congue mollis. Mauris ultricies purus ut nibh feugiat, id laoreet purus tincidunt.</p>
51 |                     <p>Donec et sagittis lectus. Sed ultrices massa vel turpis euismod varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin accumsan elit ac diam dignissim dapibus. Vestibulum vitae mattis justo. Aliquam posuere, augue non convallis dapibus, metus ipsum egestas felis, ac convallis tortor leo vel enim. Integer in elementum nisi. Sed id purus leo. Morbi id finibus nisl. Quisque vitae nisl neque. Ut blandit sodales erat at pretium. Maecenas nec molestie orci. Morbi lobortis quam at justo bibendum pulvinar. Praesent imperdiet eros ut ipsum efficitur, et condimentum orci efficitur. Vestibulum sed enim nulla.</p>
52 |                     <br>
53 |                     <p class="bt">TAGS: <a href="#">Wordpress</a> - <a href="#">Web Design</a></p>
54 |                     <hr>
55 |                 </div>
56 |             </div><!-- /row -->
57 |         </div> <!-- /container -->
58 |     </div><!-- /white -->
59 | 
60 |     <!-- +++++ Footer Section +++++ -->
61 |     <div id="footer">
62 |         <div class="container">
63 |             <div class="row">
64 |                 <p>My awesome footer</p>
65 |             </div>
66 |         </div>
67 |     </div>
68 | 
69 |     <script src="../build/progress.min.js"></script>
70 |     <script>Progress.init();</script>
71 | </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------