morteza heydari morteza heydari - 1 year ago 41
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.