├── .npmignore ├── README.md ├── demo └── vanilla │ ├── demo.min.js │ ├── index.html │ └── internal.html ├── index.js ├── package.json └── src └── ScrollProgress.vue /.npmignore: -------------------------------------------------------------------------------- 1 | /demo/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Scrol indicator for vue.js apps 2 | 3 | ### Demo 4 | 5 | See [DEMO](https://shershen08.github.io/vue-plugins-demo-static/index.html#/scroll) here 6 | 7 | ### Install 8 | 9 | Run ```npm install vue-content-scroll-progress --save``` 10 | 11 | ### Usage 12 | 13 | Add in the component ```import MyScrollPugin from 'vue-content-scroll-progress'; ``` 14 | 15 | Add tag `````` 16 | 17 | - **spy** is a required parameter; pass it a selector of the scrolled container element 18 | - **color**, optional; e.g. "#ffcc00" - color of the indicator 19 | - **extraClass**, optional; e.g. "someclass" - add more complicated styling on the progress bar 20 | 21 | ### License 22 | 23 | MIT 24 | 25 | -------------------------------------------------------------------------------- /demo/vanilla/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 63 | 72 | 73 | 74 | 75 | 76 |
77 |
78 |

79 | Vue Scroll Progress 80 |

81 |
82 | a easy example using the vue to implement easy web 83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 |
94 |
95 | 96 | 97 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /demo/vanilla/internal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 27 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import ScrollProgress from './src/ScrollProgress.vue'; 2 | 3 | export default ScrollProgress; 4 | export { ScrollProgress }; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-content-scroll-progress", 3 | "version": "0.0.3", 4 | "description": "vue.js plugin for scrolling progress bar display", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/shershen08/vuejs-content-scroll-progress.git" 12 | }, 13 | "keywords": [ 14 | "vue.js", 15 | "content scroll", 16 | "progress bar", 17 | "inidcator" 18 | ], 19 | "author": "mkuznetcov", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/shershen08/vuejs-content-scroll-progress/issues" 23 | }, 24 | "homepage": "https://github.com/shershen08/vuejs-content-scroll-progress#readme" 25 | } 26 | -------------------------------------------------------------------------------- /src/ScrollProgress.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 84 | 85 | --------------------------------------------------------------------------------