Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (124 loc) 路 11.4 KB
/
Copy pathindex.html
File metadata and controls
139 lines (124 loc) 路 11.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1,maximum-scale=1.0">
<title>scrollProgress | Jeremias Menichelli</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<style>
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
/*custom styles*/
body {
background-color: #eceff1;
color: #263238;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
}
p {
/*font-size: 1.25em;*/
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
width: 100%;
}
#header {
background-color: #2196f3;
}
.hero {
background-color: #263238;
}
.hero p,
#header p {
color: #fff;
}
h1 {
color: #fff;
font-size: 2.5em;
font-weight: 400;
margin: 0;
}
p.author {
text-transform: uppercase;
margin: 0;
}
a {
color: #fff;
}
.progress-bar {
background-color: #2196f3;
bottom: 0;
position: fixed;
height: 7px;
left: 0;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<h1>scroll<strong>Progress</strong></h1>
<p class="author">by Jeremias Menichelli</p>
<p>Small library that creates a progress bar that indicates how much you've scrolled on a website. It's very useful to show the reading progress in an article or a blog post.</p>
</div>
</div>
<div class="hero">
<div class="container">
<p>Scroll down and see how it works or <a href="https://github.com/jeremenichelli/scrollProgress#scrollprogress-">take a look at the official documentation</a>.</p>
<p>
Download the code from the <a href="https://github.com/jeremenichelli/scrollProgress">repository</a> or download it from <strong>bower</strong> and <strong>npm</strong> as <strong>scrollprogress</strong>.
</p>
<p><strong>Support:</strong> Chrome, Firefox, Safari and IE9+</p>
</div>
</div>
<div class="main">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tortor sit amet libero suscipit tristique. Sed eu sagittis orci. Integer tristique, tortor dapibus facilisis tincidunt, ante elit semper libero, in tincidunt arcu urna quis sem. In blandit urna metus, id pretium ipsum tincidunt non.
<p>Curabitur id tempor enim, nec lobortis justo. Curabitur erat augue, aliquet vel hendrerit id, pellentesque eu sapien. Sed auctor dictum sem sit amet dictum. Proin id lacus at nibh vestibulum tristique. Curabitur non blandit dolor, vitae sodales justo.</p>
<p>Suspendisse et vestibulum elit, eu porttitor ante. Phasellus vel sapien dui. Morbi interdum lacus vel arcu cursus imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vitae tellus eu orci elementum imperdiet at nec nisi. Pellentesque hendrerit, tortor vel tempor dignissim, est nisi molestie nibh, a semper risus nunc quis felis.</p>
<p>Nullam tempor tincidunt enim id dictum. Etiam dictum dui id purus placerat feugiat. Phasellus consequat ante massa. Ut odio sem, condimentum eget erat quis, volutpat convallis libero. Donec id pulvinar magna. Donec id enim mi. Nam lobortis lorem est, ac mollis urna euismod sed. Cras dignissim ut tortor vel posuere.</p>
<p>Sed lacinia felis vitae consectetur rutrum. Sed velit ligula, vehicula at consectetur eget, tempor eget tellus. Nulla molestie nisl non nunc euismod, tincidunt mattis massa suscipit. Nulla facilisi.</p>
<p> Pellentesque sem metus, ultrices ac lobortis ac, sodales ut eros. Nam tincidunt turpis sit amet congue scelerisque. Nunc elementum gravida ipsum, id placerat turpis pulvinar ut. Aliquam cursus felis et sagittis suscipit. Nam porta ligula est, vel varius nisi consectetur vel. Nam congue augue metus, sit amet blandit est hendrerit adipiscing. Nam sagittis dignissim urna. Nullam at rhoncus arcu. Nulla varius, dui placerat ullamcorper commodo, risus nibh fringilla dui, sit amet dignissim odio lectus et urna. Duis faucibus felis consectetur massa dictum ultricies. Maecenas eget porta mi, non dapibus dolor.</p>
<p>Donec a nisl consequat, sodales purus ut, hendrerit mauris. Fusce metus velit, dignissim adipiscing nisi non, viverra accumsan leo. Curabitur ultrices, magna id tempus viverra, felis ligula aliquam risus, eu rhoncus massa enim sit amet mi. Vestibulum faucibus volutpat euismod. Nulla facilisi. Vivamus ut euismod libero. Cras iaculis magna a faucibus lobortis. Nulla et est sed ante lacinia vestibulum at at diam. Aenean id urna molestie, egestas lectus ut, viverra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam felis nulla, laoreet in volutpat sed, sodales nec nulla. Nunc quis arcu hendrerit arcu lobortis tempus quis nec libero. Etiam congue nulla vitae fermentum cursus. Sed ac ornare nisi.</p>
<p>Praesent congue iaculis orci, vitae tempus orci accumsan ac. Nunc id nulla massa. Aliquam tincidunt quis mi et varius. Donec sagittis, orci id posuere porttitor, turpis arcu pulvinar odio, ac euismod tellus urna a massa. Fusce at enim risus. Nullam volutpat elementum nulla, sit amet fermentum neque iaculis eget. Maecenas ac nisi vulputate, pulvinar odio imperdiet, scelerisque sapien. Aenean non mi at turpis aliquam commodo sit amet et lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tortor sit amet libero suscipit tristique. Sed eu sagittis orci. Integer tristique, tortor dapibus facilisis tincidunt, ante elit semper libero, in tincidunt arcu urna quis sem. In blandit urna metus, id pretium ipsum tincidunt non.
<p>Curabitur id tempor enim, nec lobortis justo. Curabitur erat augue, aliquet vel hendrerit id, pellentesque eu sapien. Sed auctor dictum sem sit amet dictum. Proin id lacus at nibh vestibulum tristique. Curabitur non blandit dolor, vitae sodales justo.</p>
<p>Suspendisse et vestibulum elit, eu porttitor ante. Phasellus vel sapien dui. Morbi interdum lacus vel arcu cursus imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vitae tellus eu orci elementum imperdiet at nec nisi. Pellentesque hendrerit, tortor vel tempor dignissim, est nisi molestie nibh, a semper risus nunc quis felis.</p>
<p>Nullam tempor tincidunt enim id dictum. Etiam dictum dui id purus placerat feugiat. Phasellus consequat ante massa. Ut odio sem, condimentum eget erat quis, volutpat convallis libero. Donec id pulvinar magna. Donec id enim mi. Nam lobortis lorem est, ac mollis urna euismod sed. Cras dignissim ut tortor vel posuere.</p>
<p>Sed lacinia felis vitae consectetur rutrum. Sed velit ligula, vehicula at consectetur eget, tempor eget tellus. Nulla molestie nisl non nunc euismod, tincidunt mattis massa suscipit. Nulla facilisi.</p>
<p> Pellentesque sem metus, ultrices ac lobortis ac, sodales ut eros. Nam tincidunt turpis sit amet congue scelerisque. Nunc elementum gravida ipsum, id placerat turpis pulvinar ut. Aliquam cursus felis et sagittis suscipit. Nam porta ligula est, vel varius nisi consectetur vel. Nam congue augue metus, sit amet blandit est hendrerit adipiscing. Nam sagittis dignissim urna. Nullam at rhoncus arcu. Nulla varius, dui placerat ullamcorper commodo, risus nibh fringilla dui, sit amet dignissim odio lectus et urna. Duis faucibus felis consectetur massa dictum ultricies. Maecenas eget porta mi, non dapibus dolor.</p>
<p>Donec a nisl consequat, sodales purus ut, hendrerit mauris. Fusce metus velit, dignissim adipiscing nisi non, viverra accumsan leo. Curabitur ultrices, magna id tempus viverra, felis ligula aliquam risus, eu rhoncus massa enim sit amet mi. Vestibulum faucibus volutpat euismod. Nulla facilisi. Vivamus ut euismod libero. Cras iaculis magna a faucibus lobortis. Nulla et est sed ante lacinia vestibulum at at diam. Aenean id urna molestie, egestas lectus ut, viverra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam felis nulla, laoreet in volutpat sed, sodales nec nulla. Nunc quis arcu hendrerit arcu lobortis tempus quis nec libero. Etiam congue nulla vitae fermentum cursus. Sed ac ornare nisi.</p>
<p>Praesent congue iaculis orci, vitae tempus orci accumsan ac. Nunc id nulla massa. Aliquam tincidunt quis mi et varius. Donec sagittis, orci id posuere porttitor, turpis arcu pulvinar odio, ac euismod tellus urna a massa. Fusce at enim risus. Nullam volutpat elementum nulla, sit amet fermentum neque iaculis eget. Maecenas ac nisi vulputate, pulvinar odio imperdiet, scelerisque sapien. Aenean non mi at turpis aliquam commodo sit amet et lectus. </p>
</div>
</div>
<div id="footer">
<div class="container">
<p>
2017 © Jeremias Menichelli - MIT License
</p>
</div>
</div>
<div class="progress-bar"></div>
<script src="dist/scrollProgress.js"></script>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
var progressBar = document.querySelector('.progress-bar');
function onProgress(x, y) {
console.log(x, y)
progressBar.style.width = y * 100 + '%';
}
self.progressObserver = new ScrollProgress(onProgress);
}, 100)
});
</script>
</body>
</html>