CODEWITHSUNDEEP
htmlcss
object json
object json

Reputation: 615

Creating the vertical progress bar with html and css3?

I made ​​a horizontal progress bar that does not have a problem with it

But the progress bar's vertical lines are not correct.

I put a picture of the problem.

jsfiddle.net/post98/juGXZ/1/

HTML

<body>
    <div class="progress-bar  horizontale">
        <div class="inner"><span>|||||||</span></div>
    </div>
    <div class="progress-bar verticale">
        <div class="inner"><span>___ ___ ___ ___ ___</span></div>
    </div>
</body>

CSS

body {
    background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}

.progress-bar.verticale {
    width: 24px;
    height: 300px;
    /*border: 1px solid #060707;*/
    margin: 10px auto;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 4px;
    transform: rotate(180deg);
    display: inline-block;
}


.progress-bar.horizontale {
    width: 300px;
    height: 24px;
    /*border: 1px solid #060707;*/
    margin:  auto;

    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 4px;
    display: inline-block;
}

.progress-bar.horizontale .inner {
    background: linear-gradient(#FFCC33, #CC9900);
    border-radius: 12px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
    height: 24px;
    width: 200px;
}

.progress-bar.horizontale .inner span {
    background: repeat scroll 0 0 #999999;
    position: absolute;
    font: bold  120px/40px sans-serif ;
    letter-spacing: -6px;
    height: 24px;
    opacity: 0.06;
    overflow: hidden;
    transform: skewX(-30deg);
}

.progress-bar.verticale .inner {
    background: linear-gradient(#FFCC33, #CC9900);
    border-radius: 12px;
    position: absolute;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
    height: 200px;
    width: 24px;
}

.progress-bar.verticale .inner span {
    background: repeat scroll 0 0 #999999;
    position: absolute;
    font: bold  20px/30px sans-serif ;
    letter-spacing: -6px;
    height: 200px;
    width: 20px;
    opacity: 0.06;
    overflow: hidden;
    transform: skewY(30deg);
}

Here the Picture

Upvotes: 1

Views: 2919

Answers (2)

user1577303
user1577303

Reputation:

You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀

A demo.

Edit: ASCII code of the character: 223 (Top half block).

Upvotes: 2

Rich
Rich

Reputation: 4170

You can thicken the lines like this:

  .progress-bar.verticale .inner span {
      background: repeat scroll 0 0 #999999;
      position: absolute;
      font: bold  120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar. 
      letter-spacing: -6px;
      height: 200px;
      width: 25px; //change width to fit width of div. 
      opacity: 0.06;
      overflow: hidden;
      transform: skewY(30deg);
      margin:0px 0px 0px 0px;
      bottom: 35px; //Position revision to justify font resizing. 
 }

Upvotes: 0

Related Questions