在java脚本和CSS中使用圆角和阴影构建半圆形进度条

Question

我搜索了很多但没有找到任何内容。我想用圆角创建一个进度条。进度条需要阴影。我现在所做的就是：

$(".progress-bar").each(function(){
  
  var bar = $(this).find(".bar");
  var val = $(this).find("span");
  var per = parseInt( val.text(), 10);

  $({p:0}).animate({p:per}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)"
      });
      val.text(p|0);
    }
  });
});

body{
  background-color:#3F63D3;  
}

.progress-bar{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ 
  position: relative;
  overflow: hidden; 
  width: 150px; height: 70px; 
  margin-bottom: -14px;
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 150px; height: 150px; 
  border-radius: 50%;
  box-sizing: border-box;
  border: 15px solid gray;       
  border-bottom-color: white; 
  border-right-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  <span>100</span>%
</div>

我想让角落并拥有阴影。下图给出了我想要的实际内容。阴影遗失，因为我不知道画画。 ：

我也试过Progressbar.js，但我对SVG知之甚少。任何答案都将不胜感激。

Answer 1

  

@jaromanda建议学习SVG。

从边界半径看起来非常难以实现。所以我查看了SVG并发现它非常方便。这是我的片段：

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 10,
  color: 'red',
  trailColor: '#eee',
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value+"%");
    }

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(0.45);  // Number from 0.0 to 1.0

#container {
  width: 200px;
  height: 100px;
}

svg {
  height: 120px;
  width: 200px;
  fill: none;
  stroke: red;
  stroke-width: 10;
  stroke-linecap: round;
  -webkit-filter: drop-shadow( -3px -2px 5px gray );
  filter: drop-shadow( -3px -2px 5px gray );
  }

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

Answer 2

我想建议一些愚蠢但快速的解决方案，因为您已经使用 position：absolute 。您可以在动画开始时为圆圈添加背景颜色。

<强> HTML：

<div class="progress-bar">
    <div class="left"></div>
    <div class="right"><div class="back"></div></div>
    <div class="barOverflow">
        <div class="bar"></div>
    </div>
    <span>0</span>%
</div>

<强>的CSS：

/** all your css here **/
body{
    background-color:#3F63D3;  
}

.progress-bar{
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;
}
.barOverflow{ 
    position: relative;
    overflow: hidden; 
    width: 150px; height: 70px; 
    margin-bottom: -14px;
}
.bar{
    position: absolute;
    top: 0; left: 0;
    width: 150px; height: 150px; 
    border-radius: 50%;
    box-sizing: border-box;
    border: 15px solid gray;       
    border-bottom-color: white; 
    border-right-color: white;
    transform: rotate(45deg);
}
.progress-bar > .left {
    position: absolute;
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 0;
    bottom: -4px;
    overflow: hidden;
}
.progress-bar > .right {
    position: absolute;
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    right: 0;
    bottom: -4px;
    overflow: hidden;
}
.back {
    width: 15px;
    height: 15px;
    background: gray;
    position: absolute;
}

<强> jquery的：

$(".progress-bar").each(function(){
    var bar = $(this).find(".bar");
    var val = $(this).find("span");
    var per = parseInt( val.text(), 10);
    var $right = $('.right');
    var $back = $('.back');

$({p:0}).animate({p:per}, {
    duration: 3000,
    step: function(p) {
        bar.css({
            transform: "rotate("+ (45+(p*1.8)) +"deg)"
        });
    val.text(p|0);
    }
}).delay( 200 );

if (per == 100) {
    $back.delay( 2600 ).animate({'top': '18px'}, 200 );
}

if (per == 0) {
    $('.left').css('background', 'gray');
}
});

https://jsfiddle.net/y86qs0a9/7/