CODEWITHSUNDEEP
htmlcss
user2588644
user2588644

Reputation: 37

HTML/CSS reverse direction progress bar

How do you program a reversed direction progress bar that aligns to the right and has text?

enter image description here

Here's my css thus far but it keeps displaying as if it is starting from the left. Originally I was coding it to transition(ease-out) but I could not find a way to have it start from the right and extend to the left.

Upvotes: 0

Views: 2609

Answers (3)

DACrosby
DACrosby

Reputation: 11460

On ul.skillbars li, add text-align:right;.

On ul.skillbars li:after and ul.skillbars-r li:after, change left to right.

Update your gradients as needed.

Example: http://codepen.io/anon/pen/hfcwB

Edit

I misread the question; thought you wanted all of the bars aligned right, my mistake!

To have them side by side, I'd recommend adding the following instead of using float(there's arguments for both, I just like not having to worry about clearing):

ul{
  display:inline-block;
}

Then on the two uls add:

width: 50%;
margin-left:-4px;

On ul.skillbars-r li:after, still change left to right.

There we go! http://codepen.io/anon/pen/BhvJI

Upvotes: 0

Oriol
Oriol

Reputation: 288470

DEMO: http://jsfiddle.net/fQtnb/1/

Use

HTML:

<ul class="skillbars l">
  <li class="eight"><span>P</span></li> 
  <li class="ten"><span>I</span></li> 
  <li class="nine"><span>I</span></li> 
  <li class="eight"><span>F</span></li> 
  <li class="nine"><span>D</span></li>
</ul>
<ul class="skillbars r">
  <li class="six"><span>A</span></li> 
  <li class="nine"><span>H</span></li> 
  <li class="six"><span>W</span></li> 
  <li class="seven"><span>M</span></li> 
  <li class="eight"><span>3</span></li> 
</ul>
<div class="clear"></div>

CSS:

.clear{
    clear:both;
}

#skills {
  position: relative;
  z-index: 300;
  padding-bottom: 60px;
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
}

ul.skillbars {
  padding: 0;
  width: 50%;
  float:left;
}

ul.skillbars li {
  position: relative;
  line-height: 2.188em;
  margin: .5em 0;
  padding: 0 .5em;
  position: relative;
  color: white;
  text-transform: uppercase;
}

ul.skillbars.r li {
  text-align: right;
}


ul.skillbars li span {
  position: relative;
  text-transform: uppercase;
  z-index: 300;
  font-size: 1em;
}

ul.skillbars li:after {
  position: absolute;
  top: 3px;
  bottom: 3px;
  content: '';
  background-color: #104000; /* Old browsers */
}

ul.skillbars.l li:after {
left: 3px;
background-image: -moz-linear-gradient(left,  #000000 0%, #104000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#104000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #000000 0%,#104000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #000000 0%,#104000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #000000 0%,#104000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #000000 0%,#104000 100%); /* W3C */

}

ul.skillbars.r li:after {
right: 3px;
background-image: -moz-linear-gradient(left,  #104000 0%, #000000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#104000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #104000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #104000 0%,#000000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #104000 0%,#000000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #104000 0%,#000000 100%); /* W3C */
}

ul.skillbars li.six:after {
  width: 60%;
}

ul.skillbars li.seven:after {
  width: 70%;
}

ul.skillbars li.eight:after {
  width: 80%;
}

ul.skillbars li.nine:after {
  width: 90%;
}

ul.skillbars li.ten:after {
  width: 95%;
}

Upvotes: 1

user2568107
user2568107

Reputation:

Use float: right; on the progress bar so that it starts on the right

Upvotes: 0

Related Questions