https://www.soundwords.de/lib/jquery.article-progress.js?v=79a21a6385

1/**
2 * The MIT License (MIT)
3 * 
4 * Copyright (c) 2017 Johannes Runkel (www.jrunkel.de)
5 * 
6 * Permission is hereby granted, free of charge, to any person obtaining a copy
7 * of this software and associated documentation files (the "Software"), to deal
8 * in the Software without restriction, including without limitation the rights
9 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 * copies of the Software, and to permit persons to whom the Software is
11 * furnished to do so, subject to the following conditions:
12 * 
13 * The above copyright notice and this permission notice shall be included in all
14 * copies or substantial portions of the Software.
15 * 
16 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 * SOFTWARE.
23 */
24
25;(function($, window) {
26	
27	var pluginName = 'articleProgress';
28	
29	var defaults = {
30		target: null,
31		mode: 'width',
32		advance: 30,
33		circleBg: '#fff',
34		circleFg: 'green'
35	};
36	
37	function Plugin(element, options) {
38		this.element = element;
39		this.options = $.extend({},	defaults, options);
40		if(!this.options.target) {
41			var progress = $('<div style="position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent;"></div>').append('<div style="position: absolute; width: 0%; height: 100%; left: 0; top: 0; background: green;"></div>');
42			$('body').append(progress);
43			this.options.target = progress.children();
44		}
45		this._default = defaults;
46		this._name = pluginName;
47		this.lastValue = -1;
48		this.init();
49	}
50	
51	Plugin.prototype.init = function() {
52		var t = this;
53		$(window).on('resize scroll', function() { t.update(); });
54		this.update();
55	};
56	
57	Plugin.prototype.update = function() {
58		var $el = $(this.element).eq(0);
59		var offset = $el.offset();
60		var scrollTop = $(window).scrollTop();
61		var articleHeight = $el.height();
62		var advanceHeight = $(window).height() * this.options.advance / 100;
63		var beforeArticle = scrollTop - offset.top + advanceHeight < 0;
64		var behindArticle = offset.top + articleHeight - scrollTop - advanceHeight < 0;
65		var onArticle = !beforeArticle && !behindArticle;
66		var percent = 0;
67		if(behindArticle) {
68			percent = 100;
69		} else if(!beforeArticle) {
70			percent = (scrollTop - offset.top + advanceHeight) / articleHeight * 100;
71			if(percent<0) percent = 0;
72		}
73		if(percent===this.lastValue) return;
74		this.lastValue = percent;
75		this.change(percent);
76	};
77	
78	Plugin.prototype.change = function(percent) {
79		var modes = this.options.mode.split(" ");
80		var $target = $(this.options.target);
81		for(var i in modes) {
82			var mode = modes[i];
83			switch(mode) {
84				case 'width':
85					$target.css('width', percent+'%');
86					break;
87				case 'text':
88					$target.text(Math.round(percent)+'%');
89					break;
90				case 'circle':
91					if(percent===100) {
92						$target.css('background-image', 'none');
93					} else {
94						var deg = 90 + (360 * percent/100);
95						var col1 = percent<50 ? 'transparent' : this.options.circleFg;
96						var col2 = percent<50 ? this.options.circleBg : 'transparent';
97						$target.css('background-image', 'linear-gradient('+deg+'deg, '+col1+' 50%, '+col2+' 50%), linear-gradient(90deg, '+this.options.circleBg+' 50%, transparent 50%)');
98					}
99					break;
100			}
101		}
102	};
103	
104	$.fn[pluginName] = function(options) {
105		return this.each(function() {
106			new Plugin(this, options);
107		});
108	};
109	
110})(jQuery, window);