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

    how to hover after calling jquery animate()

    how to locate an element by value using css selector in webdriver?

    How to fix error from posting html element and prevent it from running

    How to zoom content to screen width

    How to make all my div's same height based on breathing content

    How to push content div to footer div while keeping background in the picture

    HTML code to show splitted data_frame in one html page using python

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to have different lightbox for different object

    how to change default Bootstrap link hover color to custom color? [closed]

    how to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background

    Javascript: how to append more text to user copied text ala nydailynews.com

    How to override a property set in an id (CSS)

    How to prevent an element to get pushed down by window resize?

    How to apply icons to links using css?

    How do you find the dimensions of a “display: none” element?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

    How do you stop a single-page site from automatically scrolling when resizing the browser?

    How to style sets of labels and fields in a form with pure CSS and get proper alignment?

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    Adding a description to a css image slideshow

    Showing images conditionally

    How to increase constant space between li inline-block list elemets?

    CSS: How to position a div in the center with dynamic width

    How to link an image in input text box using css

    How do I make elements flow horizontally instead of vertically?

    How to have multiple CSS transitions on an element?

    How to add css loading animation in ajax beforeopen page

    How to prevent embedded video from linking to another web page