morteza heydari morteza heydari - 1 year ago 62
CSS Question

How to make the progress bar with html css javascript

How to make the progress bar Like the image below

enter image description here

Answer Source

I think the easiest way would be to use something like:

css:

.progress
{
    position:relative;
    width: 100px;
    height: 100px;
}

.progressUnder
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('backgroundUnder.jpg');
}

.progressOver
{
    position: absolute;
    width: 100%;
    height: 0%;
    background-image: url('backgroundOver.jpg');
}

.progressPercent
{
    position:absolute;
    top: 40px;
    width: 100%;
    text-align: center;
}

and html:

<div class='progress'>
  <div class='progressUnder'/>
  <div class='progressOver' />
  <div class='progressPercent'>0%</div>
</div>

and then use javascript to animate the percent height of div.progressOver, as well as the .progressPercent counter.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download