Question

我必须在网页中构建一种进度/计数器/计量器栏。 Bar

基本上我将从JSON获取数据（总小时数，在这种情况下为500小时，可用小时数，在示例中为400小时）并相应地加载条。

我已经尝试调整jqueryUI和bootstrap进度条，但是在实现可用时间的圆圈时我遇到了困难。

使用bootstrap结构

<div class="progress">
  <div id="progressbar" class="progress-bar" role="progressbar" aria-valuemin="0">
    <span id="pProgress"></span>
  </div>
  <div id="circleProgress" class="progress-bar transBar" role="progressbar">
    <span id="pCircle"></span>
  </div>
</div>

由于bootstrap可以堆叠条形，我有一个ideia，而不是第二个条形，它可能是圆形，所以它会跟随进度条，但由于进度div有一个高度，圆圈会被切断。尝试绝对的位置，但没有在哪里。

还尝试将圆放在第二个div上，与class =“progress”平行，但无法找到计算进度条位置的方法。

所以我正在寻找任何提示，解决方案或地点来找到解决问题的解决方案。

修改的很抱歉缺乏细节，做了一个小提琴 - http://jsfiddle.net/hmt0L07r/1/

我真的很擅长使用小提琴，所以我不确定如何添加我用于圆圈的图像，但基本上它只显示浅灰色条内圆圈的顶部。

Answer 1

我在jsfiddle上创建了一个粗略的进度条。它非常简单，使用通过ajax从JSON获得的日期并做一些数学运算而不是将它们添加到元素中。使用一些css3，您还可以为整个条形图设置动画。

var reachedh = 233,
    totalh = 500,
    availableh = 400,
    reachedhPercent = (reachedh / totalh)*100,
    availablehPercent = (availableh / totalh)*100;


$('#pProgress').css({'width':reachedhPercent+'%'});
$('#availableh').css({'left':availablehPercent+'%'});
$('#availableh').text(availableh+'h');

http://jsfiddle.net/5jnn6sqj/

修改摆弄基本的造型和动画。另外我添加了可用时间栏，我刚才看到了泡泡。 http://jsfiddle.net/5jnn6sqj/1/

Answer 2

我正在寻找一个好的网站，我找到了http://getbootstrap.com/components/#progress。这个网站可能会派上用场。试着做 variables

进度条添加元素

2 个答案: