CODEWITHSUNDEEP
htmltwitter-bootstrapcssrotation
Rob
Rob

Reputation: 7217

Bootstrap Css - vertically aligned progress bar with label

I have been given a screen design for a website with a vertically rotated component that I am trying to write the css and html for. The design is as follows:

enter image description here

As I am using bootstrap, I decided to customise the existing .progressbar by rotating it by 90 degrees in order to fit the design.

My html is as follows:

<div class="progress verticalrotate">
   <div class="progress-bar green" role="progressbar" style="width:40%"></div>
   <div class="progress-bar amber" role="progressbar" style="width:10%"></div>
   <div class="progress-bar red" role="progressbar" style="width:20%"></div>
</div>

I created the following css:

.verticalrotate{transform: rotate(-90deg);transform-origin: right, top;-ms-transform: rotate(-90deg);-ms-transform-origin:right, top;-webkit-transform: rotate(-90deg);-webkit-transform-origin:right, top}
.amber{background-color:#ffb800}
.green{background-color:#00ae3f}
.red{background-color:#ff2635}

I see the screen as potentially laid out in the following way:

enter image description here

I can't seem to get the progress bar full height (tried hard coding width to 500px but doesn't work) and aligned in the grid correctly (or responsively changing size with the window size changing). Anyone got any ideas what I'm doing wrong? :( Any pointers greatly appreciated!

Upvotes: 1

Views: 3237

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

If I understand you correctly, the trick is to use width: 100vh; for .progress. In this way, the width of .progress will be the window's height so when you rotate it, it will take the full height.

Demo

html, body {
  height:100%;
  position:relative;
}

.verticalrotate {
  transform: rotate(-90deg);
  transform-origin: right top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin:right top;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin:right top
}

.progress {
  width: 100vh;  
}

.amber {
  background-color:#ffb800 !important;
}

.green {
  background-color:#00ae3f !important;
}

.red {
  background-color:#ff2635 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress verticalrotate">
   <div class="progress-bar green" role="progressbar" style="width:40%"></div>
   <div class="progress-bar amber" role="progressbar" style="width:10%"></div>
   <div class="progress-bar red" role="progressbar" style="width:20%"></div>
</div>

Upvotes: 1

Related Questions