Hi all,
I’m trying to use vertical native progress bars (rotated -90 dgs).
Every element within the progress bar rotates along the parent element. But I want to single the text within the label out to stay horizontal. I’ve tried, to no avail, every piece of css code, that I know of, to rotate the text.
Any1 who has some tips on how to rotate the text horizontally?
Here an image of my progress bars look at the moment:
What I’m trying to achieve:
Current CSS:
.inner-progressbar {
padding: 0px 0px !important;
border-radius: 0px 50px 50px 0px;
transform: rotateY: (90deg);}.progressbar-ProgressBar {
overflow: visible !important;
text-align: right !important;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}.progressbar-label {
position: relative !important;top: 0px !important;
background-color: #FFFFFF !important;
color: black !important;
height: 50px;
width: 50px;
padding: 20px;
left: 0px !important;
border-radius: 150px;
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;}
.progressbar-label:after,
.progressbar-label:after {direction: rtl ;position: absolute;
top: 100%;
margin-left: 0px;
content: ‘’;
width: 0px;
height: 0;}