How to show blocks for progressbar using CSS


Tags: html,css

Problem :

I have a div with 100% width on my page. Now I need to show blocks into a <div> just like windows progressbar can anyone tell how I can create those blocks in the my div?

Looks like this:

enter image description here



Solution :

I copied @Anshuman Dwibhashi answer, but I changed the background to a piece of the image you posted. Now you just increase or decrease the percentage width of .sub-block to change the load bar progress.

<div class="main" style="border:solid;background-color:white;width:500px;height:25px;">
    <div class="sub-block" style="background:url('http://i.imgur.com/PRBmb4s.png');width:30%;height:25px;" ></div>
</div>

enter image description here


    CSS Howto..

    How to get all images(overlapping allowed) in one line using css?

    How to use @Media queries

    How to apply css style for HTML element using Mootools

    Using flexbox how do I prevent a specific element from inheriting flex layout?

    Linkedin Follow Button not showing properly in Firefox

    How to provide a stylesheet for rendering PDFs?

    How to place elements on top of each other

    How to center my a div in a table using CSS?

    How can I make clickable list with sublinks ?

    How to change CSS background-position for the X axis only? [duplicate]

    How to make the divs fill the remaining space without using float?

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    ¿How to create text slider animation?

    How to not change color of link on hover

    My dropdown menu isn't showing below parent

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    Simple html page renders differently in Firefox and IE. How to fix it?

    How to Implement YUI Compresser in a website [closed]

    How to edit the CSS of a div that does not contain a H1 tag?

    How do I tell what are the ids and classes of a rail html.erb component?

    How to render same margins for every browser?

    How to refresh div using ajax refresh?

    how to add style to form under echo statement by css [closed]

    How to select the last div in css

    Creating an animated image slider - how to animate and restrict multiple clicks?

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

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

    How to change text color of a link inside jQuery accordion

    How to select only one child element in CSS?

    How to write css fallbacks for vh vw