Home/ Questions/Q 3991618
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T06:38:15+00:00

I am using css to create a gantt-chart style progress bar. It consists of

  • 0

I am using css to create a “gantt-chart” style progress bar.

It consists of an empty progress bar, inside which is a green bar which represents expected progress. On top of this should be another (thinner) black bar which represents actual progress.

The “actual” and “expected” bars are independent – i.e. Actual could be more or less than expected, so I can’t just nest the Actual bar inside the div for Expected.

I want to have a number of these little progress bars, in a GridView or Repeater, so I can’t use position absolute.

How can I get the z-index to work so the Actual bar sits “on top” of the actual bar?

The CSS I have is:

div.progressBarEmpty
{
    height:11px;
    background-color:Silver;
    border: 1px solid black;
    font-size: 0.1em
}

div.progressBarGreen
{
    position:absolute;
    top:0;left:0;
    height:11px;
    background-color:#00ff33;
    border-right: 1px solid black;
    font-size: 0.1em
    z-index:0;

}

div.progressBarActual
{
    position:absolute;
    top:3;left:0;
    height:5px;
    background-color:black;
    border-style: none;
    font-size: 0.1em
    z-index:1;
}

And the html:

<div class="progressBarEmpty" style="width:100px">
    <div class="progressBarGreen" style="width:40%" > </div>
    <div class="progressBarActual" style="width:80%"> </div>
</div>

(Just to be clear, the “progressBarActual” div should be 80% of the width of the “progressBarEmpty” div, not the “progressBarGreen”)

EDIT

Here’s a mockup of what I’m after.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Live Demo (updated)

    The only change from my last demo:

    Live Demo

    Add position: relative to div.progressBarEmpty?

    I’m not entirely sure what it’s supposed to look like, but it does now look vaguely like a Gantt chart.

    If this isn’t quite right (as I suspect is the case), it’s probably just a matter of adding a few more properties, so let me know what’s wrong with it.

    See:

    • 0