├── ProBar.js
├── index.html
└── readme.md


/ProBar.js:
--------------------------------------------------------------------------------
  1 | (function (root) {
  2 | 	"use strict";
  3 | 
  4 | 	////////////////////
  5 | 	// all functions. //
  6 | 	////////////////////
  7 | 	// first class instantiation.
  8 | 	function proBar(options){
  9 | 
 10 | 		this.height = 5; // 5px by default.
 11 | 		this.colorBar = "#2a2a2a";
 12 | 		this.wrapper_color = "#ecf0f1";
 13 | 		this.speedAnimation = 0.3; // in seconds
 14 | 		this.wrapper = "body"; // default value of appending.
 15 | 		this.finishAnimation = true;
 16 | 		this.classNameBar = "progressBar"; // default.
 17 | 		this.wrapperId = "wrapper-progressBar"; // default.
 18 | 		this.rounded = { // by default All is on Zero.
 19 | 			topLeft : 0,
 20 | 			topRight : 0,
 21 | 			bottomLeft : 0,
 22 | 			bottomRight : 0
 23 | 		};
 24 | 		this.roundedInternal = { // by default All is on Zero.
 25 | 			topLeft : 0,
 26 | 			topRight : 0,
 27 | 			bottomLeft : 0,
 28 | 			bottomRight : 0
 29 | 		}
 30 | 
 31 | 		this.options = options || {};
 32 | 
 33 | 
 34 | 		if(this.options.color) { this.colorBar = this.options.color }
 35 | 		if(this.options.height) { 
 36 | 			this.height = this.options.height; 
 37 | 		}
 38 | 		if(this.options.bgColor) { this.wrapper_color = this.options.bgColor }
 39 | 		if(this.options.speed) { this.speedAnimation = this.options.speed }
 40 | 		if(this.options.wrapper) { this.wrapper = this.options.wrapper }
 41 | 		if(this.options.finishAnimation == false) { this.finishAnimation = this.options.finishAnimation;}
 42 | 		if(this.options.classNameBar) { this.classNameBar = this.options.classNameBar }
 43 | 		if(this.options.wrapperId) { this.wrapperId = this.options.wrapperId }
 44 | 		if(this.options.rounded) { 
 45 | 			this.rounded.topLeft = this.options.rounded.topLeft || 0;
 46 | 			this.rounded.topRight = this.options.rounded.topRight || 0;
 47 | 			this.rounded.bottomLeft = this.options.rounded.bottomLeft || 0;
 48 | 			this.rounded.bottomRight = this.options.rounded.bottomRight || 0;
 49 | 		}
 50 | 		if(this.options.roundedInternal) { 
 51 | 			this.roundedInternal.topLeft = this.options.roundedInternal.topLeft || 0;
 52 | 			this.roundedInternal.topRight = this.options.roundedInternal.topRight || 0;
 53 | 			this.roundedInternal.bottomLeft = this.options.roundedInternal.bottomLeft || 0;
 54 | 			this.roundedInternal.bottomRight = this.options.roundedInternal.bottomRight || 0;
 55 | 		}
 56 | 
 57 | 		// create Bar.
 58 | 	    createBar(
 59 | 	    		this.wrapper,
 60 | 	    		this.classNameBar,
 61 | 	    		this.height,
 62 | 	    		this.colorBar,
 63 | 	    		this.wrapperId,
 64 | 	    		this.wrapper_color,
 65 | 	    		this.rounded,
 66 | 	    		this.roundedInternal
 67 | 	    		);
 68 | 
 69 | 		// move the bar
 70 | 		this.move = (percent) => {
 71 | 
 72 | 			$("."+this.classNameBar).css({
 73 | 				width: percent+"%",
 74 | 				transition : "width "+this.speedAnimation+"s"
 75 | 			});
 76 | 
 77 | 			// if animation is true, reInitializate Probar.
 78 | 			if(this.finishAnimation == true) {
 79 | 				$("#"+this.wrapperId).css({
 80 | 					"height": this.height+"px"
 81 | 				});
 82 | 			}
 83 | 
 84 | 			// verify if is 100%
 85 | 			setTimeout(() => {
 86 | 				if(percent == 100 && this.finishAnimation == true) {
 87 | 					console.log("je vais faire l'animation bro");
 88 | 					$("#"+this.wrapperId).css({
 89 | 						"height": "0px",
 90 | 						"transition" : "all 0.3s"
 91 | 					});
 92 | 					// reset bar to zero.
 93 | 					$("."+this.classNameBar).css({
 94 | 						width: "0%"
 95 | 					});
 96 | 				}
 97 | 			},this.speedAnimation * 1000);
 98 | 		}
 99 | 		var setSpeed = (speed) => {
100 | 			this.speedAnimation = speed;
101 | 		}
102 | 		var setColor = (color) => {
103 | 			this.colorBar = color;
104 | 			$("."+this.classNameBar).css({ 
105 | 				"background-color" : this.colorBar
106 | 			});
107 | 		}
108 | 		var setWrapperColor = (color) => {
109 | 			this.wrapper_color = color;
110 | 			$("#"+this.wrapperId).css({ 
111 | 				"background-color" : this.wrapper_color
112 | 			});
113 | 		}
114 | 		var setFinishAnimation = (boolean) => {
115 | 			this.finishAnimation = boolean;
116 | 		}
117 | 		var setRounded = (topLeft = 0,topRight = 0,bottomLeft = 0,bottomRight = 0) => {
118 | 
119 | 			this.rounded.topLeft = topLeft || 0;
120 | 			this.rounded.topRight = topRight || 0;
121 | 			this.rounded.bottomLeft = bottomLeft || 0;
122 | 			this.rounded.bottomRight = bottomRight || 0;
123 | 
124 | 			$("#"+this.wrapperId).css({ 
125 | 				"border-top-left-radius" : this.rounded.topLeft+'px',
126 | 				"border-top-right-radius" : this.rounded.topRight+'px',
127 | 				"border-bottom-left-radius" : this.rounded.bottomLeft+'px',
128 | 				"border-bottom-right-radius" : this.rounded.bottomRight+'px'
129 | 			});
130 | 		}
131 | 		var setRoundedInternal = (topLeft = 0,topRight = 0,bottomLeft = 0,bottomRight = 0) => {
132 | 
133 | 			this.roundedInternal.topLeft = topLeft || 0;
134 | 			this.roundedInternal.topRight = topRight || 0;
135 | 			this.roundedInternal.bottomLeft = bottomLeft || 0;
136 | 			this.roundedInternal.bottomRight = bottomRight || 0;
137 | 
138 | 			$("."+this.classNameBar).css({ 
139 | 				"border-top-left-radius" : this.roundedInternal.topLeft+'px',
140 | 				"border-top-right-radius" : this.roundedInternal.topRight+'px',
141 | 				"border-bottom-left-radius" : this.roundedInternal.bottomLeft+'px',
142 | 				"border-bottom-right-radius" : this.roundedInternal.bottomRight+'px'
143 | 			});
144 | 		}
145 | 		var setHeight = (height = 5) => {
146 | 			this.height = height;
147 | 			$("#"+this.wrapperId).css({ 
148 | 				"height" : this.height+'px'
149 | 			});
150 | 			$("."+this.classNameBar).css({ 
151 | 				"height" : this.height+'px'
152 | 			});
153 | 		}
154 | 		
155 | 		let ProBar = {
156 |           setSpeed,
157 |           setHeight,
158 |           setColor,
159 |           setWrapperColor,
160 |           setFinishAnimation,
161 |           setRounded,
162 |           setRoundedInternal,
163 |           goto: (percent,time = null) => {
164 |           	if(time != null) {setSpeed(time)}
165 |           	this.move(percent);
166 |           }
167 |         };
168 | 
169 | 		return ProBar;
170 | 	}	
171 | 
172 | 
173 | 	var createBar = ( element,classNameBar,height,colorBar,wrapperId,wrapper_color,rounded,roundedInternal ) => {
174 | 		console.log("la hauteur est de "+height);
175 | 		var Css = `
176 | 			.${classNameBar} {
177 | 				width : 0px;
178 | 				height : ${height}px;
179 | 				background-color: ${colorBar};
180 |     			border-radius : ${roundedInternal.topLeft}px ${roundedInternal.topRight}px ${roundedInternal.bottomLeft}px ${roundedInternal.bottomRight}px;
181 | 			}
182 | 			#${wrapperId} {
183 | 				width : 100%;
184 | 				height : ${height}px;
185 | 				background-color : ${wrapper_color};
186 |     			overflow: hidden;
187 |     			border-radius : ${rounded.topLeft}px ${rounded.topRight}px ${rounded.bottomLeft}px ${rounded.bottomRight}px;
188 | 			}
189 | 		`;
190 | 
191 | 		var htmlBar = `<div id="${wrapperId}"><div class="${classNameBar}"></div></div>`;
192 | 		$(element).prepend(htmlBar);
193 | 		$("head").append(`
194 | 			<style>
195 | 				${Css}
196 | 			</style>
197 | 			`);
198 | 	}
199 | 	
200 | 	if (window.jQuery) {  
201 |     	console.log("JQuery is installed !");
202 | 	    root.ProBar = proBar;
203 |     } else {
204 |         // jQuery is not loaded
205 |         console.warn("No Jquery - add it as CDN");
206 |         return false;
207 |     }
208 | }(this));


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5 | 	<title>ProBar JS- A Custom ProgressBar for your website.</title>
  6 | 	<!-- bootstrap css -->
  7 | 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  8 | 
  9 | 	<link href="https://fonts.googleapis.com/css?family=Manjari:100,700&display=swap" rel="stylesheet">
 10 | 
 11 | 	<style type="text/css">
 12 | 		* {
 13 | 			font-family: 'Manjari', sans-serif;
 14 | 		}
 15 | 		h1 {
 16 | 			font-weight: bold;font-size: 50px;
 17 | 		}
 18 | 		.wrapper {
 19 | 			text-align: center;
 20 | 			margin-top: 35px;
 21 | 		}
 22 | 		.firstSection {
 23 | 			border: 2px solid!important;
 24 | 			font-weight: 700!important;
 25 | 			padding: 10px 25px!important;
 26 | 		}
 27 | 		.secondSection {
 28 | 			display: inline-block;
 29 | 			border: 2px solid!important;
 30 | 			font-weight: 700!important;
 31 | 			padding: 10px 25px!important;
 32 | 		}
 33 | 		.title {
 34 | 			margin-top: 35px;
 35 | 			font-weight: 700;
 36 | 		}
 37 | 		a {
 38 | 			color : #2c3e50;
 39 | 		}
 40 | 		#wrapper-progressBar {
 41 | 			position: fixed;
 42 | 			z-index: 5;
 43 | 		}
 44 | 	</style>
 45 | 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">
 46 | 
 47 | 
 48 | 	<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
 49 | 
 50 | 	<style type="text/css">
 51 | 		.hljs {
 52 | 			border-radius: 8px;
 53 | 			padding-left: 25px;
 54 | 		}
 55 | 	</style>
 56 | </head>
 57 | <body>
 58 | 	
 59 | <div class="container">
 60 | 	<div class="row">
 61 | 		<div class="col-lg-12 wrapper">
 62 | 			<h1>Probar</h1>
 63 | 		</div>
 64 | 		<div class="col-lg-12 wrapper">
 65 | 			<h5>A progress bar with multiple options.</h5>
 66 | 			<p>for all the people who do not have the time.. 😜</p>
 67 | 		</div>
 68 | 		<div class="col-lg-12 wrapper">
 69 | 			<div class="row">
 70 | 				<div class="col-lg-4">
 71 | 					<button type="button" class="btn btn-outline-dark firstSection" onclick='javascript:probar.goto(50);'>
 72 | 						probar.goto(50)
 73 | 					</button>
 74 | 				</div>
 75 | 				<div class="col-lg-4">
 76 | 					<button type="button" class="btn btn-outline-dark firstSection" onclick='javascript:probar.goto(75);'>
 77 | 						probar.goto(75)
 78 | 					</button>
 79 | 				</div>
 80 | 				<div class="col-lg-4">
 81 | 					<button type="button" class="btn btn-outline-dark firstSection" onclick='javascript:probar.goto(100);'>
 82 | 						probar.goto(100)
 83 | 					</button>
 84 | 				</div>
 85 | 			</div>
 86 | 		</div>
 87 | 		<div class="col-lg-12 wrapper">
 88 | 			<div class="row">
 89 | 				<div class="offset-lg-2 col-lg-8">
 90 | 					<h4 class="title">
 91 | 						Customize your Probar
 92 | 					</h4>
 93 | 				</div>
 94 | 				<div class="offset-lg-2 col-lg-8" style="text-align: left;margin-top: 35px;">
 95 | 					<h6>Configuration with time ( in seconds ) : </h6>
 96 | 				</div>
 97 | 				<div class="offset-lg-2 col-lg-8" style="padding: 15px 0px 35px 0px;">
 98 | 					<div class="wrapperTimer"></div>
 99 | 				</div>
100 | 			</div>
101 | 			<div class="row" >
102 | 				<div class="offset-lg-2 col-lg-2">
103 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="timebar.goto(30,1)">
104 | 						.goto(30,1)
105 | 					</button>
106 | 				</div>
107 | 				<div class="col-lg-2">
108 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="timebar.goto(75,2)">
109 | 						.goto(75,2)
110 | 					</button>
111 | 				</div>
112 | 				<div class="col-lg-2">
113 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="timebar.goto(100,3)">
114 | 						.goto(100,3)
115 | 					</button>
116 | 				</div>
117 | 				<div class="col-lg-2">
118 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="timebar.goto(0,10)">
119 | 						.goto(0,10)
120 | 					</button>
121 | 				</div>
122 | 			</div>
123 | 			
124 | 
125 | 			<!-- second -->
126 | 			<div class="row" style="margin-top: 80px;">
127 | 				<div class="offset-lg-2 col-lg-8" style="text-align: left;">
128 | 					<h6>Configuration colors : </h6>
129 | 				</div>
130 | 				<div class="offset-lg-2 col-lg-8" style="padding: 15px 0px 35px 0px;">
131 | 					<div class="wrapperSetBar"></div>
132 | 				</div>
133 | 			</div>
134 | 			<div class="row" style="margin-top: 25px;margin-bottom: 50px;">
135 | 				<div class="offset-lg-2 col-lg-3">
136 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbar.setColor('#2c3e50')">
137 | 						.setColor("#2c3e50")
138 | 					</button>
139 | 				</div>
140 | 				<div class="col-lg-3">
141 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbar.setWrapperColor('#7f8c8d')">
142 | 						.setWrapperColor("#7f8c8d")
143 | 					</button>
144 | 				</div>
145 | 				<div class="col-lg-2">
146 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbar.setColor('#f1c40f');setbar.setWrapperColor('#efefef');">
147 | 						reset
148 | 					</button>
149 | 				</div>
150 | 			</div>
151 | 
152 | 			<div class="row" style="margin-top: 80px;">
153 | 				<div class="offset-lg-2 col-lg-8" style="text-align: left;">
154 | 					<h6>Configure a Height of Probar : </h6>
155 | 				</div>
156 | 				<div class="offset-lg-2 col-lg-8" style="padding: 15px 0px 35px 0px;">
157 | 					<div class="wrapperSetBarHeight"></div>
158 | 				</div>
159 | 			</div>
160 | 			<div class="row" style="margin-top: 25px;margin-bottom: 50px;">
161 | 				<div class="offset-lg-2 col-lg-2">
162 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarHeight.setHeight(5)">
163 | 						.setHeight(5)
164 | 					</button>
165 | 				</div>
166 | 				<div class="col-lg-2">
167 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarHeight.setHeight(10)">
168 | 						.setHeight(10)
169 | 					</button>
170 | 				</div>
171 | 				<div class="col-lg-2">
172 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarHeight.setHeight(3);">
173 | 						.setHeight(3)
174 | 					</button>
175 | 				</div>
176 | 				<div class="col-lg-2">
177 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarHeight.setHeight(7);">
178 | 						.setHeight(7)
179 | 					</button>
180 | 				</div>
181 | 			</div>
182 | 
183 | 			<!-- foorth -->
184 | 			<!-- second -->
185 | 			<div class="row" style="margin-top: 80px;">
186 | 				<div class="offset-lg-2 col-lg-8" style="text-align: left;">
187 | 					<h6>Configuration With rounded Corners : </h6>
188 | 				</div>
189 | 				<div class="offset-lg-2 col-lg-8" style="padding: 15px 0px 35px 0px;">
190 | 					<div class="wrapperSetBarRounded"></div>
191 | 				</div>
192 | 			</div>
193 | 			<div class="row" style="margin-top: 25px;margin-bottom: 50px;">
194 | 				<div class="col-lg-3">
195 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRounded.setRounded(50)">
196 | 						.setRounded(50)
197 | 					</button>
198 | 				</div>
199 | 				<div class="col-lg-3">
200 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRounded.setRounded(5,5)">
201 | 						.setRounded(5,5)
202 | 					</button>
203 | 				</div>
204 | 				<div class="col-lg-3">
205 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRounded.setRounded(5,5,5);">
206 | 						.setRounded(5,5,5)
207 | 					</button>
208 | 				</div>
209 | 				<div class="col-lg-3">
210 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRounded.setRounded(5,5,5,5);">
211 | 						.setRounded(5,5,5,5)
212 | 					</button>
213 | 				</div>
214 | 			</div>
215 | 			<!-- rounded internal -->
216 | 			<!-- rounded internal -->
217 | 			<!-- rounded internal -->
218 | 			<div class="row" style="margin-top: 80px;">
219 | 				<div class="offset-lg-2 col-lg-8" style="text-align: left;">
220 | 					<h6>Configuration With rounded Corners ( Internal ) : </h6>
221 | 				</div>
222 | 				<div class="offset-lg-2 col-lg-8" style="padding: 15px 0px 35px 0px;">
223 | 					<div class="wrapperSetBarRoundedInternal"></div>
224 | 				</div>
225 | 			</div>
226 | 			<div class="row" style="margin-top: 25px;margin-bottom: 50px;">
227 | 				<div class="col-lg-3">
228 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRoundedInternal.setRoundedInternal(50)">
229 | 						.setRoundedInternal(50)
230 | 					</button>
231 | 				</div>
232 | 				<div class="col-lg-3">
233 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRoundedInternal.setRoundedInternal(50,50)">
234 | 						.setRoundedInternal(5,5)
235 | 					</button>
236 | 				</div>
237 | 				<div class="col-lg-3">
238 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRoundedInternal.setRoundedInternal(50,50,50);">
239 | 						.setRoundedInternal(5,5,5)
240 | 					</button>
241 | 				</div>
242 | 				<div class="col-lg-3">
243 | 					<button type="button" class="btn btn-outline-dark secondSection" onclick="setbarRoundedInternal.setRoundedInternal(50,50,50,50);">
244 | 						.setRoundedInternal(5,5,5,5)
245 | 					</button>
246 | 				</div>
247 | 			</div>
248 | 
249 | 			<!-- third -->
250 | 			<div class="row">
251 | 				<div class="col-lg-12">
252 | 					<h4 class="title" style="text-align: left;">
253 | 						Exemple :
254 | 					</h4>
255 | 				</div>
256 | 				<div class="col-lg-12">
257 | 					<pre style="    text-align: left;">
258 | 						<code class="javascript">
259 | // options
260 | var options = {
261 |     color   : "#09b1ba", // color of the Progress bar. 
262 |     bgColor : "#efefef", // color background of the Progress bar
263 |     speed   : 0.3, // speed of animation. ( unit in secondes )
264 |     wrapper : ".wrapper", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
265 |     finishAnimation : false, // default "true", this option give you a animation at the end "100%".
266 |     classNameBar : "proBar", // change a class to a custom class ( for Css ).
267 |     wrapperId : "wrapperProBar", // change a wrapper id for a custom Css.
268 |     height:10, // give a height to Probar.
269 |     rounded : { // use it to round Corners of Probar.
270 |     	topLeft : 25,
271 |     	topRight : 25,
272 |     	bottomLeft : 25,
273 |     	bottomRight : 25 
274 |     },
275 |     roundedInternal : { // use it to round Corners of Probar Internaly.
276 |     	topLeft : 25,
277 |     	topRight : 25,
278 |     	bottomLeft : 25,
279 |     	bottomRight : 25 
280 |     }
281 | };
282 | 
283 | // instantiate
284 | var probar = new ProBar(options);
285 | 
286 | // use it.
287 | probar.goto(25);
288 | 
289 | // all configuration.
290 | probar.setColor("#2980b9"); // change color of ProBar.
291 | probar.setWrapperColor("#ecf0f1"); // change background color of ProBar.
292 | probar.setSpeed(3000); // change Speed to 3 secondes.
293 | probar.goto(100); // reach 100%.
294 | probar.goto(100,2000); // reach 100% in 2 secondes
295 | probar.setFinishAnimation(false); // remove a finish animation.
296 | probar.setHeight(15); // set Height to 15px.
297 | probar.setRounded(15,15,15,15); // change Border radius of Probar. (topLeft, topRight, bottomLeft, bottomRight);
298 | probar.setRoundedInternal(15,15,15,15); // change Border radius of Probar Internel. (topLeft, topRight, bottomLeft, bottomRight);
299 | 						</code>
300 | 					</pre>
301 | 				</div>
302 | 			</div>
303 | 
304 | 			<!-- footer -->
305 | 			<div class="row">
306 | 				<div class="col-lg-12">
307 | 					<h4 class="title">
308 | 						Fork me on <a href="https://github.com/YanDevDz/ProBar"><i class="fab fa-github-alt"></i> Github</a>
309 | 					</h4>
310 | 				</div>
311 | 			</div>
312 | 		</div>
313 | 
314 | 	</div>
315 | </div>
316 | 
317 | 
318 | 
319 | <!-- Require Jquery -->
320 | <script
321 |   src="https://code.jquery.com/jquery-3.4.1.min.js"
322 |   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
323 |   crossorigin="anonymous"></script>
324 | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
325 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
326 | 
327 | <!-- highlighted -->
328 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
329 | 
330 | <!-- Require ProBar.js -->
331 | <script src="ProBar.js"></script>
332 | 
333 | <!-- script -->
334 | <script>
335 | 	hljs.initHighlightingOnLoad();
336 | 	// options
337 | 	var options = {
338 | 	    color   : "#44bd32", // color of the Progress bar. 
339 | 	    bgColor : "#efefef", // color background of the Progress bar
340 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
341 | 	    wrapper : "body", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
342 | 	    finishAnimation : true // default "true", this option give you a animation at the end "100%".
343 | 	};
344 | 
345 | 	// options
346 | 	var optionsTimer = {
347 | 	    color   : "#09b1ba", // color of the Progress bar. 
348 | 	    bgColor : "#efefef", // color background of the Progress bar
349 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
350 | 	    wrapper : ".wrapperTimer", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
351 | 	    finishAnimation : false, // default "true", this option give you a animation at the end "100%".
352 | 	    classNameBar : "timer",
353 | 	    wrapperId : "wrapperTimerId"
354 | 	};
355 | 	// options
356 | 	var optionsSetBar = {
357 | 	    color   : "#f1c40f", // color of the Progress bar. 
358 | 	    bgColor : "#efefef", // color background of the Progress bar
359 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
360 | 	    wrapper : ".wrapperSetBar", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
361 | 	    finishAnimation : false, // default "true", this option give you a animation at the end "100%".
362 | 	    classNameBar : "setBar",
363 | 	    wrapperId : "wrapperSetBar"
364 | 	};
365 | 	// options
366 | 	var optionsSetBarHeight = {
367 | 	    color   : "#8e44ad", // color of the Progress bar. 
368 | 	    bgColor : "#efefef", // color background of the Progress bar
369 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
370 | 	    wrapper : ".wrapperSetBarHeight", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
371 | 	    finishAnimation : false, // default "true", this option give you a animation at the end "100%".
372 | 	    classNameBar : "setBarHeight",
373 | 	    wrapperId : "wrapperSetBarHeight",
374 | 	    height:10 // give a height to Probar.
375 | 	};
376 | 	// options
377 | 	var optionsSetBarRounded = {
378 | 	    color   : "#d35400", // color of the Progress bar. 
379 | 	    bgColor : "#efefef", // color background of the Progress bar
380 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
381 | 	    wrapper : ".wrapperSetBarRounded", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
382 | 	    finishAnimation : false, // default "true", this option give you a animation at the end "100%".
383 | 	    classNameBar : "setBarRounded",
384 | 	    wrapperId : "wrapperSetBarRounded",
385 | 	    height:10, // give a height to Probar.
386 | 	    
387 | 	    rounded : {
388 | 	    	topLeft : 25,
389 | 	    	topRight : 25,
390 | 	    	bottomLeft : 25,
391 | 	    	bottomRight : 25 
392 | 	    }
393 | 
394 | 	};
395 | 	// options
396 | 	var optionsSetBarRoundedInternal = {
397 | 	    color   : "#273c75", // color of the Progress bar. 
398 | 	    bgColor : "#718093", // color background of the Progress bar
399 | 	    speed   : 0.3, // speed of animation. ( unit in secondes )
400 | 	    wrapper : ".wrapperSetBarRoundedInternal", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id" 
401 | 	    finishAnimation : false, // default "true", this option give you a animation at the end "100%".
402 | 	    classNameBar : "setBarRoundedInternal",
403 | 	    wrapperId : "wrapperSetBarRoundedInternal",
404 | 	    height:10, // give a height to Probar.
405 | 	    
406 | 	    rounded : {
407 | 	    	topLeft : 25,
408 | 	    	topRight : 25,
409 | 	    	bottomLeft : 25,
410 | 	    	bottomRight : 25 
411 | 	    },
412 | 
413 | 	    roundedInternal : {
414 | 	    	topLeft : 25,
415 | 	    	topRight : 25,
416 | 	    	bottomLeft : 25,
417 | 	    	bottomRight : 25 
418 | 	    }
419 | 
420 | 	};
421 | 	
422 | 	// instantiate.
423 | 	var probar = new ProBar(options);
424 | 	var timebar = new ProBar(optionsTimer);
425 | 	var setbar = new ProBar(optionsSetBar);
426 | 	var setbarHeight = new ProBar(optionsSetBarHeight);
427 | 	var setbarRounded = new ProBar(optionsSetBarRounded);
428 | 	var setbarRoundedInternal = new ProBar(optionsSetBarRoundedInternal);
429 | 
430 | 	probar.goto(25);
431 | 	timebar.goto(30);
432 | 	setbar.goto(50);
433 | 	setbarHeight.goto(35);
434 | 	setbarRounded.goto(80);
435 | 	setbarRoundedInternal.goto(75);
436 | 
437 | 	
438 | 	///////////////////
439 | 	// All functions //
440 | 	///////////////////
441 | 
442 | 	// probar.setColor("#2980b9"); // change color of ProBar.
443 | 	// probar.setWrapperColor("#ecf0f1"); // change background color of ProBar.
444 | 	// probar.setSpeed(3000); // change Speed to 3 secondes.
445 | 	// probar.goto(100); // reach 100%.
446 | 	// probar.goto(100,2000); // reach 100% in 2 secondes
447 | 	// probar.setFinishAnimation(false); // remove a finish animation.
448 | 
449 | 	$(window).scroll(function() {
450 | 	  var y = $(this).scrollTop();
451 | 
452 | 	  let percent = (y * 100) / ($(document).height() - $(window).height());
453 | 	  
454 | 	  probar.goto(percent);
455 | 	});
456 | 
457 | 
458 | </script>
459 | </body>
460 | </html>
461 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # ProBar
 2 | 
 3 | ProBar is a progress bar with multiple options.
 4 | 
 5 | # Features !
 6 | 
 7 |   - config a ProBar color.
 8 |   - config a ProBar background.
 9 |   - config a Speed of ProBar.
10 |   - config a "Goto" option with timing.
11 |   - config a Finish animation.
12 |   - cutomize with your own CSS.
13 |   - config a Height of Probar.
14 |   - config a Rounded Corners of Probar. 
15 |   - config a Rounded Corners of Probar in Internal. 
16 | 
17 | ### Requirement
18 | 
19 | ProBar require [JQuery](https://code.jquery.com/).
20 | 
21 | # How to Use :
22 | 
23 | #### FIRST require CDN JQuery:
24 | 
25 | ```html
26 | <script
27 |   src="https://code.jquery.com/jquery-3.4.1.min.js"
28 |   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
29 |   crossorigin="anonymous"></script>
30 | ```
31 | 
32 | #### Link `ProBar.js` from your html file
33 | ```html
34 | <script src="/your/path/to/ProBar.js"></script>
35 | ```
36 | 
37 | #### Secondly instantiate ProBar:
38 | 
39 | ```js
40 | var probar = new ProBar(options);
41 | ```
42 | 
43 | #### The options :
44 | 
45 | ```js
46 | {
47 |     color : "#2a2a2a", // color of the Progress bar. 
48 |     bgColor : "#efefef", // color background of the Progress bar
49 |     speed : 0.3, // speed of animation. ( unit in secondes )
50 |     wrapper : "body", // the wrapper who append ProBar. if class ".class" ,if id "#id" 
51 |     finishAnimation : true || false,  // config a finish animation. 
52 |     classNameBar : "setBar", // change a class to a custom class ( for Css ).
53 |     wrapperId : "wrapperSetBar", // change a wrapper id for a custom Css.
54 |     height:10, // give a height to Probar.
55 |     rounded : { // use it to round Corners of Probar.
56 |       topLeft : 25,
57 |       topRight : 25,
58 |       bottomLeft : 25,
59 |       bottomRight : 25 
60 |     },
61 |     roundedInternal : { // use it to round Corners of Probar (internal).
62 |       topLeft : 25,
63 |       topRight : 25,
64 |       bottomLeft : 25,
65 |       bottomRight : 25 
66 |     }
67 | }
68 | ```
69 | 
70 | #### Functions :
71 | 
72 | ```js
73 | probar.setColor("#2980b9"); // change color of ProBar.
74 | probar.setWrapperColor("#ecf0f1"); // change background color of ProBar.
75 | probar.setSpeed(3000); // change Speed to 3 secondes.
76 | probar.setFinishAnimation(false); // set animation to false.
77 | probar.goto(100); // reach 100%.
78 | probar.goto(100,2000); // reach 100% in 2 secondes.
79 | probar.setHeight(15); // set Height to 15px.
80 | probar.setRounded(15,15,15,15); // change Border radius of Probar. (topLeft, topRight, bottomLeft, bottomRight);
81 | probar.setRoundedInternal(15,15,15,15); // change Border radius of Probar (Internal). (topLeft, topRight, bottomLeft, bottomRight);
82 | ```
83 | 
84 | #### Upcoming features 
85 | 
86 |  - Remove JQuery requirement.
87 | 
88 | License
89 | ----
90 | 
91 | MIT
92 | 
93 | # ** Made with love ❤ **
94 | 
95 | [jQuery]: <https://jquery.com>
96 | 


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