首页 文章

带附加元素的进度条[关闭]

提问于
浏览 次
0

我必须在网页中构建一种进度/计数器/计量器栏 .
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/

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

javascript jquery css html5

2 回答

  • 1

    我正在寻找一个好网站，我找到了http://getbootstrap.com/components/#progress . 这个网站可能会派上用场 . 试试 <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>

    回复于
  • 0

    我在jsfiddle上创建了一个粗略的进度条 . 它非常简单，使用从JSON通过ajax获得的日期并做一些数学运算而不是将它们添加到元素中 . 使用一些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/

    EDIT: 摆弄基本造型和动画 . 我还添加了可用时间栏，我之前只看过泡泡 . http://jsfiddle.net/5jnn6sqj/1/

    回复于

相关问题