├── .editorconfig ├── .eslintrc ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── appveyor.yml ├── assets └── demo.gif ├── bower.json ├── package-lock.json ├── package.json ├── src └── index.js └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | [*.js] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | "no-console": "off", 5 | "no-underscore-dangle": "off", 6 | "comma-dangle": "off", 7 | "import/no-extraneous-dependencies": "off", 8 | "no-param-reassign": "off", 9 | "class-methods-use-this": "off", 10 | "no-bitwise": "off", 11 | "no-restricted-syntax": "off" 12 | }, 13 | "env": { 14 | "browser": true, 15 | "node": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute? 2 | 3 | Please go through [project issues](https://github.com/manrajgrover/microbar/issues) and [pull requests](https://github.com/manrajgrover/microbar/pulls) to check for duplicates before picking up an issue. 4 | 5 | ## Steps to contribute 6 | 7 | * Fork the project 8 | * Clone to your machine based on your forked project 9 | * Create a new branch with an intuitive name. Take a look in concept of [feature branch](https://martinfowler.com/bliki/FeatureBranch.html) 10 | * Code your change / fix / new feature 11 | * Run linter 12 | * When the linter passes, you are free to commit and push 13 | * Open a Pull Request with a description and the issue reference 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | ## Description 13 | 14 | 15 | ### Versions 16 | 17 | - NodeJS version (if applicable): 18 | - Microbar version: 19 | 20 | ### Error 21 | 22 | 23 | ### Expected behaviour 24 | 25 | 26 | ## Steps to recreate 27 | 28 | 29 | ## People to notify 30 | 31 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | ## Description of new feature, or changes 10 | 11 | 12 | ## Checklist 13 | 14 | - [ ] Your branch is up-to-date with the base branch 15 | - [ ] You've included at least one test if this is a new feature 16 | - [ ] All tests are passing 17 | 18 | ## Related Issues and Discussions 19 | 20 | 21 | 22 | ## People to notify 23 | 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | debug/ 3 | dist/ 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 7.4 4 | install: 5 | - npm install 6 | script: 7 | - npm run lint -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Manraj Singh 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 | # microbar 2 | 3 | [![Build Status](https://travis-ci.org/manrajgrover/microbar.svg?branch=master)](https://travis-ci.org/manrajgrover/microbar) [![Build status](https://ci.appveyor.com/api/projects/status/jr9rgx05r0y7fv70/branch/master?svg=true)](https://ci.appveyor.com/project/manrajgrover/microbar/branch/master) 4 | [![npm version](https://badge.fury.io/js/microbar.svg)](https://www.npmjs.com/package/microbar) [![npm](https://img.shields.io/npm/dt/microbar.svg?maxAge=2592000?style=flat-square)](https://www.npmjs.com/package/microbar) ![awesome](https://img.shields.io/badge/awesome-yes-green.svg) 5 | 6 | > 🎉 A zero dependency, 1.2kb g-zipped, lightweight JavaScript Library for slim progress bars for Ajax'y applications. Inspired by YouTube and Github. 7 | 8 | ![Gif](https://raw.githubusercontent.com/manrajgrover/microbar/master/assets/demo.gif) 9 | 10 | ## Installation 11 | 12 | Download and extract [latest release](https://github.com/manrajgrover/microbar/releases) or install using package manager: 13 | 14 | [npm](https://www.npmjs.com/package/microbar) 15 | 16 | ```sh 17 | $ npm install microbar 18 | ``` 19 | [bower](http://bower.io/) 20 | 21 | ```sh 22 | $ bower install microbar 23 | ``` 24 | 25 | Or use `unpkg`: 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | Or use `jsdeliver`: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ## Usage 38 | 39 | ### How to Load? 40 | 41 | Link `microbar.js` in your HTML 42 | 43 | ```html 44 | 45 | ``` 46 | 47 | or require it: 48 | 49 | ```js 50 | const microbar = require('path/to/microbar'); 51 | ``` 52 | 53 | ### Generate microbar 54 | 55 | ```js 56 | const microbar = new microbar( settings ); 57 | ``` 58 | 59 | #### settings 60 | 61 | `settings` is a JSON Object in which you can specify various options. 62 | 63 | * `percentage` ``: (Optional) Initial starting position of **progress** bar ( between `0` and `100` ). By default, it will be 0. 64 | * `color` ``: (Optional) Color of your **progress** bar. By default, it will be `black`. 65 | * `speed` ``: (Optional) Speed of your **progress** bar ( between `1` and `10` ). By default, it will be `10`. 66 | * `target` ``: (Optional) ID of your targetted DOM element. By default, it will be fixed to `top` of document. 67 | 68 | ### Methods available 69 | 70 | * `moveTo( percentage )`: Set percentage width of `progress` bar. 71 | * `getColor( )`: Get color of that `progress` bar. 72 | * `setColor( color )`: Set color of `progress` bar. 73 | * `getSpeed( )`: Get speed of `progress` bar. 74 | * `setSpeed( speed )`: Set speed of `progress` bar. 75 | 76 | If you would like to add more methods/customizations, please open an [issue](https://github.com/manrajgrover/microbar/issues). 77 | 78 | ### Example 79 | 80 | ```js 81 | 82 | const settings = { 83 | percentage: 50, 84 | color: 'red', 85 | speed: 2, 86 | target: 'lolCat' 87 | }; 88 | 89 | const bar = new microbar(settings); 90 | 91 | // Move bar forward 92 | bar.moveTo(80); 93 | 94 | // Get color of progress bar 95 | bar.getColor(); 96 | 97 | // Set color of progress bar 98 | bar.setColor('#141414'); 99 | 100 | // Get speed of progress bar 101 | bar.getSpeed(); 102 | 103 | // Set speed of progress bar 104 | bar.setSpeed(3); 105 | ``` 106 | 107 | ## Development 108 | 109 | Run: 110 | 111 | ```sh 112 | $ git clone https://github.com/manrajgrover/microbar.git 113 | $ cd microbar 114 | $ npm install 115 | ``` 116 | 117 | This will setup the library dependencies for you. 118 | 119 | To lint your code, run 120 | 121 | ```sh 122 | $ npm run lint 123 | ``` 124 | 125 | To build for development purpose, run 126 | 127 | ```sh 128 | $ npm run dev 129 | ``` 130 | 131 | To build for production purpose, run 132 | 133 | ```sh 134 | $ npm run prod 135 | ``` 136 | 137 | ## License 138 | 139 | [MIT](https://github.com/manrajgrover/microbar/blob/master/LICENSE) © [manrajgrover](https://github.com/manrajgrover) 140 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | environment: 2 | nodejs_version: "7.4" 3 | 4 | install: 5 | - ps: Install-Product node $env:nodejs_version 6 | - npm install 7 | 8 | test_script: 9 | - node --version 10 | - npm --version 11 | - npm run lint 12 | 13 | build: off 14 | -------------------------------------------------------------------------------- /assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manrajgrover/microbar/0e586ff3f9dafbf2a474ff5de4502d6e0cd0e544/assets/demo.gif -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microbar", 3 | "description": "A zero dependency, 1.2kb g-zipped, lightweight JavaScript Library for slim progress bars for Ajax'y applications. Inspired by YouTube and Github.", 4 | "version": "0.1.7", 5 | "main": "dist/microbar.js", 6 | "authors": [ 7 | "Manraj Singh Grover (http://manrajsingh.in/)" 8 | ], 9 | "bugs": { 10 | "url": "https://github.com/manrajgrover/microbar/issues" 11 | }, 12 | "license": "MIT", 13 | "keywords": [ 14 | "microbar", 15 | "progress", 16 | "bar", 17 | "manraj", 18 | "grover", 19 | "singh", 20 | "micro", 21 | "bar", 22 | "loader", 23 | "ajax" 24 | ], 25 | "homepage": "https://github.com/manrajgrover/microbar" 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microbar", 3 | "version": "0.1.7", 4 | "description": "A zero dependency, 1.2kb g-zipped, lightweight JavaScript Library for slim progress bars for Ajax'y applications. Inspired by YouTube and Github.", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "lint": "eslint ./src/", 8 | "dev": "webpack", 9 | "prod": "webpack -p" 10 | }, 11 | "files": [ 12 | "dist" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/manrajgrover/microbar" 17 | }, 18 | "keywords": [ 19 | "microbar", 20 | "progress", 21 | "bar", 22 | "micro", 23 | "bar", 24 | "loader", 25 | "ajax" 26 | ], 27 | "author": "Manraj Singh Grover (http://manrajsingh.in/)", 28 | "homepage": "https://github.com/manrajgrover/microbar#readme", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/manrajgrover/microbar/issues" 32 | }, 33 | "devDependencies": { 34 | "babel-core": "^6.26.0", 35 | "babel-loader": "^7.1.2", 36 | "babel-preset-es2015": "^6.24.1", 37 | "eslint": "^3.17.1", 38 | "eslint-config-airbnb": "^14.1.0", 39 | "eslint-plugin-import": "^2.2.0", 40 | "eslint-plugin-jsx-a11y": "^4.0.0", 41 | "eslint-plugin-react": "^6.10.0", 42 | "webpack": "^3.11.0" 43 | }, 44 | "dependencies": {} 45 | } 46 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | class microbar { 2 | constructor(args = {}) { 3 | if (Object.prototype.hasOwnProperty.call(args, 'speed') && 4 | (typeof args.speed !== 'number' || args.speed > 10 || args.speed < 1)) { 5 | throw new Error('Speed should be an integer between 1 and 10.'); 6 | } 7 | if (Object.prototype.hasOwnProperty.call(args, 'percentage') && 8 | (typeof args.percentage !== 'number' || args.percentage > 100 || args.percentage < 0)) { 9 | throw new Error('Percentage should be an integer between 0 and 100.'); 10 | } 11 | 12 | this._percentage = args.percentage || 0; 13 | this._color = args.color || '#000000'; 14 | this._speed = args.speed || 10; 15 | 16 | this._divs = this._initialize(); 17 | 18 | this._bar = this._divs.bar; 19 | this._progress = this._divs.progress; 20 | this._shadow = this._divs.shadow; 21 | 22 | if (args.target) { 23 | this._bar.style.position = 'relative'; 24 | 25 | document.getElementById(args.target).insertBefore( 26 | this._bar, 27 | document.getElementById(args.target).firstChild 28 | ); 29 | } else { 30 | this._bar.style.position = 'fixed'; 31 | 32 | document.getElementsByTagName('body')[0].appendChild(this._bar); 33 | } 34 | } 35 | 36 | _getEquivalentTime(speed) { 37 | const time = (0.5 + Math.round(1 / speed)); 38 | return `${time}s`; 39 | } 40 | 41 | _isColor(color) { 42 | const el = document.createElement('div'); 43 | el.style.backgroundColor = color; 44 | if (el.style.backgroundColor.length === 0) { 45 | return false; 46 | } 47 | return true; 48 | } 49 | 50 | _transitionEndEventName() { 51 | const el = document.createElement('div'); 52 | const transitions = { 53 | transition: 'transitionend', 54 | OTransition: 'otransitionend', 55 | MozTransition: 'transitionend', 56 | WebkitTransition: 'webkitTransitionEnd' 57 | }; 58 | 59 | for (const transition of Object.keys(transitions)) { 60 | if (Object.prototype.hasOwnProperty.call(transitions, transition) && 61 | el.style[transition] !== undefined) { 62 | return transitions[transition]; 63 | } 64 | } 65 | return null; 66 | } 67 | 68 | _addStyleSheet() { 69 | if (document.getElementById('microbarstyles') !== null) { 70 | return; 71 | } 72 | 73 | const style = document.createElement('style'); 74 | style.type = 'text/css'; 75 | style.id = 'microbarstyles'; 76 | 77 | if (style.styleSheet) { 78 | style.styleSheet.cssText = microbar.css; 79 | } else { 80 | style.appendChild(document.createTextNode(microbar.css)); 81 | } 82 | 83 | document.head.insertBefore(style, null); 84 | } 85 | 86 | _initialize() { 87 | this._addStyleSheet(); 88 | if (!this._isColor(this._color)) { 89 | throw new Error('Please check the color entered'); 90 | } 91 | 92 | const bar = document.createElement('div'); 93 | const progress = document.createElement('div'); 94 | const shadow = document.createElement('div'); 95 | 96 | const time = this._getEquivalentTime(this._speed); 97 | 98 | bar.className = 'microbar'; 99 | 100 | progress.classList.add('mprogress'); 101 | progress.style.backgroundColor = this._color; 102 | progress.style.width = `${this._percentage}%`; 103 | progress.style.transition = `width ${time} ease, opacity 0.3s ease`; 104 | 105 | shadow.classList.add('mshadow'); 106 | shadow.style.boxShadow = `0 0 10px ${this._color}`; 107 | 108 | if (this._percentage === 0) { 109 | progress.style.opacity = 0; 110 | } 111 | 112 | progress.appendChild(shadow); 113 | bar.appendChild(progress); 114 | 115 | const transitionEnd = this._transitionEndEventName(); 116 | 117 | if (transitionEnd === null) { 118 | throw new Error('Your browser is not supported.'); 119 | } 120 | 121 | progress.addEventListener(transitionEnd, this._transitionEnd); 122 | 123 | return { 124 | bar, 125 | progress, 126 | shadow 127 | }; 128 | } 129 | 130 | _transitionEnd() { 131 | const width = this.style.width; 132 | if (width === '100%') { 133 | this.style.opacity = 0; 134 | } 135 | } 136 | 137 | moveTo(point) { 138 | if (typeof point !== 'number' || point > 100 || point < 0) { 139 | throw new Error('Percentage should be an integer between 0 and 100.'); 140 | } 141 | 142 | this._progress.style.opacity = 1; 143 | this._progress.style.width = `${point}%`; 144 | } 145 | 146 | get color() { 147 | return this._color; 148 | } 149 | 150 | set color(color) { 151 | if (!this._isColor(color)) { 152 | throw new Error('Please check the color entered'); 153 | } 154 | this._color = color; 155 | 156 | this._progress.style.backgroundColor = color; 157 | this._shadow.style.boxShadow = `0 0 10px ${color}`; 158 | } 159 | 160 | get speed() { 161 | return this._speed; 162 | } 163 | 164 | set speed(speed) { 165 | if (speed > 10 || speed < 1) { 166 | throw new RangeError('Speed should be an integer between 1 and 10.'); 167 | } 168 | 169 | this._speed = speed; 170 | 171 | const time = this._getEquivalentTime(speed); 172 | this._progress.style.transition = `width ${time}`; 173 | } 174 | } 175 | 176 | microbar.css = '.microbar{width: 100%;height: 2px;z-index: 9999;top:0;background-color: transparent;}' 177 | + '.microbar .mprogress{width: 0;height: 100%;background-color: #000000;}' 178 | + '.microbar .mprogress .mshadow{width: 1%;position: relative;height: 100%;float: right;}'; 179 | 180 | module.exports = microbar; 181 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | microbar: './src/index.js', 7 | 'microbar.min': './src/index.js' 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, 'dist'), 11 | filename: '[name].js', 12 | library: 'alds', 13 | libraryTarget: 'umd' 14 | }, 15 | module: { 16 | rules: [{ 17 | test: [/\.es6$/, /\.js$/], 18 | exclude: /(node_modules|bower_components)/, 19 | use: { 20 | loader: 'babel-loader', 21 | options: { 22 | presets: 'es2015' 23 | } 24 | } 25 | }] 26 | }, 27 | plugins: [ 28 | new webpack.optimize.UglifyJsPlugin({ 29 | include: /\.min\.js$/, 30 | minimize: true 31 | }) 32 | ], 33 | devServer: { 34 | contentBase: path.resolve(__dirname, 'dist'), 35 | compress: true, 36 | port: 9000 37 | } 38 | }; 39 | --------------------------------------------------------------------------------