html - 如何使用 CSS 翻转进度条从哪一侧开始

Question

我在网上找到了一些进度条代码，它使用 div 类，然后使用 CSS 对其进行样式设置、填充、着色和圆化边缘。好吧，它最初是一个水平条，我需要一个垂直条，所以我把它翻转过来。改变了一点边缘圆 Angular ，现在有一个垂直的。唯一的问题是，当在 div 类中输入您希望它充满的百分比时，它会从栏的顶部而不是底部加载。我已尽我所能让它翻转，但没有运气。如果您可以解决此问题或有任何有用的建议，请告诉我。提前致谢!我将首先发布 div 类，然后再发布样式。

<div class="meter red">
  <span style="height: 20%"></span>
</div>

现在是样式

.meter { 
  height: 30vh;
  width: 50px;
  position: relative;
  float: right;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
  box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
 }

.meter > span {
  display: block;
  height: 100%;
     -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
         -moz-border-radius-topright: 20px;
      -moz-border-radius-bottomright: 20px;
             border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
      -webkit-border-top-left-radius: 8px;
   -webkit-border-bottom-left-radius: 8px;
          -moz-border-radius-topleft: 8px;
       -moz-border-radius-bottomleft: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: -webkit-gradient(
    linear,
    center right,
    center right,
    color-stop(0, rgb(43,194,83)),
    color-stop(1, rgb(84,240,84))
    );
  background-image: -webkit-linear-gradient(
    center right,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
    );
  background-image: -moz-linear-gradient(
    center right,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
    );
  background-image: -ms-linear-gradient(
    center right,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
    );
  background-image: -o-linear-gradient(
    center right,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
    );
  -webkit-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  -moz-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.red > span {
  background-color: #f0a3a3;
  background-image: -webkit-gradient(linear,
    left top,left bottom,color-stop(0.#f0a3a3),color-stop(1, #f42323));
  background-image: -webkit-linear-gradient(right, #f0a3a3, #f42323);
  background-image: -moz-linear-gradient(right, #f0a3a3, #f42323);
  background-image: -ms-linear-gradient(right, #f0a3a3, #f42323);
  background-image: -o-linear-gradient(right, #f0a3a3, #f42323);
}

.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: 
    -webkit-gradient(linear, 0 0, 100% 100%, 
      color-stop(.25, rgba(255, 255, 255, .2)), 
      color-stop(.25, transparent), color-stop(.5, transparent), 
      color-stop(.5, rgba(255, 255, 255, .2)), 
      color-stop(.75, rgba(255, 255, 255, .2)), 
      color-stop(.75, transparent), to(transparent)
    );
  background-image: 
    -webkit-linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
  background-image: 
    -moz-linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
  background-image: 
    -ms-linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
  background-image: 
    -o-linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
  z-index: 1;
  -webkit-background-size: 50px 50px;
  -moz-background-size:    50px 50px;
  background-size:         50px 50px;
  -webkit-animation: move 2s linear infinite;
     -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
         -moz-border-radius-topright: 8px;
      -moz-border-radius-bottomright: 8px;
             border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
      -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
          -moz-border-radius-topleft: 20px;
       -moz-border-radius-bottomleft: 20px;
              border-top-left-radius: 20px;
           border-bottom-left-radius: 20px;
  overflow: hidden;
}

Answer 1

将顶部属性设置为 100 - height。示例:

<div class="meter red">
    <span style="height: 20%; top: 80%;"></span>
</div>
<div class="meter red">
    <span style="height: 60%; top: 40%;"></span>
</div>

编辑:我希望你不介意，但我冒昧地修改了你的进度条。我已经删除了“vh”单位大小，因为它没有得到广泛支持(尤其是在 IE 中)并且只使用像素。此外，我已将您的子元素的定位更改为绝对定位。这允许它放置在容器内的任何位置(见底部)。

这意味着更新高度现在将仅在一个属性中正确地从底部到顶部。在此处查看修改后的版本: http://jsbin.com/kiseyocife/1/edit?html,output

您提到您想以编程方式更新您的进度，下面是操作方法:

document.getElementById("progress-load").style.height = nrVal +"%"

在这种情况下，nrVal 可以是 0-100，但如果超出范围，它也不会中断。