├── .babelrc ├── .editorconfig ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── deploy.sh ├── docs ├── .babelrc ├── .editorconfig ├── .nojekyll ├── README.md ├── ads.txt ├── dist │ ├── build.js │ └── build.js.map ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── favicon │ │ │ ├── android-icon-144x144.png │ │ │ ├── android-icon-192x192.png │ │ │ ├── android-icon-36x36.png │ │ │ ├── android-icon-48x48.png │ │ │ ├── android-icon-72x72.png │ │ │ ├── android-icon-96x96.png │ │ │ ├── apple-icon-114x114.png │ │ │ ├── apple-icon-120x120.png │ │ │ ├── apple-icon-144x144.png │ │ │ ├── apple-icon-152x152.png │ │ │ ├── apple-icon-180x180.png │ │ │ ├── apple-icon-57x57.png │ │ │ ├── apple-icon-60x60.png │ │ │ ├── apple-icon-72x72.png │ │ │ ├── apple-icon-76x76.png │ │ │ ├── apple-icon-precomposed.png │ │ │ ├── apple-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon-96x96.png │ │ │ ├── favicon.ico │ │ │ ├── manifest.json │ │ │ ├── ms-icon-144x144.png │ │ │ ├── ms-icon-150x150.png │ │ │ ├── ms-icon-310x310.png │ │ │ └── ms-icon-70x70.png │ │ ├── launcher.svg │ │ ├── metacard.png │ │ └── vue-scroll-progress.gif │ ├── components │ │ ├── Docs.vue │ │ ├── Footer.vue │ │ ├── GoogleAds.vue │ │ ├── Header.vue │ │ ├── Hero.vue │ │ ├── Install.vue │ │ ├── Placeholder.vue │ │ ├── Readme.vue │ │ ├── TopBtn.vue │ │ └── md │ │ │ └── README.md │ ├── globalVar.js │ ├── main.js │ ├── page │ │ └── Home.vue │ └── style │ │ ├── components │ │ └── _tooltip.scss │ │ ├── modules │ │ ├── _class.scss │ │ ├── _color.scss │ │ ├── _global.scss │ │ ├── _grid.scss │ │ ├── _layout.scss │ │ └── _mqbp.scss │ │ └── style.scss └── webpack.config.js ├── package-lock.json ├── package.json ├── robots.txt └── src └── vue-scroll-progress.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { "modules": false }], "stage-3"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | .env 4 | *.log 5 | *.cache 6 | *.sketch 7 | 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | launcher/ 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | .env 4 | *.log 5 | *.cache 6 | *.sketch 7 | 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | launcher/ 14 | 15 | docs/ 16 | .editorconfig 17 | .babelrc 18 | .git 19 | webpack.config.js 20 | .npmrc 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2019] [Hyouk Seo] 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-scroll-progress 🎉 2 | 3 | > Simple Vue.js plugin for page scroll progress bar 4 | 5 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) 6 | [![Version](https://img.shields.io/npm/v/vue-scroll-progress.svg)](https://www.npmjs.com/package/vue-scroll-progress) 7 | [![Gzipsize](https://img.badgesize.io/spemer/vue-scroll-progress/master/src/vue-scroll-progress.js?compression=gzip)](https://www.npmjs.com/package/vue-scroll-progress) 8 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue#progress-bar) 9 | [![License](https://img.shields.io/npm/l/vue-scroll-progress.svg)](https://github.com/spemer/vue-scroll-progress) 10 | [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fspemer%2Fvue-scroll-progress&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://github.com/spemer/vue-scroll-progress) 11 | [![stargazers](https://img.shields.io/github/stars/spemer/vue-scroll-progress?style=social)](https://github.com/spemer/vue-scroll-progress) 12 | 13 | [Live Demo](https://spemer.github.io/vue-scroll-progress/) 14 | 15 | 16 | 17 | ## Installation 18 | 19 | ```bash 20 | npm i vue-scroll-progress --save 21 | ``` 22 | 23 | ```bash 24 | yarn add vue-scroll-progress 25 | ``` 26 | 27 | ### CDNs 28 | 29 | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-scroll-progress/), 30 | [UNPKG](https://unpkg.com/vue-scroll-progress/), 31 | [bundle.run](https://bundle.run/vue-scroll-progress) 32 | 33 | ## Usage 34 | 35 | ### main.js 36 | 37 | ```javascript 38 | // YourComponent.vue or main.js for global usage 39 | import Vue from "vue"; 40 | import VueScrollProgress from "vue-scroll-progress"; 41 | 42 | Vue.use(VueScrollProgress); 43 | ``` 44 | 45 | ### Use in component 46 | 47 | ```html 48 | 49 | 52 | ``` 53 | 54 | ### Set progress bar style, and customize as you want(Optional) 55 | 56 | ```css 57 | 69 | ``` 70 | 71 | ## Author 72 | 73 | [Hyouk Seo(Spemer)](https://github.com/spemer) 74 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | BOLD=$(tput bold) 3 | RESET=$(tput sgr0) 4 | RED=$(tput setaf 1) 5 | GREEN=$(tput setaf 2) 6 | 7 | echo "============================================================" 8 | echo "${BOLD}${PWD##*/}${RESET}" 9 | echo "============================================================" 10 | 11 | #============================================================ 12 | # serve with hot reload at localhost:4020 13 | #============================================================ 14 | npm_run_dev() { 15 | while true; do 16 | printf "\n" 17 | read -p "${BOLD}${GREEN}npm run dev? (Y/n) ${RESET}" yn 18 | case ${yn} in 19 | [Yy]* ) cd docs && npm run dev && cd -; break;; 20 | [Nn]* ) return 0;; 21 | * ) echo "Please answer yes or no.";; 22 | esac 23 | done 24 | } 25 | 26 | #============================================================ 27 | # build for production with minification 28 | #============================================================ 29 | npm_run_build() { 30 | while true; do 31 | printf "\n" 32 | read -p "${BOLD}${GREEN}npm run build? (Y/n) ${RESET}" yn 33 | case ${yn} in 34 | [Yy]* ) cd docs && npm run build && cd -; break;; 35 | [Nn]* ) return 0;; 36 | * ) echo "Please answer yes or no.";; 37 | esac 38 | done 39 | } 40 | 41 | #============================================================ 42 | # git commit 43 | #============================================================ 44 | git_commit() { 45 | while true; do 46 | printf "\n" 47 | read -p "${BOLD}${GREEN}git commit? (Y/n) ${RESET}" yn 48 | case ${yn} in 49 | [Yy]* ) 50 | IFS= read -r -p "${BOLD}Enter commit message: ${RESET}" commitmsg 51 | 52 | # if commitmsg empty 53 | if [ -z "$commitmsg" ] 54 | then 55 | echo "${BOLD}${RED}Commit message is empty.${RESET}" 56 | commitmsg="Add files via upload" 57 | fi 58 | 59 | printf "\n" 60 | git add . 61 | git commit -m "$commitmsg" 62 | break;; 63 | 64 | [Nn]* ) return 0;; 65 | * ) echo "Please answer yes or no.";; 66 | esac 67 | done 68 | } 69 | 70 | #============================================================ 71 | # git push 72 | #============================================================ 73 | git_push() { 74 | while true; do 75 | printf "\n" 76 | read -p "${BOLD}${GREEN}git push? (Y/n) ${RESET}" yn 77 | case ${yn} in 78 | [Yy]* ) git push; break;; 79 | [Nn]* ) return 0;; 80 | * ) echo "Please answer yes or no.";; 81 | esac 82 | done 83 | } 84 | 85 | #============================================================ 86 | # npm publish 87 | #============================================================ 88 | npm_publish() { 89 | while true; do 90 | printf "\n" 91 | read -p "${BOLD}${GREEN}npm publish? (Y/n) ${RESET}" yn 92 | case ${yn} in 93 | [Yy]* ) npm publish; break;; 94 | [Nn]* ) return 0;; 95 | * ) echo "Please answer yes or no.";; 96 | esac 97 | done 98 | } 99 | 100 | #============================================================ 101 | # main 102 | #============================================================ 103 | main() { 104 | npm_run_dev 105 | npm_run_build 106 | git_commit 107 | git_push 108 | npm_publish 109 | } 110 | 111 | main 112 | -------------------------------------------------------------------------------- /docs/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { "modules": false }], "stage-3"] 3 | } 4 | -------------------------------------------------------------------------------- /docs/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/.nojekyll -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # vue-rippler-docs 2 | 3 | > vue-rippler-docs 4 | 5 | ## Build Setup 6 | 7 | ```bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /docs/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-3627439872518903, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | vue-scroll-progress 12 | 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 | 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 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-scroll-progress-docs", 3 | "description": "Simple Vue.js plugin for page scroll progress bar", 4 | "version": "1.0.0", 5 | "author": "spemer ", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "babel-polyfill": "^6.26.0", 14 | "es6-promise": "^4.2.5", 15 | "event-source-polyfill": "0.0.16", 16 | "promise-polyfill": "8.1.0", 17 | "v-tooltip": "^2.0.0-rc.33", 18 | "vue": "^2.5.11", 19 | "vue-clipboard2": "^0.2.1", 20 | "vue-markdown-loader": "^2.4.1", 21 | "vue-router": "^3.0.1", 22 | "vue-scrollto": "^2.13.0", 23 | "vue-toasted": "^1.1.24" 24 | }, 25 | "browserslist": [ 26 | "> 1%", 27 | "last 2 versions", 28 | "not ie <= 8" 29 | ], 30 | "devDependencies": { 31 | "babel-core": "^6.26.0", 32 | "babel-loader": "^7.1.2", 33 | "babel-preset-env": "^1.6.0", 34 | "babel-preset-stage-3": "^6.24.1", 35 | "cross-env": "^5.0.5", 36 | "css-loader": "^0.28.7", 37 | "file-loader": "^1.1.4", 38 | "node-sass": "^4.14.1", 39 | "pug": "^2.0.3", 40 | "pug-plain-loader": "^1.0.0", 41 | "sass-loader": "^6.0.6", 42 | "vue-loader": "^13.0.5", 43 | "vue-template-compiler": "^2.4.4", 44 | "webpack": "^3.8.0", 45 | "webpack-cli": "^4.8.0", 46 | "webpack-dev-server": "^2.11.5" 47 | }, 48 | "keywords": [ 49 | "VueJs", 50 | "Vue", 51 | "Js", 52 | "JavaScript", 53 | "Progress", 54 | "Plugin", 55 | "Library", 56 | "Material", 57 | "Design", 58 | "Button", 59 | "CSS", 60 | "Spemer", 61 | "Hyouk Seo", 62 | "NPM", 63 | "Yarn" 64 | ], 65 | "homepage": "https://github.com/spemer/vue-scroll-progress#readme" 66 | } 67 | -------------------------------------------------------------------------------- /docs/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/apple-icon.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /docs/src/assets/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/favicon.ico -------------------------------------------------------------------------------- /docs/src/assets/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /docs/src/assets/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /docs/src/assets/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /docs/src/assets/launcher.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | launcher 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/src/assets/metacard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/metacard.png -------------------------------------------------------------------------------- /docs/src/assets/vue-scroll-progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spemer/vue-scroll-progress/943cb09f12832a7a8fe5dba2c688c90569e48588/docs/src/assets/vue-scroll-progress.gif -------------------------------------------------------------------------------- /docs/src/components/Docs.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 45 | 46 | 72 | -------------------------------------------------------------------------------- /docs/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 61 | 62 | 109 | -------------------------------------------------------------------------------- /docs/src/components/GoogleAds.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 29 | 30 | 35 | -------------------------------------------------------------------------------- /docs/src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 58 | -------------------------------------------------------------------------------- /docs/src/components/Hero.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 33 | -------------------------------------------------------------------------------- /docs/src/components/Install.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | 39 | 64 | -------------------------------------------------------------------------------- /docs/src/components/Placeholder.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 29 | -------------------------------------------------------------------------------- /docs/src/components/Readme.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 29 | -------------------------------------------------------------------------------- /docs/src/components/TopBtn.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 50 | -------------------------------------------------------------------------------- /docs/src/components/md/README.md: -------------------------------------------------------------------------------- 1 | [![Gzipsize](https://img.badgesize.io/spemer/vue-scroll-progress/master/src/vue-scroll-progress.js?compression=gzip)](https://www.npmjs.com/package/vue-scroll-progress) 2 | [![Version](https://img.shields.io/npm/v/vue-scroll-progress.svg)](https://www.npmjs.com/package/vue-scroll-progress) 3 | [![License](https://img.shields.io/npm/l/vue-scroll-progress.svg)](https://github.com/spemer/vue-scroll-progress) 4 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue#progress-bar) 5 | -------------------------------------------------------------------------------- /docs/src/globalVar.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export const globalVar = new Vue({ 4 | data: { 5 | name: "vue-scroll-progress", 6 | npm: "npm i vue-scroll-progress --save", 7 | yarn: "yarn add vue-scroll-progress", 8 | 9 | fbURL: "https://www.facebook.com/ghsspower", 10 | igURL: "https://instagram.com/spemer", 11 | ghURL: "https://github.com/spemer", 12 | 13 | githubURL: "https://github.com/spemer/vue-scroll-progress", 14 | npmURL: "https://www.npmjs.com/package/vue-scroll-progress", 15 | yarnURL: "https://yarnpkg.com/en/package/vue-scroll-progress", 16 | 17 | jsDelivr: "https://cdn.jsdelivr.net/npm/vue-scroll-progress/", 18 | UNPKG: "https://unpkg.com/vue-scroll-progress/", 19 | Bundlr: "https://bundle.run/vue-scroll-progress", 20 | 21 | // gist 22 | main: "https://gist.github.com/spemer/f7e46970e19c4a50dea477cec36eb22b.js", 23 | app: "https://gist.github.com/spemer/ab26603292dd0ca36ac8eb8f2a3f8f75.js", 24 | style: "https://gist.github.com/spemer/417bd94f0e1c0e18743d32899dc016ba.js" 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /docs/src/main.js: -------------------------------------------------------------------------------- 1 | import "babel-polyfill"; 2 | import "event-source-polyfill"; 3 | import "es6-promise/auto"; 4 | 5 | import Vue from "vue"; 6 | import App from "./App.vue"; 7 | import VTooltip from "v-tooltip"; 8 | import Toasted from "vue-toasted"; 9 | import VueScrollTo from "vue-scrollto"; 10 | import VueClipboard from "vue-clipboard2"; 11 | import VueScrollProgress from "../../src/vue-scroll-progress"; 12 | 13 | Vue.use(Toasted); 14 | Vue.use(VTooltip); 15 | Vue.use(VueScrollTo); 16 | Vue.use(VueClipboard); 17 | Vue.use(VueScrollProgress); 18 | 19 | new Vue({ 20 | el: "#app", 21 | render: h => h(App) 22 | }); 23 | -------------------------------------------------------------------------------- /docs/src/page/Home.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | 41 | 46 | -------------------------------------------------------------------------------- /docs/src/style/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | display: block !important; 3 | z-index: 10000; 4 | @include font-size($grid3x); 5 | 6 | .tooltip-inner { 7 | color: white; 8 | font-weight: 500; 9 | background: $black78; 10 | padding: $grid2x $grid4x !important; 11 | @include font-size(12px); 12 | @include border-radius($grid32x !important); 13 | @include box-shadow($grid, $grid2x, $black16); 14 | } 15 | 16 | .tooltip-arrow { 17 | width: 0; 18 | height: 0; 19 | border-style: solid; 20 | position: absolute; 21 | margin: $grid; 22 | border-color: $black78; 23 | z-index: 10000; 24 | } 25 | 26 | &[x-placement^="top"] { 27 | margin-bottom: $grid2x; 28 | 29 | .tooltip-arrow { 30 | border-width: $grid $grid 0 $grid; 31 | border-left-color: transparent !important; 32 | border-right-color: transparent !important; 33 | border-bottom-color: transparent !important; 34 | bottom: -#{$grid}; 35 | left: calc(50% - #{$grid}); 36 | margin-top: 0; 37 | margin-bottom: 0; 38 | } 39 | } 40 | 41 | &[x-placement^="bottom"] { 42 | margin-top: $grid2x; 43 | 44 | .tooltip-arrow { 45 | border-width: 0 $grid $grid $grid; 46 | border-left-color: transparent !important; 47 | border-right-color: transparent !important; 48 | border-top-color: transparent !important; 49 | top: -#{$grid}; 50 | left: calc(50% - #{$grid}); 51 | margin-top: 0; 52 | margin-bottom: 0; 53 | } 54 | } 55 | 56 | &[x-placement^="right"] { 57 | margin-left: $grid2x; 58 | 59 | .tooltip-arrow { 60 | border-width: $grid $grid $grid 0; 61 | border-left-color: transparent !important; 62 | border-top-color: transparent !important; 63 | border-bottom-color: transparent !important; 64 | left: -#{$grid}; 65 | top: calc(50% - #{$grid}); 66 | margin-left: 0; 67 | margin-right: 0; 68 | } 69 | } 70 | 71 | &[x-placement^="left"] { 72 | margin-right: $grid2x; 73 | 74 | .tooltip-arrow { 75 | border-width: $grid 0 $grid $grid; 76 | border-top-color: transparent !important; 77 | border-right-color: transparent !important; 78 | border-bottom-color: transparent !important; 79 | right: -#{$grid}; 80 | top: calc(50% - #{$grid}); 81 | margin-left: 0; 82 | margin-right: 0; 83 | } 84 | } 85 | 86 | &.popover { 87 | $color: #f9f9f9; 88 | 89 | .popover-inner { 90 | background: $color; 91 | color: black; 92 | padding: $grid6x; 93 | border-radius: $grid; 94 | -webkit-box-shadow: 0 $grid $grid8x rgba(black, 0.1); 95 | box-shadow: 0 $grid $grid8x rgba(black, 0.1); 96 | } 97 | 98 | .popover-arrow { 99 | border-color: $color; 100 | } 101 | } 102 | 103 | &[aria-hidden="true"] { 104 | visibility: hidden; 105 | opacity: 0; 106 | -webkit-transition: opacity 0.25s, visibility 0.25s; 107 | transition: opacity 0.25s, visibility 0.25s; 108 | } 109 | 110 | &[aria-hidden="false"] { 111 | visibility: visible; 112 | opacity: 1; 113 | -webkit-transition: opacity 0.25s, visibility 0.25s; 114 | transition: opacity 0.25s, visibility 0.25s; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /docs/src/style/modules/_class.scss: -------------------------------------------------------------------------------- 1 | /* ============================== 2 | box-shadow 3 | ============================== */ 4 | @mixin box-shadow($val: $grid2x, $val2: $grid4x, $color: $black08) { 5 | -webkit-box-shadow: 0 $val $val2 $color; 6 | -ms-box-shadow: 0 $val $val2 $color; 7 | -o-box-shadow: 0 $val $val2 $color; 8 | box-shadow: 0 $val $val2 $color; 9 | } 10 | 11 | /* ============================== 12 | border-radius 13 | ============================== */ 14 | @mixin border-radius($val: $grid4x) { 15 | border-radius: $val; 16 | } 17 | 18 | /* ============================== 19 | border-radius 20 | ============================== */ 21 | @mixin transform($val) { 22 | -webkit-transform: $val; 23 | transform: $val; 24 | } 25 | 26 | /* ============================== 27 | css grid layout 28 | ============================== */ 29 | @mixin grid-layout($col: 3, $row: $grid16x, $gap: $grid8x) { 30 | display: grid; 31 | grid-template-columns: repeat($col, 1fr); 32 | grid-auto-rows: minmax($row, auto); 33 | grid-gap: $gap; 34 | } 35 | 36 | /* ============================== 37 | global btn 38 | ============================== */ 39 | .global__cta { 40 | text-align: center; 41 | 42 | .global__cta--btn { 43 | width: 200px; 44 | outline: none; 45 | cursor: pointer; 46 | height: $grid14x; 47 | font-weight: 900; 48 | margin-top: $grid8x; 49 | color: $brand; 50 | background-color: #fff; 51 | -webkit-transition: all 0.25s ease; 52 | transition: all 0.25s ease; 53 | border: 2px solid $brand; 54 | @include border-radius($grid16x); 55 | @include box-shadow($grid2x, $grid4x); 56 | 57 | &.ghost__white { 58 | border: 2px solid #fff; 59 | } 60 | 61 | &:hover { 62 | color: #fff; 63 | font-weight: 900; 64 | background-color: $brand; 65 | } 66 | } 67 | } 68 | 69 | /* ============================== 70 | toast 71 | ============================== */ 72 | .toasted.primary.default { 73 | font-weight: 500; 74 | background: $black78; 75 | padding: auto $grid4x; 76 | @include font-size(12px); 77 | @include box-shadow($grid, $grid2x, $black16); 78 | @include border-radius($grid16x !important); 79 | 80 | @media #{$pablet} { 81 | white-space: nowrap; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /docs/src/style/modules/_color.scss: -------------------------------------------------------------------------------- 1 | /* ============================== 2 | color stack 3 | ============================== */ 4 | $text333: #333; 5 | $text555: #555; 6 | $text777: #777; 7 | $text999: #999; 8 | $textaaa: #aaa; 9 | $textccc: #ccc; 10 | $textddd: #ddd; 11 | $texteee: #eee; 12 | $textf0: #f0f0f0; 13 | $textf4: #f4f4f4; 14 | $textf9: #f9f9f9; 15 | $textfa: #fafafa; 16 | 17 | $black78: rgba(0, 0, 0, 0.78); 18 | $black54: rgba(0, 0, 0, 0.54); 19 | $black38: rgba(0, 0, 0, 0.38); 20 | $black24: rgba(0, 0, 0, 0.24); 21 | $black16: rgba(0, 0, 0, 0.16); 22 | $black08: rgba(0, 0, 0, 0.08); 23 | 24 | $brand: #42b883; 25 | $brand-hover: #42b883; 26 | 27 | $fbIcon: #3b5998; 28 | $igIcon: #e1306c; 29 | $ghIcon: #333; 30 | -------------------------------------------------------------------------------- /docs/src/style/modules/_global.scss: -------------------------------------------------------------------------------- 1 | /* ============================== 2 | mixin default font 3 | ============================== */ 4 | @mixin font-stack-html() { 5 | font-family: "Noto Sans", sans-serif; 6 | -moz-font-family: "Noto Sans", sans-serif; 7 | -webkit-font-family: "Noto Sans", sans-serif; 8 | } 9 | 10 | /* ============================== 11 | text rendering 12 | ============================== */ 13 | @mixin font-settings() { 14 | direction: ltr; 15 | font-feature-settings: "liga"; 16 | -moz-font-feature-settings: "liga"; 17 | -webkit-font-feature-settings: "liga"; 18 | -moz-osx-font-smoothing: grayscale !important; 19 | -webkit-font-smoothing: antialiased !important; 20 | text-rendering: optimizeLegibility !important; 21 | -webkit-text-decoration-skip: ink; 22 | text-decoration-skip: ink; 23 | } 24 | 25 | /* ============================== 26 | default font-size, line-height 27 | ============================== */ 28 | @function calculateRem($size) { 29 | $remSize: $size / $grid4x; 30 | @return $remSize * 1rem; 31 | } 32 | @mixin line-height($size) { 33 | line-height: $size * 1.6; 34 | line-height: calculateRem($size) * 1.6; 35 | } 36 | @mixin font-size($size) { 37 | font-size: $size; 38 | font-size: calculateRem($size); 39 | @include line-height($size); 40 | } 41 | 42 | /* ============================== 43 | normalize css 44 | ============================== */ 45 | html { 46 | outline: none; 47 | color: $text333; 48 | @include font-settings(); 49 | @include font-stack-html(); 50 | @include font-size($grid4x); 51 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 52 | } 53 | 54 | /* ============================== 55 | fonts 56 | ============================== */ 57 | a { 58 | color: $brand; 59 | text-decoration: none; 60 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 61 | 62 | &:hover { 63 | color: $brand-hover; 64 | } 65 | } 66 | 67 | h1 { 68 | font-weight: 900; 69 | @include font-size($grid8x); 70 | } 71 | 72 | h3 { 73 | font-weight: 900; 74 | @include font-size($grid5x); 75 | } 76 | 77 | p, 78 | li, 79 | span { 80 | font-weight: 400; 81 | @include font-size($grid4x); 82 | @include line-height(18px); 83 | 84 | b { 85 | font-weight: 900; 86 | } 87 | } 88 | 89 | ::-moz-selection { 90 | background-color: transparent !important; 91 | } 92 | 93 | ::selection { 94 | background-color: transparent !important; 95 | } 96 | 97 | button { 98 | border: none; 99 | outline: none; 100 | cursor: pointer; 101 | background-color: transparent; 102 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 103 | 104 | &:focus, 105 | &:active { 106 | border: none; 107 | outline: none; 108 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 109 | } 110 | } 111 | 112 | .code { 113 | font-weight: 600; 114 | -webkit-font-family: Courier, monospace; 115 | -moz-font-family: Courier, monospace; 116 | font-family: Courier, monospace; 117 | } 118 | -------------------------------------------------------------------------------- /docs/src/style/modules/_grid.scss: -------------------------------------------------------------------------------- 1 | /* ============================== 2 | 4px grid system 3 | ============================== */ 4 | $grid: 4px; 5 | $grid2x: ($grid * 2); 6 | $grid3x: ($grid * 3); 7 | $grid4x: ($grid * 4); 8 | $grid5x: ($grid * 5); 9 | $grid6x: ($grid * 6); 10 | $grid7x: ($grid * 7); 11 | $grid8x: ($grid * 8); 12 | $grid9x: ($grid * 9); 13 | $grid10x: ($grid * 10); 14 | $grid12x: ($grid * 12); 15 | $grid14x: ($grid * 14); 16 | $grid16x: ($grid * 16); 17 | $grid18x: ($grid * 18); 18 | $grid20x: ($grid * 20); 19 | $grid24x: ($grid * 24); 20 | $grid28x: ($grid * 28); 21 | $grid32x: ($grid * 32); 22 | $grid36x: ($grid * 36); 23 | $grid40x: ($grid * 40); 24 | $grid48x: ($grid * 48); 25 | $grid50x: ($grid * 50); 26 | $grid56x: ($grid * 56); 27 | $grid60x: ($grid * 60); 28 | $grid64x: ($grid * 64); 29 | $grid72x: ($grid * 72); 30 | $grid80x: ($grid * 80); 31 | $grid96x: ($grid * 96); 32 | $grid100x: ($grid * 100); 33 | $grid128x: ($grid * 128); 34 | -------------------------------------------------------------------------------- /docs/src/style/modules/_layout.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | width: 100%; 3 | margin: 0 auto; 4 | 5 | .container { 6 | width: 960px; 7 | margin: 0 auto; 8 | 9 | // @media #{$default} { 10 | // width: calc(100% - #{$grid32x}); 11 | // padding: 0 $grid16x; 12 | // } 13 | 14 | @media #{$basic} { 15 | width: calc(100% - #{$grid24x}); 16 | padding: 0 $grid12x; 17 | } 18 | 19 | @media #{$tablet} { 20 | width: calc(100% - #{$grid16x}); 21 | padding: 0 $grid8x; 22 | 23 | .page__wrapper { 24 | width: 480px; 25 | margin: 0 auto; 26 | } 27 | } 28 | 29 | @media #{$landsc} { 30 | padding: 0 $grid8x; 31 | 32 | .page__wrapper { 33 | width: 360px; 34 | margin: 0 auto; 35 | } 36 | } 37 | 38 | @media #{$pablet} { 39 | width: calc(100% - #{$grid6x}); 40 | padding: 0 $grid3x; 41 | 42 | .page__wrapper { 43 | width: calc(100% - #{$grid6x}); 44 | margin: 0 auto; 45 | } 46 | } 47 | 48 | @media #{$mobile} { 49 | padding: 0 $grid3x; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /docs/src/style/modules/_mqbp.scss: -------------------------------------------------------------------------------- 1 | /* ============================== 2 | media query breakpoints 3 | ============================== */ 4 | $default: "screen and (max-width : 1024px)"; 5 | $basic: "screen and (max-width : 960px )"; 6 | $tablet: "screen and (max-width : 768px )"; 7 | $landsc: "screen and (max-width : 640px )"; 8 | $middle: "screen and (max-width : 560px )"; 9 | $pablet: "screen and (max-width : 420px )"; 10 | $mobile: "screen and (max-width : 360px )"; 11 | $mini: "screen and (max-width : 320px )"; 12 | 13 | /* ============================== 14 | browser specific 15 | ============================== */ 16 | $chrome: "screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)"; 17 | $firefox: "screen and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm)"; 18 | $ie: "screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"; 19 | 20 | // edge 21 | // @supports (-ms-ime-align:auto) 22 | 23 | // safari 24 | // @supports (-webkit-appearance:none) 25 | -------------------------------------------------------------------------------- /docs/src/style/style.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); 3 | 4 | /* ============================== 5 | basic modules 6 | ============================== */ 7 | @import "./modules/grid", "./modules/color", "./modules/mqbp", "./modules/global", "./modules/class", "./modules/layout"; 8 | 9 | /* ============================== 10 | components 11 | ============================== */ 12 | @import "./components/tooltip"; 13 | 14 | /* ============================== 15 | pages specific 16 | ============================== */ 17 | // @import 18 | // './pages/alt'; 19 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var webpack = require("webpack"); 3 | require("es6-promise").polyfill(); 4 | 5 | module.exports = { 6 | entry: "./src/main.js", 7 | output: { 8 | path: path.resolve(__dirname, "./dist"), 9 | publicPath: "/dist/", 10 | filename: "build.js" 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.css$/, 16 | use: ["vue-style-loader", "css-loader"] 17 | }, 18 | { 19 | test: /\.scss$/, 20 | use: ["vue-style-loader", "css-loader", "sass-loader"] 21 | }, 22 | { 23 | test: /\.sass$/, 24 | use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"] 25 | }, 26 | { 27 | test: /\.vue$/, 28 | loader: "vue-loader", 29 | options: { 30 | loaders: { 31 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 32 | // the "scss" and "sass" values for the lang attribute to the right configs here. 33 | // other preprocessors should work out of the box, no loader config like this necessary. 34 | scss: [ 35 | "vue-style-loader", 36 | "css-loader", 37 | // 'sass-loader', 38 | { 39 | loader: "sass-loader", 40 | options: { 41 | data: ` 42 | @import "./src/style/style.scss"; 43 | ` 44 | } 45 | } 46 | ], 47 | sass: [ 48 | "vue-style-loader", 49 | "css-loader", 50 | "sass-loader?indentedSyntax" 51 | ] 52 | } 53 | // other vue-loader options go here 54 | } 55 | }, 56 | { 57 | test: /\.js$/, 58 | loader: "babel-loader", 59 | exclude: /node_modules/ 60 | }, 61 | { 62 | test: /\.md$/, 63 | loader: "vue-markdown-loader" 64 | }, 65 | { 66 | test: /\.(png|jpg|gif|svg)$/, 67 | loader: "file-loader", 68 | options: { 69 | name: "[name].[ext]?[hash]" 70 | } 71 | } 72 | ] 73 | }, 74 | resolve: { 75 | alias: { 76 | vue$: "vue/dist/vue.esm.js" 77 | }, 78 | extensions: ["*", ".js", ".vue", ".json"] 79 | }, 80 | devServer: { 81 | historyApiFallback: true, 82 | noInfo: true, 83 | overlay: true, 84 | port: 4020 85 | }, 86 | performance: { 87 | hints: false 88 | }, 89 | devtool: "#eval-source-map" 90 | }; 91 | 92 | if (process.env.NODE_ENV === "production") { 93 | module.exports.devtool = "#source-map"; 94 | // http://vue-loader.vuejs.org/en/workflow/production.html 95 | module.exports.plugins = (module.exports.plugins || []).concat([ 96 | new webpack.DefinePlugin({ 97 | "process.env": { 98 | NODE_ENV: '"production"' 99 | } 100 | }), 101 | new webpack.optimize.UglifyJsPlugin({ 102 | sourceMap: true, 103 | compress: { 104 | warnings: false 105 | } 106 | }), 107 | new webpack.LoaderOptionsPlugin({ 108 | minimize: true 109 | }) 110 | ]); 111 | } 112 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-scroll-progress", 3 | "description": "Simple Vue.js plugin for page scroll progress bar", 4 | "version": "1.1.5", 5 | "author": "Hyouk Seo(Spemer) ", 6 | "license": "MIT", 7 | "private": false, 8 | "main": "src/vue-scroll-progress.js", 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/spemer/vue-scroll-progress.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/spemer/vue-scroll-progress/issues" 15 | }, 16 | "scripts": { 17 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 18 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 19 | }, 20 | "dependencies": { 21 | "vue": "^2.5.11" 22 | }, 23 | "browserslist": [ 24 | "> 1%", 25 | "last 2 versions", 26 | "not ie <= 8" 27 | ], 28 | "devDependencies": { 29 | "babel-core": "^6.26.0", 30 | "babel-loader": "^7.1.2", 31 | "babel-preset-env": "^1.6.0", 32 | "babel-preset-stage-3": "^6.24.1", 33 | "cross-env": "^5.0.5", 34 | "css-loader": "^0.28.7", 35 | "file-loader": "^1.1.4", 36 | "vue-loader": "^13.0.5", 37 | "vue-template-compiler": "^2.4.4", 38 | "webpack": "^3.6.0", 39 | "webpack-dev-server": "^3.1.11" 40 | }, 41 | "keywords": [ 42 | "VueJs", 43 | "Vue", 44 | "Js", 45 | "JavaScript", 46 | "Progress", 47 | "Plugin", 48 | "Library", 49 | "Material", 50 | "Design", 51 | "Button", 52 | "CSS", 53 | "Spemer", 54 | "Hyouk Seo", 55 | "NPM", 56 | "Yarn" 57 | ], 58 | "homepage": "https://github.com/spemer/vue-scroll-progress#readme" 59 | } 60 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /src/vue-scroll-progress.js: -------------------------------------------------------------------------------- 1 | var VueScrollProgress = { 2 | install: function install(Vue, options) { 3 | Vue.mixin({ 4 | mounted: function mounted() { 5 | var progressContainerEl, 6 | progressEl, 7 | windowScrollPixels, 8 | windowScrollPercents, 9 | height; 10 | 11 | progressContainerEl = document.createElement("div"); 12 | progressContainerEl.id = "progress-container-el"; 13 | progressContainerEl.style.position = "fixed"; 14 | progressContainerEl.style.width = "100%"; 15 | progressContainerEl.style.height = "4px"; 16 | progressContainerEl.style.backgroundColor = "transparent"; 17 | progressContainerEl.style.left = 0; 18 | progressContainerEl.style.right = 0; 19 | progressContainerEl.style.top = 0; 20 | progressContainerEl.style.zIndex = 99999; 21 | 22 | progressEl = document.createElement("div"); 23 | progressEl.id = "progress-el"; 24 | progressEl.style.width = "0px"; 25 | progressEl.style.height = "4px"; 26 | progressEl.style.backgroundColor = "#42b883"; 27 | 28 | windowScrollPixels = 0; 29 | windowScrollPercents = 0; 30 | 31 | function getHeight() { 32 | height = 33 | document.documentElement.scrollHeight - 34 | document.documentElement.clientHeight; 35 | } 36 | 37 | const debounce = (func, wait, immediate) => { 38 | var timeout; 39 | return () => { 40 | const context = this, 41 | args = arguments; 42 | const later = function() { 43 | timeout = null; 44 | if (!immediate) func.apply(context, args); 45 | }; 46 | const callNow = immediate && !timeout; 47 | clearTimeout(timeout); 48 | timeout = setTimeout(later, wait); 49 | if (callNow) func.apply(context, args); 50 | }; 51 | }; 52 | 53 | var h = document.body; 54 | h.addEventListener( 55 | "resize", 56 | debounce( 57 | () => { 58 | getHeight(); 59 | }, 60 | 200, 61 | false 62 | ), 63 | false 64 | ); 65 | 66 | getHeight(); 67 | 68 | window.addEventListener("scroll", () => { 69 | windowScrollPixels = 70 | document.body.scrollTop || document.documentElement.scrollTop; 71 | windowScrollPercents = (windowScrollPixels / height) * 100; 72 | progressEl.style.width = windowScrollPercents + "%"; 73 | }); 74 | 75 | if (!document.getElementById("progress-container-el")) { 76 | progressContainerEl.appendChild(progressEl); 77 | document.body.appendChild(progressContainerEl); 78 | } 79 | } 80 | }); 81 | } 82 | }; 83 | 84 | if (typeof window !== "undefined" && window.Vue) 85 | window.VueScrollProgress = VueScrollProgress; 86 | 87 | export default VueScrollProgress; 88 | --------------------------------------------------------------------------------