如何用html css javascript制作进度条答案

【问题标题】：How to make the progress bar with html css javascript如何用html css javascript制作进度条
【发布时间】：2016-07-18 00:48:35
【问题描述】：

进度条的制作方法如下图

【问题讨论】：

可能正在使用transform: scale()？
“制作”是什么意思？重新创建图像？

标签： javascript jquery html css

【解决方案1】：

我认为最简单的方法是使用类似的东西：

css:

.progress
{
    position:relative;
    width: 100px;
    height: 100px;
}

.progressUnder
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('backgroundUnder.jpg');
}

.progressOver
{
    position: absolute;
    width: 100%;
    height: 0%;
    background-image: url('backgroundOver.jpg');
}

.progressPercent
{
    position:absolute;
    top: 40px;
    width: 100%;
    text-align: center;
}

和html：

<div class='progress'>
  <div class='progressUnder'/>
  <div class='progressOver' />
  <div class='progressPercent'>0%</div>
</div>

然后使用 javascript 为 div.progressOver 的百分比高度以及 .progressPercent 计数器设置动画。

【讨论】：

【解决方案2】：

我认为你需要使用动画。正如分子所说。您需要使用该颜色的高度。我想你知道一个正常的工作原理。首先尝试创建一个圆圈，使用分子解释的高度，然后你需要使圆圈的内部透明/不需要。完成后，高度将显示在圆圈中。你是怎么做的，我自己从来没有做过，因为我不使用自定义加载栏。

【讨论】：