Question

我有以下进度条，但我希望它垂直而不是水平。换句话说，我想将它翻转90度并将文本翻转90度

Progress Bar

请参阅下面的代码，以及我的代码笔： http://codepen.io/chriscruz/pen/jPGMzW

如何旋转此图表以及文本值？

HTML

<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="50">
  <div class="progress-bar-state progress">50</div>
</div>

CSS

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap:before {
  content: '66';
  position: absolute;
  left: 5px;
  line-height: 50px;
}
.progress-wrap:after {
  content: '$250,000';
  right: 5px;
  position: absolute;
  line-height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar-state {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
  line-height: 50px;
}

的Javascript

// on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar-state').stop().animate({
            left: progressTotal
        }, animationLength);
    }

Answer 1

CSS

   .progress {
      height: 500px;
      width: 50px;
    }
    .progress-wrap:before {
      content: '66';
      position: absolute;
      top: 5px;
      line-height: 50px;
    }
    .progress-wrap:after {
      content: '$250,000';
      bottom: 5px;
      position: absolute;
      line-height: 50px;
    }
    .progress-wrap {
      background: #f80;
      margin: 20px 0;
      overflow: hidden;
      position: relative;
    }
    .progress-wrap .progress-bar-state {
      background: #ddd;
      left: 0;
      position: absolute;
      top: 0;
      line-height: 50px;
    }

的Javascript

moveProgressBar();
// on browser resize...
$(window).resize(function() {
    moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
    var getProgressWrapWidth = $('.progress-wrap').height();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = 2500;

    // on page load, animate percentage bar to data percentage length
    // .stop() used to prevent animation queueing
    $('.progress-bar-state').stop().animate({
        top: progressTotal
    }, animationLength);
}

几乎只是将高度和宽度以及带有上衣的权利和左下角的权利切换。

Answer 2

您可以使用此css规则旋转文本或其他任何内容。

  transform: rotate(90deg);  /* this is the rotation */

使用-90deg以其他方式旋转。

如何将图表旋转90度，包括文本值？

2 个答案: