在Java脚本和CSS中构建带有圆角和阴影的半圆进度栏 [英] build semi circle progress bar with round corners and shadow in java script and CSS

问题描述

我搜索了很多东西，却找不到任何东西。我想制作一个带有圆角的进度条。进度条需要具有阴影。到目前为止，我所做的只是在这里：

  $（。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}，{时长：3000，缓动： swing，步骤：function（p）{bar.css（{transform： rotate（  +（45+（p * 1.8））+ deg）}）; val.text（p | 0）;}}）;}）;  

< pre class = snippet-code-css lang-css prettyprint-override> body {background-color：＃3F63D3; } .progress-bar {位置：相对；边距：4px;向左飘浮;文本对齐：居中；}。barOverflow {位置：相对；溢出：隐藏；宽度：150像素；高度：70px； margin-bottom：-14px;}。bar {position：absolute;最高：0;左：0；宽度：150像素；高度：150px；边界半径：50％；框大小：border-box；边框：15px纯灰色；边框底部颜色：白色； 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知之甚少。任何答案都将不胜感激。

解决方案

@jaromanda用于学习SVG的建议。

是的，从边界半径很难实现。所以我调查了SVG，发现它非常方便。这是我的代码段：

  // progressbar.js@1.0.0版本已使用//文件：http://progressbarjs.readthedocs.org/en/1.0.0/var bar = new ProgressBar.SemiCircle（container，{strokeWidth：10，color：'red'，TrailColor：'#eee'， TrailWidth：10，缓动：'easeInOut'，持续时间：1400，svgStyle：null，文本：{value：''，alignToBottom：false}，//为所有动画调用设置默认的step函数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）; //从0.0到1.0的数字 

  #container {width： 200px;高度：100像素；} svg {高度：120像素；宽度：200像素；填充：无；中风：红色；笔划宽度：10；笔画线帽：圆形； -webkit-filter：drop-shadow（-3px -2px 5px gray）;过滤器：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>  

I searched a lot and finding nothing on it. I want to make a progress bar with round corners.progress bar need to have shadow. All I did as of now is here :

$(".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>

I want to make corners round and having shadow. below given image represent what actually i want. Shadow is missing because i don't know to draw. :

I have tried Progressbar.js also, but I don't have much knowledge about SVG. Any answer would be appreciated.

解决方案

@jaromanda for suggestion of learning SVG.

Yes is looks very hard to achieve from border-radius. So i looked into SVG and find it pretty handy. Here is my snippet:

// 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>

这篇关于在Java脚本和CSS中构建带有圆角和阴影的半圆进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！