I have created horizontal progress bars, but how to create vertical progress bar? Here's my code, result is vertical progress bar, but they don't look like Bootstrap progress bars. I want to show percent, to be vertical and their height of filling to be the result of query. They look like this: http://prntscr.com/6l39cg It doesn't look good. I want to look like this: progress-bar And how to change height to be not 100%, but from 1 to 5. I've tried aria-valuemax="5" but it doesn't work. This is my code:
<div id="tab2" class="mtab_content">
<p>
<?php foreach ($result_question1 as $row) {
echo "$row->question";
$percent=round("$row->answer",2);
?>
<div class="vertical-progressbar">
<div class="progress-bar progress-bar-success" role="progressbar"
style="width:
<?php echo round($percent,2); ?>%;">
</div>
<?php echo round($percent,2); } ?> %
</div>
</div>My CSS is:
.vertical-progressbar{
width: 300px;
height: 40%;
float: left;
margin-right: 20px;
}I found that solution, but height doesn't change in dependence of result of query:
.progress-vertical {
width: 20px;
height: 200px !important;
position: relative;
}
.progress-vertical .bar {
width: 100% !important;
position: absolute;
bottom: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}<?php foreach ($result_question1 as $row) {
//echo "$row->question";
$percent=round("$row->answer",2);
echo "<br/>";
?>
<div class="progress progress-vertical progress-bar-success">
<div class="bar" style="height: <?php echo round($percent,2); ?>%;"></div>
<?php echo round($percent,2); ?> %
</div>How about using a CSS transform to rotate it 90 degrees.
.vertical-progressbar{
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다