水平条分析

Question

我想根据下面的图片将可视进度条添加到网站上。我通过嵌入图表或使用CS来搜索一个简单的方法来做这样的事情，结果很差。

我想手动编码，因为我需要更新值。对于任何想法，我都会非常感激！

非常感谢

Answer 1

你可以使用一个绝对定位的元素：

更改amount div的宽度值将改变进度。

.bar{
  height:30px;
  width:200px;
  margin:5px;
  border:2px solid transparent;
  position:relative;
  box-shadow: 0 0 0 5px purple;
  display:inline-block;
  vertical-align:middle;
  }

.amount{
  position:absolute;
  top:0;
  height:100%;
  width:0%; /*change this to be your percentage*/
  left:0;
  background:purple;
  transition:all 0.6s;
  }

/*to show how percentage alters this*/
.bar:hover .amount{
  width:100%;
  }

Hover the bar <div class="bar"><div class="amount"></div>
</div>

<强>更新

使用框阴影和透明边框可让您在进度条周围显示“填充”

Answer 2

以下内容将获得此结果：

<div class="text">Example Text</div>
<div class="container">
    <div class="bar"></div>
</div>

CSS：

.container{
    border:1px solid gray;
    height:8px;
    width:200px;
    padding:1px;
    display: inline-block;
}
.bar{
    background-color: purple;
    width:50%;  /*change this for progress*/
    height: 100%;
}
.text{
    display:inline-block;
}

此样式将使其看起来与您的示例相同。然后，您可以通过添加容器类的css来定位分析栏。

您可以使用以下方法动态更改JavaScript / jQuery的进度：

$('.bar').css('width', '76%');

其中76％符合您所需的任何％值。