1

我想以垂直格式使用 twitter 引导进度条，即 +90Degrees。

4

3 回答 3

6

您可以在 .progress 元素上使用 transform: rotate(-90deg) - 对我有用。http://codepen.io/mcg73/pen/eCwvu/

标记：

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="90"></div>
</div>

旋转元素的CSS：

.progress{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transform: rotate(-90deg);
}
于 2014-09-11T16:32:06.177 回答
0

尝试这个：

CSS

.progress.vertical {
    position: relative;
    width: 20px;
    min-height: 240px;
    float: left;
    margin-right: 20px;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: none;
}

HTML

<div class="progress vertical">
  <div class="bar bar-success" style="height: 70%;width:100%"></div>
  <div class="bar bar-warning" style="height: 20%;width:100%"></div>
  <div class="bar bar-danger" style="height: 10%;width:100%"></div>
</div>
于 2013-07-19T14:09:08.357 回答
-1

最后我想通了！

将 twitter 引导进度条和动画从水平位置更改为垂直位置

HTML

<div class="progress progress-vertical progress-striped active progress-success">
    <div class="bar" style="width: 40px;"></div>
</div>
<div class="progress progress-vertical progress-striped active progress-danger">
    <div class="bar" style="width: 40px;"></div>
</div>

CSS

.progress-vertical {
position: relative;
width: 40px;
min-height: 240px;
float: left;
margin-right: 20px; }

修改 Twitter bootstrap.css 文件，如下所示：

        @-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 40px;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 40px;
  }
  to {
    background-position: 0 0;
  }
}

将 background-repeat 更改为repeat-y并将度数更改为0deg。所以，动画垂直渲染

    .progress-danger .bar,
    .progress .bar-danger {
      background-repeat: repeat-y;
      }

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background-color: #ee5f5b;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

与其他进度类型（如成功、警告等）相同，并实现垂直 twitter 引导进度条和动画......！

对于您有任何疑问，让我知道我可以帮助您..！

如果有人有比这更优化的解决方案，请告诉我..！

不要忘记支持这个解决方案..！

享受！

于 2013-07-20T04:22:13.163 回答