CODEWITHSUNDEEP
htmlcss
user2627741
user2627741

Reputation: 29

How to make the progress bar transit from right-to-left instead of left-to-right?

I tried to put a "float:right" in the .skill_item_colored_main_wrap part. but it became such a mess. I think it has something to do with -webkit-animation part. how can i modify it so it will transit from right to left?

.shortcode_skill {
	position:relative;
	overflow:hidden;
}

.shortcode_skill:before {
	position:absolute;
	top:0;
	left:27%;
	margin:15px 0 0;
	width:1px;
	height:95%;
	background:rgba(0, 0, 0, .1);
	content:"";
}

.skill_item {
	overflow:hidden;
	width:100%;
}

.skill_item > span {
	float:left;
	padding:24px 4.7% 0 0;
	width:25%;
	text-align:right;
}

.skill_item_colored_main_wrap {
	float:left;
	padding:15px 0 5px;
	width:70%;
}

.skill_item_colored_wrap {
	position:relative;
	height:33px;
}

.skill_item_colored {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-animation:move 2s linear .1s normal none 1 ;
	-moz-animation:move 2s linear .1s normal none 1 ;
	-ms-animation:move 2s linear .1s normal none 1 ;
	-o-animation:move 2s linear .1s normal none 1 ;
	animation:move 2s linear .1s normal none 1 ;
}

@-webkit-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-ms-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-o-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@keyframes move {
	from {width:0;}
	to {width:100%;}
}

.skill_item_colored_wrap > span {
	position:relative;
	display:block;
}

.skill_item_colored > span {
	display:block;
	padding:8px 10px;
	text-align:right;
	-webkit-animation:opacity 2.5s linear .1s normal none 1 ;
	-moz-animation:opacity 2.5s linear .1s normal none 1 ;
	-ms-animation:opacity 2.5s linear .1s normal none 1 ;
	-o-animation:opacity 2.5s linear .1s normal none 1 ;
	animation:opacity 2.5s linear .1s normal none 1 ;
}

@-webkit-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-o-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}
<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
			<span>95%</span>
		    </div>
			</div>
			</div>
			</div>

Upvotes: 3

Views: 2982

Answers (2)

Jean-Fran&#231;ois Savard
Jean-Fran&#231;ois Savard

Reputation: 21004

Here an alternative,

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width:95%%;"></div>
</div>

And add this to your CSS

.progress-middle .progress-bar {
    position: relative;
}
.progress-right .progress-bar {
    float: right;
}

What we did here is make sure the position is relative then float the progress-bar to right instead of left.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241078

A quick and easy way to do this would be to rotate the parent element 180deg and then rotate the child element negative -180deg.

Assuming you want the text aligned to the left, I added text-align: left. Omit that if you want it aligned to the right.

.skill_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}


.skill_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}

.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item {
  overflow: hidden;
  width: 100%;
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
  text-align: right;
}
.skill_item_colored_main_wrap {
  float: left;
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>

As an alternative, you could also set direction: rtl on the .skill_item element, and then set the .skill_item_colored_main_wrap element's display to inline-block and remove float: left:

.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}


.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}
.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
}
.skill_item_colored_main_wrap {
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Related Questions