How to make the progress bar with html css javascript


Tags: javascript,jquery,html,css

Problem :

How to make the progress bar Like the image below

enter image description here



Solution :

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.


    CSS Howto..

    Learning Bootstrap Thumbnails…why is that bullet showing?

    How to change Fancybox preloader image?

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    How to apply jquery ui styling on dynamically generated elements

    How to apply style to the divs that are added dynamically?

    How to hide crossed-out CSS lines on firebug?

    How to use scss with css modules / postcss inside components

    How do I invoke a CSS3 transition using JavaScript?

    How to make a fixed menu/sidebar while using position:relative?

    How to add an anchor tag to a block of html?

    CSS 100vw causing scrollbar to show, cant use 100% unfortunately

    How to generate css using google chrome inspector to further use them?

    How to set minimum height for a div?

    How to animate an icon for with CSS?

    How can I prevent styles from applying to certain HTML snippets?

    How to style 2 vertical jQuery UI Slider handles?

    How do i use floats for images while using
    so that
    still shows under image?

    How can I create a borderless textbox in Google Chrome using CSS?

    How to add a css transition color change for a link/div background

    how to move 2 divs on hover with css

    How to override inline style dynamically?

    How to exclude particular class name in CSS selector?

    How do I get these elements to effectively center properly and responsively?

    how can i get a css table-cell link not to stretch the clickable area

    How to add css class to style.css?

    How to hide ads with media queries?

    How to make a table-cell have the same width as its height?

    Background hover showing in CSS

    How do you spin side to side using css3 animation?

    Is it possible to apply css transitions on svg nodes? If yes, how?