├── .gitignore
├── LICENSE.txt
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
    ├── PageProgress.svelte
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist/
4 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Noman Gul
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-page-progress
 2 | 
 3 | > Svelte Component that tracks a users progress through a page as they scroll
 4 | 
 5 | [![NPM](https://img.shields.io/npm/v/svelte-page-progress.svg)](https://www.npmjs.com/package/svelte-page-progress) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 6 | 
 7 | 
 8 | **Watch Demo [Here](https://svelte.dev/repl/e9e33bd005874264917a14c3c252124c?version=3.22.3)**
 9 | 
10 | ## Install
11 | 
12 | ```bash
13 | npm install svelte-page-progress
14 | ```
15 | 
16 | OR
17 | 
18 | ```bash
19 | yarn add svelte-page-progress
20 | ```
21 | 
22 | ## Usage
23 | 
24 | ```svelte
25 | <script>
26 |   import PageProgress from "svelte-page-progress"
27 | </script>
28 | 
29 | <PageProgress color="red" heigh="1vh" />
30 | ```
31 | 
32 | ## Props
33 | 
34 | | Props  |  Type  | Default | Value                                                                                                                                            |
35 | | :----- | :----: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------- |
36 | | color  | string |     `SkyBlue`     | valid [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) value |
37 | | height | string |     `4px`     | valid [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height) value                                                                                                               |
38 | 
39 | ## License
40 | 
41 | MIT © [NomanGul](https://github.com/NomanGul)
42 | 
43 | ## Feedback 
44 | Any questions or suggestions?
45 | 
46 | You are welcome to discuss it on:
47 | 
48 | [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/NomanGulKhan)
49 | 
50 | <br/>
51 | <br/>
52 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "svelte-page-progress",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@rollup/plugin-node-resolve": {
  8 |       "version": "7.1.3",
  9 |       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
 10 |       "integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "@rollup/pluginutils": "^3.0.8",
 14 |         "@types/resolve": "0.0.8",
 15 |         "builtin-modules": "^3.1.0",
 16 |         "is-module": "^1.0.0",
 17 |         "resolve": "^1.14.2"
 18 |       }
 19 |     },
 20 |     "@rollup/pluginutils": {
 21 |       "version": "3.0.10",
 22 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
 23 |       "integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
 24 |       "dev": true,
 25 |       "requires": {
 26 |         "@types/estree": "0.0.39",
 27 |         "estree-walker": "^1.0.1",
 28 |         "picomatch": "^2.2.2"
 29 |       }
 30 |     },
 31 |     "@types/estree": {
 32 |       "version": "0.0.39",
 33 |       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
 34 |       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
 35 |       "dev": true
 36 |     },
 37 |     "@types/node": {
 38 |       "version": "14.0.1",
 39 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.1.tgz",
 40 |       "integrity": "sha512-FAYBGwC+W6F9+huFIDtn43cpy7+SzG+atzRiTfdp3inUKL2hXnd4rG8hylJLIh4+hqrQy1P17kvJByE/z825hA==",
 41 |       "dev": true
 42 |     },
 43 |     "@types/resolve": {
 44 |       "version": "0.0.8",
 45 |       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
 46 |       "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
 47 |       "dev": true,
 48 |       "requires": {
 49 |         "@types/node": "*"
 50 |       }
 51 |     },
 52 |     "builtin-modules": {
 53 |       "version": "3.1.0",
 54 |       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
 55 |       "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
 56 |       "dev": true
 57 |     },
 58 |     "estree-walker": {
 59 |       "version": "1.0.1",
 60 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
 61 |       "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
 62 |       "dev": true
 63 |     },
 64 |     "fsevents": {
 65 |       "version": "2.1.3",
 66 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
 67 |       "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
 68 |       "dev": true,
 69 |       "optional": true
 70 |     },
 71 |     "is-module": {
 72 |       "version": "1.0.0",
 73 |       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
 74 |       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
 75 |       "dev": true
 76 |     },
 77 |     "path-parse": {
 78 |       "version": "1.0.6",
 79 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
 80 |       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
 81 |       "dev": true
 82 |     },
 83 |     "picomatch": {
 84 |       "version": "2.2.2",
 85 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
 86 |       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
 87 |       "dev": true
 88 |     },
 89 |     "require-relative": {
 90 |       "version": "0.8.7",
 91 |       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
 92 |       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
 93 |       "dev": true
 94 |     },
 95 |     "resolve": {
 96 |       "version": "1.17.0",
 97 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
 98 |       "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
 99 |       "dev": true,
100 |       "requires": {
101 |         "path-parse": "^1.0.6"
102 |       }
103 |     },
104 |     "rollup": {
105 |       "version": "2.10.2",
106 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.2.tgz",
107 |       "integrity": "sha512-tivFM8UXBlYOUqpBYD3pRktYpZvK/eiCQ190eYlrAyrpE/lzkyG2gbawroNdbwmzyUc7Y4eT297xfzv0BDh9qw==",
108 |       "dev": true,
109 |       "requires": {
110 |         "fsevents": "~2.1.2"
111 |       }
112 |     },
113 |     "rollup-plugin-svelte": {
114 |       "version": "5.2.2",
115 |       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.2.tgz",
116 |       "integrity": "sha512-I+TJ2T+VLKGbKQcpeMJ4AR2ciROqTZNjxbiMiH4Cn1yByaB9OEuy3CnrgHHuWatQcPuF3yIViyKX7OlETWDKOQ==",
117 |       "dev": true,
118 |       "requires": {
119 |         "require-relative": "^0.8.7",
120 |         "rollup-pluginutils": "^2.8.2",
121 |         "sourcemap-codec": "^1.4.8"
122 |       }
123 |     },
124 |     "rollup-pluginutils": {
125 |       "version": "2.8.2",
126 |       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
127 |       "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
128 |       "dev": true,
129 |       "requires": {
130 |         "estree-walker": "^0.6.1"
131 |       },
132 |       "dependencies": {
133 |         "estree-walker": {
134 |           "version": "0.6.1",
135 |           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
136 |           "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
137 |           "dev": true
138 |         }
139 |       }
140 |     },
141 |     "sourcemap-codec": {
142 |       "version": "1.4.8",
143 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
144 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
145 |       "dev": true
146 |     },
147 |     "svelte": {
148 |       "version": "3.22.3",
149 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.22.3.tgz",
150 |       "integrity": "sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==",
151 |       "dev": true
152 |     }
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-page-progress",
 3 |   "version": "1.0.1",
 4 |   "author": "Noman Gul <nomangul2001@gmail.com>",
 5 |   "description": "Svelte Component that tracks a users progress through a page as they scroll",
 6 |   "svelte": "src/index.js",
 7 |   "module": "dist/index.mjs",
 8 |   "main": "dist/index.js",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/NomanGul/svelte-page-progress.git"
12 |   },
13 |   "license": "MIT",
14 |   "bugs": {
15 |     "url": "https://github.com/NomanGul/svelte-page-progress/issues"
16 |   },
17 |   "homepage": "https://github.com/NomanGul/svelte-page-progress",
18 |   "scripts": {
19 |     "build": "rollup -c",
20 |     "prepublishOnly": "npm run build"
21 |   },
22 |   "devDependencies": {
23 |     "@rollup/plugin-node-resolve": "^7.1.3",
24 |     "rollup": "^2.10.2",
25 |     "rollup-plugin-svelte": "^5.2.2",
26 |     "svelte": "^3.22.3"
27 |   },
28 |   "keywords": [
29 |     "svelte",
30 |     "svelte-page-progress",
31 |     "blogs",
32 |     "svelte-component",
33 |     "svelte-progress-bar"
34 |   ],
35 |   "files": [
36 |     "src",
37 |     "dist"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from '@rollup/plugin-node-resolve';
 3 | import pkg from './package.json';
 4 | 
 5 | const name = pkg.name
 6 | 	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
 7 | 	.replace(/^\w/, m => m.toUpperCase())
 8 | 	.replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 | 	input: 'src/index.js',
12 | 	output: [
13 | 		{ file: pkg.module, 'format': 'es' },
14 | 		{ file: pkg.main, 'format': 'umd', name }
15 | 	],
16 | 	plugins: [
17 | 		svelte(),
18 | 		resolve()
19 | 	]
20 | };
21 | 


--------------------------------------------------------------------------------
/src/PageProgress.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   let width = "0%"
 3 | 
 4 |   // props with default values
 5 |   export let color = "skyblue"
 6 |   export let height = "4px"
 7 | 
 8 |   const { style } = document.documentElement
 9 | 
10 |   $: style.setProperty("--spp-color", color)
11 |   $: style.setProperty("--spp-height", height)
12 |   $: style.setProperty("--spp-width", width)
13 | 
14 |   const watchScrolling = () => {
15 |     const { scrollHeight, clientHeight, scrollTop } = document.documentElement
16 |     const winScroll = document.body.scrollTop || scrollTop
17 |     const winHeight = scrollHeight - clientHeight
18 |     const scrolled = `${(winScroll / winHeight) * 100}%`
19 |     if (winHeight > 0) {
20 |       width = scrolled
21 |     } else {
22 |       width = 0
23 |     }
24 |   }
25 | 
26 |   let timer
27 |   const debounce = (fn) => {
28 |     clearTimeout(timer)
29 |     timer = setTimeout(fn, 100)
30 |   }
31 | 
32 |   const watchScrollingDebounce = () => debounce(watchScrolling)
33 | </script>
34 | 
35 | <style  >
36 |   .svelte-page-progress {
37 |     margin: 0;
38 |     padding: 0;
39 |     position: fixed;
40 |     top: 0;
41 |     left: 0;
42 |     z-index: 999;
43 |     background: var(--spp-color);
44 |     height: var(--spp-height);
45 |     width: var(--spp-width);
46 |     transition: width 200ms ease-out;
47 |   }
48 | </style>
49 | 
50 | <div class="svelte-page-progress"></div>
51 | <svelte:window on:scroll={watchScrollingDebounce} />
52 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as default } from './PageProgress.svelte';
2 | 


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