Progress Bar with HTML and CSS

I want to create a progress bar like in the below image:

Progress Bar Example

I have no idea about creating this. Should I use HTML5 techniques?

Would you please give me some help about creating this progress bar?


ANSWERS:


<div id="progressbar">
  <div></div>
</div>
#progressbar {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar > div {
   background-color: orange;
   width: 40%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;
}

Fiddle

(EDIT: Changed Syntax highlight; changed descendant to child selector)


#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>

I designed an alternative without JavaScript. The percent value moves with the progress using inline content. Tested only in webkit. Hope it helps:

jsFiddle

CSS:

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<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

HTML

<div class="meter">
    <span style="width: 33%"></span> <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>

CSS

.meter { 
    height: 20px;  /* Can be anything */
    position: relative;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
    display: block;
    height: 100%;
       -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
           -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
               border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
     -webkit-border-bottom-left-radius: 20px;
            -moz-border-radius-topleft: 20px;
         -moz-border-radius-bottomleft: 20px;
                border-top-left-radius: 20px;
             border-bottom-left-radius: 20px;
    background-color: #f1a165;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a); 
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
    -webkit-box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

Progress Bar without nested divs... for every element where the css linear-gradient works.

Here the JSFiddle

HTML+CSS+Javascript

HTML

<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>

CSS

#progress-0 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
}

#progress-1 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
    margin-top:10px;
    border-radius: 10px;
}

#progress-2 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
    margin-top:10px;
}

#progress-3 {
    border:1px solid black;
    width:100px;
    height:100px;
    background:#999;
    line-height: 100px;
    text-align:center;
    margin-top:10px;
    border-radius: 200px;
}

JS

function show_progress(i) {
    var progress1 = i;
    var progress2 = progress1+1;
    var progress3 = progress1+2;

    var magic = "linear-gradient(to right, #FFC2CE " + progress1  + "% ,red " + progress2  + "% , #FFFFFF " + progress3  + "%)";
    document.getElementById("progress-0").style.background = magic; 

    var magic = "linear-gradient(to right, lightblue " + progress1  + "% , lightgreen " + progress2  + "%)";
    document.getElementById("progress-1").style.background = magic; 

    var magic = "linear-gradient(to right, lightblue " + progress1  + "% , #FFFFFF 100%)";
    document.getElementById("progress-2").style.background = magic; 

    var magic = "linear-gradient(#FFC2CE " + progress1  + "% ,red " + progress2  + "% , #FFFFFF " + progress3  + "%)";
    document.getElementById("progress-3").style.background = magic;     
 }


function timeout(){
     t = setTimeout(function(){
        show_progress(t)
        timeout();
    },50);
    if (t == 78) { clearTimeout(t); }
    console.log(t);
}

timeout();

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!


Same as @RoToRa's answer, with a some slight adjustments (correct colors and dimensions):

HTML

<div id="progressbar">
    <div></div>
</div>

CSS

body{
    background-color: #636363;
    padding: 1em;
}  
#progressbar {
    background-color: #20201F;
    border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
    padding: 4px;
}
#progressbar > div {
    background-color: #F7901E;
    width: 48%; /* Adjust with JavaScript */
    height: 16px;
    border-radius: 10px;
}

Here's the fiddle: jsFiddle

And here's what it looks like: jsFiddle-screenshot


<div class="loading">
     <span class="loader">
    <span class="innerLoad">Loading...</span>
 </span>
  </div>

CSS

    .loading{
position:relative;
width:50%;
height:200px;
border:1px solid rgba(160,160,164,0.2);
background-color:rgba(160,160,164,0.2);
border-radius:3px;
}
    span.loader{
position:absolute;
top:40%;
left:10%;
 width:250px;
 height:20px;
 border-radius:8px;
 border:2px solid rgba(160,160,164,0.8);
 padding:0;
}
    span.loader span.innerLoad{
text-align:center;
 width:140px;
font-size:15px;
font-stretch:extra-expanded;
color:#2A00FF;
padding:1px 18px 3px 80px;
 border-radius:8px;
background: rgb(250,198,149);

background: -moz-linear-gradient(left,  rgba(250,198,149,1) 0%, rgba(245,171,102,1) 47%, rgba(239,141,49,1) 100%);

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)));

background: -webkit-linear-gradient(left,  rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%);

background: -o-linear-gradient(left,  rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%);

background: -ms-linear-gradient(left,  rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%);

background: linear-gradient(to right,  rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31',GradientType=1 );

}      

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=""></img>
<!--second progress bar:-->
<img src=""></img>
<!--et caetera...-->
</form>

Now it seems simple, doesn't it?


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.


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:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
   <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>

You can change the color GOLD to any progress bar color and #dbdbdb to the background-color of your progress bar.


.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;
}


 MORE:


 ? How do you create a progress bar when using the "foreach()" function in R?
 ? Angularjs $http and progress bar
 ? Linking third party CSV reader to a progress bar
 ? How to set progressbar background
 ? "Binary XML file android.widget.ProgressBar cannot be cast to android.view.ViewGroup" in progress bar
 ? "Binary XML file android.widget.ProgressBar cannot be cast to android.view.ViewGroup" in progress bar
 ? "Binary XML file android.widget.ProgressBar cannot be cast to android.view.ViewGroup" in progress bar
 ? cannot display progress bar at the time of loading another Activity in Android
 ? Is there a black progress bar to be visible on a white background?
 ? How to remove progress bar number at the bottom part of the progress bar?