Vertical progressbar with data-procentage and CSS not displayed correctly

Question

I try to create a vertical progressbar by using the data-procentage-tag. So far I have it almost done, the only issue is that the progressbar's are not aligned/even to each other and I simply dont know why.

So, this is what I got so far:

The HTML:

    ul li {
       float: left;
       list-style: none;
       margin:0 40px;
    }

    ul li a {
       text-decoration:none;
    }

    .progressbar {
       background:black;
       border-radius: 0 3px 3px 0;
       height: 30px;
       margin: 0px 0 0 0px;
       -webkit-transform: rotate(-90deg);
    }

    .title {
       color: black;
       font: 12px 'Arial';
    }

    .progressbar2 {
       border-radius: 0 3px 3px 0;
       height: 30px;
       margin: 0px 0 0 0px;
    }

    .progressbar2:after {
       content: attr(data-procentage) '%';
       color: black;
       font: 14px 'Arial';
    }

<div id="progress">
      <ul>
        <li>
            <div class="progressbar2" data-procentage="53.40"></div>
            <div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
            <a href="#"><span class="title">New York</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="13.25"></div>
            <div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
            <a href="#"><span class="title">Los Angeles</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="10.37"></div>
            <div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
            <a href="#"><span class="title">Washington D.C.</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="22.98"></div>
            <div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
            <a href="#"><span class="title">San Francisco</span></a>
        </li>
      </ul>
    </div>

Here is a fiddle http://jsfiddle.net/mvqg3d0n/

So, can anyone help me out? I would really appreciate it

Answer 1

Use this css in your progressbar. This will change the rotation origin point to the bottom left corner, thus you have to move it 30px to the right with the translate.

-webkit-transform-origin: 0% 100%;
-webkit-transform: translate(30px,0px) rotate(-90deg);

Dont forget to add the unprefixed version for non-webkit browsers (like firefox).

transform-origin: 0% 100%;
transform: translate(30px,0px) rotate(-90deg);

Also make sure that your li items all have the same width so the bar size is correct.

I'm not sure though if you know about the meaning of the data- attribute. It doesn't set the width of the bar, you can just use it like in your .progressbar2 class to store information that is displayed via css content or used by javascript. No need for it in the .progressbar class (unless you use it somewhere else).

Answer 2

You need to set the list items to a fixed width. Right now the list elements are different widths depending on the text. This is skewing the overall width of the percentage bars:

ul li {
    float: left;
    list-style: none;
    margin:0 40px;
    width: 200px;
}

I've used 200px as an example. Naturally you can set your own size. If you want them all aligned to the left, just set them as 100%:

ul li {
    float: left;
    list-style: none;
    margin:0 40px;
    width: 100%;
}

Answer 3

ul li {
  display: inline-block;
  list-style: none;
  margin: 0 40px;
  text-align: center;
}
ul li a {
  text-decoration: none;
  display: block;
}
.progressbar {
  background: black;
  border-radius: 0 3px 3px 0;
  height: 30px;
  margin: 0px 0 0 0px;
  -webkit-transform: rotate(-90deg);
  display: inline-block;
}
.title {
  color: black;
  font: 12px'Arial';
}
.progressbar2 {
  border-radius: 0 3px 3px 0;
  height: 30px;
  margin: 0px 0 0 0px;
}
.progressbar2:after {
  content: attr(data-procentage)'%';
  color: black;
  font: 14px'Arial';
}

<div id="progress">
  <ul>
    <li>
      <div class="progressbar2" data-procentage="53.40"></div>
      <div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
      <a href="#"><span class="title">New York</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="13.25"></div>
      <div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
      <a href="#"><span class="title">Los Angeles</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="10.37"></div>
      <div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
      <a href="#"><span class="title">Washington D.C.</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="22.98"></div>
      <div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
      <a href="#"><span class="title">San Francisco</span></a>
    </li>
  </ul>
</div>