I want to create a progress bar like in the below image:
I have no idea about creating this. Should I use HTML5 techniques?
Would you please give me some help about creating this progress bar?
This question is related to
html
css
progress-bar
The answer is
Progress Bar without nested divs... for every element where the css linear-gradient works.
Here the JSFiddle http://jsfiddle.net/oj1L3y6t/2/
_x000D_
_x000D_
_x000D_
_x000D_
function show_progress(i) {_x000D_
var progress1 = i;_x000D_
var progress2 = progress1 + 1;_x000D_
var progress3 = progress1 + 2;_x000D_
_x000D_
var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";_x000D_
document.getElementById("progress-0").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";_x000D_
document.getElementById("progress-1").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";_x000D_
document.getElementById("progress-2").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";_x000D_
document.getElementById("progress-3").style.background = magic;_x000D_
}_x000D_
_x000D_
function timeout() {_x000D_
t = setTimeout(function() {_x000D_
show_progress(t)_x000D_
timeout();_x000D_
}, 50);_x000D_
if (t == 78) {_x000D_
clearTimeout(t);_x000D_
}_x000D_
console.log(t);_x000D_
}_x000D_
_x000D_
timeout();#progress-0 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#progress-1 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
border-radius: 10px;_x000D_
}_x000D_
_x000D_
#progress-2 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
}_x000D_
_x000D_
#progress-3 {_x000D_
border: 1px solid black;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: #999;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
border-radius: 200px;_x000D_
}<div id="progress-0">Loading</div>_x000D_
<input id="progress-1" value="Loading"></input>_x000D_
<button id="progress-2">Loading</button>_x000D_
<p id="progress-3">Loading</p>http://jsfiddle.net/cwZSW/1406/
_x000D_
_x000D_
_x000D_
_x000D_
#progress {_x000D_
background: #333;_x000D_
border-radius: 13px;_x000D_
height: 20px;_x000D_
width: 300px;_x000D_
padding: 3px;_x000D_
}_x000D_
_x000D_
#progress:after {_x000D_
content: '';_x000D_
display: block;_x000D_
background: orange;_x000D_
width: 50%;_x000D_
height: 100%;_x000D_
border-radius: 9px;_x000D_
}<div id="progress"></div>Same as @RoToRa's answer, with a some slight adjustments (correct colors and dimensions):
_x000D_
_x000D_
_x000D_
_x000D_
body {_x000D_
background-color: #636363;_x000D_
padding: 1em;_x000D_
}_x000D_
_x000D_
#progressbar {_x000D_
background-color: #20201F;_x000D_
border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */_x000D_
padding: 4px;_x000D_
}_x000D_
_x000D_
#progressbar>div {_x000D_
background-color: #F7901E;_x000D_
width: 48%;_x000D_
/* Adjust with JavaScript */_x000D_
height: 16px;_x000D_
border-radius: 10px;_x000D_
}<div id="progressbar">_x000D_
<div></div>_x000D_
</div>Here's the fiddle: jsFiddle
And here's what it looks like:
Using setInterval.
_x000D_
_x000D_
_x000D_
_x000D_
var totalelem = document.getElementById("total");_x000D_
var progresselem = document.getElementById("progress");_x000D_
var interval = setInterval(function(){_x000D_
if(progresselem.clientWidth>=totalelem.clientWidth)_x000D_
{_x000D_
clearInterval(interval);_x000D_
return;_x000D_
}_x000D_
progresselem.style.width = progresselem.offsetWidth+1+"px";_x000D_
},10).outer_x000D_
{_x000D_
width: 200px;_x000D_
height: 15px;_x000D_
background: red;_x000D_
}_x000D_
.inner_x000D_
{_x000D_
width: 0px;_x000D_
height: 15px;_x000D_
background: green;_x000D_
}<div id="total" class="outer">_x000D_
<div id="progress" class="inner"></div>_x000D_
</div>Using CSS Transtitions.
_x000D_
_x000D_
_x000D_
_x000D_
function loading()_x000D_
{_x000D_
document.getElementById("progress").style.width="200px";_x000D_
}.outer_x000D_
{_x000D_
width: 200px;_x000D_
height: 15px;_x000D_
background: red;_x000D_
}_x000D_
.inner_x000D_
{_x000D_
width: 0px;_x000D_
height: 15px;_x000D_
background: green;_x000D_
-webkit-transition:width 3s linear;_x000D_
transition: width 3s linear;_x000D_
}<div id="total" class="outer">_x000D_
<div id="progress" class="inner"></div>_x000D_
</div>_x000D_
<button id="load" onclick="loading()">Load</button>.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}
@keyframes Load {
100 % {
width: 1300 px;border - right - width: 5;
}
In modern browsers you could use a CSS3 & HTML5 progress Element!
_x000D_
_x000D_
_x000D_
_x000D_
progress {_x000D_
width: 40%;_x000D_
display: block; /* default: inline-block */_x000D_
margin: 2em auto;_x000D_
padding: 3px;_x000D_
border: 0 none;_x000D_
background: #444;_x000D_
border-radius: 14px;_x000D_
}_x000D_
progress::-moz-progress-bar {_x000D_
border-radius: 12px;_x000D_
background: orange;_x000D_
_x000D_
}_x000D_
/* webkit */_x000D_
@media screen and (-webkit-min-device-pixel-ratio:0) {_x000D_
progress {_x000D_
height: 25px;_x000D_
}_x000D_
}_x000D_
progress::-webkit-progress-bar {_x000D_
background: transparent;_x000D_
} _x000D_
progress::-webkit-progress-value { _x000D_
border-radius: 12px;_x000D_
background: orange;_x000D_
} <progress max="100" value="40"></progress>Why can't you just Create Multiple pictures for each part of the status bar? If it's a third just show a third of the status bar... it's very simple. You could probably figure out how to change it to the next picture based of input with the form tag. Here's my part of the code, you have to figure out the form stuff later
<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>
Now it seems simple, doesn't it?
There is a tutorial for creating an HTML5 progress bar here. If you don't want to use HTML5 methods or you are looking for an all-browser solution, try this code:
_x000D_
_x000D_
_x000D_
_x000D_
<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
<div style="height: 25px; width:87%; background-color: gold"> </div>
</div>You can change the color GOLD to any progress bar color and #dbdbdb to the background-color of your progress bar.
Create an element which shows the left part of the bar (the round part), also create an element for the right part. For the actual progress bar, create a third element with a repeating background and a width which depends on the actual progress. Put it all on top of the background image (containing the empty progress bar).
But I suppose you already knew that...
Edit: When creating a progress bar which do not use textual backgrounds. You can use the border-radius to get the round effect, as shown by Rikudo Sennin and RoToRa!
.black-strip
{ width:100%;
height: 30px;
background-color:black;
}
.green-strip
{ width:0%;
height: 30px;
background-color:lime;
animation-name: progress-bar;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes progress-bar {
from{width:0%}
to{width:100%}
}
<div class="black-strip">
<div class="green-strip">
</div>
</div>
If you wish to have a progress bar without adding some code PACE can be an awesome tool for you.
Just include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and AJAX navigation. Best thing with PACE is the auto detection of progress.
It contains various themes and color schemes as well.
Worth a try.
2014 answer: Since 2014 HTML now 5 includes a <progress> element that does not need JavaScript.
The percent value moves with the progress using inline content.
Tested only in webkit. Hope it helps:
CSS:
_x000D_
_x000D_
_x000D_
_x000D_
progress {_x000D_
display:inline-block;_x000D_
width:190px;_x000D_
height:20px;_x000D_
padding:15px 0 0 0;_x000D_
margin:0;_x000D_
background:none;_x000D_
border: 0;_x000D_
border-radius: 15px;_x000D_
text-align: left;_x000D_
position:relative;_x000D_
font-family: Arial, Helvetica, sans-serif;_x000D_
font-size: 0.8em;_x000D_
}_x000D_
progress::-webkit-progress-bar {_x000D_
height:11px;_x000D_
width:150px;_x000D_
margin:0 auto;_x000D_
background-color: #CCC;_x000D_
border-radius: 15px;_x000D_
box-shadow:0px 0px 6px #777 inset;_x000D_
}_x000D_
progress::-webkit-progress-value {_x000D_
display:inline-block;_x000D_
float:left;_x000D_
height:11px;_x000D_
margin:0px -10px 0 0;_x000D_
background: #F70;_x000D_
border-radius: 15px;_x000D_
box-shadow:0px 0px 6px #777 inset;_x000D_
}_x000D_
progress:after {_x000D_
margin:-26px 0 0 -7px;_x000D_
padding:0;_x000D_
display:inline-block;_x000D_
float:left;_x000D_
content: attr(value) '%';_x000D_
}<progress id="progressBar" max="100" value="77"></progress>I like this one:
very slick with only this as HTML and the rest CSS3 that is backwards compatible (although it will have less eyecandy)
Edit Added code below, but taken directly from the page above, all credit to that author
_x000D_
_x000D_
_x000D_
_x000D_
.meter {_x000D_
height: 20px;_x000D_
/* Can be anything */_x000D_
position: relative;_x000D_
background: #555;_x000D_
-moz-border-radius: 25px;_x000D_
-webkit-border-radius: 25px;_x000D_
border-radius: 25px;_x000D_
padding: 10px;_x000D_
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);_x000D_
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);_x000D_
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);_x000D_
}_x000D_
_x000D_
.meter>span {_x000D_
display: block;_x000D_
height: 100%;_x000D_
-webkit-border-top-right-radius: 8px;_x000D_
-webkit-border-bottom-right-radius: 8px;_x000D_
-moz-border-radius-topright: 8px;_x000D_
-moz-border-radius-bottomright: 8px;_x000D_
border-top-right-radius: 8px;_x000D_
border-bottom-right-radius: 8px;_x000D_
-webkit-border-top-left-radius: 20px;_x000D_
-webkit-border-bottom-left-radius: 20px;_x000D_
-moz-border-radius-topleft: 20px;_x000D_
-moz-border-radius-bottomleft: 20px;_x000D_
border-top-left-radius: 20px;_x000D_
border-bottom-left-radius: 20px;_x000D_
background-color: #f1a165;_x000D_
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));_x000D_
background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);_x000D_
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);_x000D_
background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);_x000D_
background-image: -o-linear-gradient(top, #f1a165, #f36d0a);_x000D_
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);_x000D_
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);_x000D_
position: relative;_x000D_
overflow: hidden;_x000D_
}<div class="meter">_x000D_
<span style="width: 33%"></span>_x000D_
<!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->_x000D_
</div>_x000D_
_x000D_
_x000D_
_x000D_
.loading {_x000D_
position: relative;_x000D_
width: 50%;_x000D_
height: 200px;_x000D_
border: 1px solid rgba(160, 160, 164, 0.2);_x000D_
background-color: rgba(160, 160, 164, 0.2);_x000D_
border-radius: 3px;_x000D_
}_x000D_
_x000D_
span.loader {_x000D_
position: absolute;_x000D_
top: 40%;_x000D_
left: 10%;_x000D_
width: 250px;_x000D_
height: 20px;_x000D_
border-radius: 8px;_x000D_
border: 2px solid rgba(160, 160, 164, 0.8);_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
span.loader span.innerLoad {_x000D_
text-align: center;_x000D_
width: 140px;_x000D_
font-size: 15px;_x000D_
font-stretch: extra-expanded;_x000D_
color: #2A00FF;_x000D_
padding: 1px 18px 3px 80px;_x000D_
border-radius: 8px;_x000D_
background: rgb(250, 198, 149);_x000D_
background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);_x000D_
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));_x000D_
background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);_x000D_
background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);_x000D_
background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);_x000D_
background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);_x000D_
}<div class="loading">_x000D_
<span class="loader">_x000D_
<span class="innerLoad">Loading...</span>_x000D_
</span>_x000D_
</div>Source: Stackoverflow.com