Progress Bar Tutorial [ F2U ]

K90-Nyel

Info

Created: 4 years, 3 months ago
Creator: K90-Nyel
Favorites: 988

Profile

Progress bar customisation Tutorial ; F2U
^{I just wanted to put all the progress bar code variations I could find / make in the same place, enjoy, no need to credit !}

Change the "50%" to change the width

Change the "#FCD063" & "#6699ff" to change the color
clic HERE for a color code generator

Usefull : Ctrl+f allow you to search for a specific word in your code/page.

Basic
^{Round Corners / Square Corners}

Default Color	Colored	Striped	Animated
<div class="progress"><div class="progress-bar" style="width:50%;"><br></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#FCD063;"><br></div></div>

<div class="progress rounded-0"><div class="progress-bar" style="width:50%;"><br></div></div>	<div class="progress rounded-0"><div class="progress-bar" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress rounded-0"><div class="progress-bar progress-bar-striped" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress rounded-0"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#FCD063;"><br></div></div>

Bar Width
^{pixel / %}


<div class="progress" style="width:200px;"><div class="progress-bar" style="width:50%;"><br></div></div>	<div class="progress" style="width:50%;"><div class="progress-bar" style="width:50%;"><br></div></div>

Double
^{Don't forget to change BOTH of the % and color for this one !}


<div class="progress"><div class="progress-bar " style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar progress-bar-striped" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar progress-bar-striped" style="width: 50%;background-color: #FCD063;"><br></div></div>

<div class="progress"><div class="progress-bar " style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;background-color: #FCD063;"><br></div></div>

Text
^{You can aslo change the color of the text !}

Default Placement	Left Right	Mid dle
<div class="progress"><div class="progress-bar" style="width:50%;background-color:#6699ff;">Default</div><div class="progress-bar" style="width: 50%;background-color: #FCD063;">Placement<br></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#6699ff;"><span class="text muted float-left">  Left<br></span></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><span class="text muted float-right">Right  <br></span></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#6699ff;"><span class="text muted float-right">  Mid<br></span></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><span class="text muted float-left">dle<br></span></div></div>
Default Placement	Left Right	Mid dle
<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#6699ff;">Default</div><div class="progress-bar" style="width: 50%;background-color: #FCD063;">Placement<br></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#6699ff;"><span class="text muted float-left">  Left<br></span></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><span class="text muted float-right">Right  <br></span></div></div>	<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#6699ff;"><span class="text muted float-right">  Mid<br></span></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><span class="text muted float-left">dle<br></span></div></div>

Bar Height
^{place the "height:5px;" correctly in the bar code and change the "5px, 10px, 20px, 50px, etc"}

Simple Thinner (<17px) 5px	Simple Default (=17px) 17px	Simple Thicker (>17px) 25px
<div class="progress" style="height:5px;"><div class="progress-bar" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar" style="width:50%;background-color:#FCD063;"><br></div></div>	<div class="progress" style="height:25px;"><div class="progress-bar" style="width:50%;background-color:#FCD063; height:25px;"><br></div></div>
Double Thinner (<17px) 5px	Double Default (=17px) 17px	Double Thicker (>17px)C 25px
<div class="progress" style="height:5px;"><div class="progress-bar " style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress"><div class="progress-bar " style="width:50%;background-color:#6699ff;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063;"><br></div></div>	<div class="progress" style="height:25px;"><div class="progress-bar " style="width:50%;background-color:#6699ff; height:25px;"><br></div><div class="progress-bar" style="width: 50%;background-color: #FCD063; height:25px;"><br></div></div>

Multiple
^{there is MANY options to this one, way too many for me to list, so to use it you'll have to experiment yourself}

Make your Own !
^{all the bits of code but separated to be more clear}

Base (rounded)	<div class="progress"><div class="progress-bar" style="width:50%;"><br></div></div>
Base (square)	rounded-0 <div class="progress rounded-0"><div class="progress-bar" style="width:50%;">
Bar Width (px & %)	style="width:200px;" (50px, 100px, 200px, 500px, etc) <div class="progress" style="width:200px;"><div class="progress-bar" style="width:50%;"><br></div></div> style="width:30%;" (30%, 50%, 100%, etc) <div class="progress" style="width:30%;"><div class="progress-bar" style="width:50%;"><br></div></div>
Custom Colors	background-color:#000000; <div class="progress-bar" style="width:50%;background-color:#000000;">
Stripes	progress-bar-striped <div class="progress"><div class="progress-bar progress-bar-striped" style="width:50%;background-color:#000000;">
Animated Stripes	progress-bar-striped progress-bar-animated <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;background-color:#FCD063;">
Text	<span class="text">TEXT</span> <div class="progress"><div class="progress-bar" style="width:50%;"><span class="text">TEXT</span><br></div></div>
Colored Text	<span style="color: rgb(155, 155, 155);"> <div class="progress"><div class="progress-bar" style="width:50%;"><span class="text"><span style="color: rgb(155, 155, 155);">TEXT</span><br></div></div>
Text Left	<span class="text muted float-left"> <div class="progress"><div class="progress-bar" style="width:50%;"><span class="text muted float-left">TEXT</span><br></div></div>
Text Right	<span class="text muted float-right"> <div class="progress"><div class="progress-bar" style="width:50%;"><span class="text muted float-right">TEXT</span><br></div></div>
Bar Height	style="height:20px;" / height:20px;" (5px, 10px, 20px, 50px, etc) Thinner than 17px : <div class="progress" style="height:5px;"><div class="progress-bar" style="width:50%;background-color:#FCD063;"><br></div></div> Thicker than 17px : <div class="progress" style="height:20px;"><div class="progress-bar" style="width:50%;background-color:#FCD063; height:20px;"><br></div></div>

Feel free to PM/Comment if you have any questions ! i'll try to help the best I can.

Recent Images

No images.