12月26, 2017

渐变的进度条记录

需求是这样的,有两种形态:

  • line
  • circle

alt

alt

本以为改改antd的css就可以了,事实上发现并不行。

现在比较常见的渐变有几种:

  • 纵向渐变
  • 斑马线平铺渐变

像这样的横线渐变(注意不是进度条,即30%做成渐变,而是下面整条是渐变的),反正我是没怎么见过,于是找视觉PK,结果PK不过她们,只能做呗。

我个人觉得api的部分可以参考antd的,所以就先把progress的代码拿过来,改成js的写法。

线性渐变

关于线性这一块,我一开始的想法是先将底设置成渐变,然后比如30%,那就做一个div,宽度为70%,背景为灰色,从右边开始平铺(当然从左边开始也行,然后旋转180度)

但测试会有这样的问题

alt

这个弧度明显不对,后来在网上查了有一些凹圆的实现,就是利用radial-gradient,无奈我在这方面的造诣太浅了,不怎么会用。(后来群里面的馍大有帮我实现了一个简单的demo)。

最终和视觉沟通,给整个渐变色进条度最外层加一个宽度,这样一来就无法做到自适应了。

代码就是:

<div class="灰色背景">
    <div style="width: 30%;overflow: hidden;" class="透明背景">
          <div class="整条渐变色背景,记得加宽度"></div>
    </div>
</div>

群里面的大漠也给了一个svg的方案,链接地址在这里

然而100%的时候,右边有点点小瑕疵,截图如下:

alt

不过也可以接受,馍大的方案如下:

<!doctype html>
<style type=“text/css”>
div {
  border-radius: 2000px;
  overflow: hidden;
  background: linear-gradient(to right, yellow, red); 
}
span {
  float: right;
  height: 100%;
}
span::before {
  content: “a”;
  text-indent: -999em;
  display: block;
  background: -webkit-radial-gradient(0px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 9px, #ccc 1px, #ccc 2000px);
  height: 100%;
}
</style>
<div style=“height: 20px;”><span style=“width:50%”></span></div>
<input />
<script>
var input = document.getElementsByTagName(‘input’)[0];
var div = document.getElementsByTagName(‘div’)[0];
var txt = “-webkit-radial-gradient(0px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) %spx, rgb(204, 204, 204) 1px, rgb(204, 204, 204) 2000px)”;
input.onchange = function() {
  var n = this.value | 0;
  if (!n) n = 20;
  document.styleSheets[0].cssRules[2].style.background =  txt.replace(/%s/,function(){return (n/2) | 0;});
  div.style.height = n + ‘px’;
}
</script>

环形渐变

因为涉及到svg,我只能摊手,所以在网上找了一个npm包:progress-circle-gradient

不过话说这文档写的有问题,为了维护方便,我直接将它的src下面的js文件拿过来,直接自己维护了。

这个渐变,基本能使用,它可能存在的问题是不像antd的circle提供的这么强大。

alt

上图是antd process的api,它可以指定进度条缺口位置及角度,那个插件指定不了。

然后它有一个问题是默认从左上角逆时针做渐变,当30%时,显示的截图如下:

alt

而我期望的结果是:

alt

所以这时候,简单粗暴的处理方式如下:

alt

这个方法也是群友告知我的,发现我在CSS3上真的比较low。。因为我一开始想到的是旋转180度,orz。

结语

给视觉看了一下实际效果,她们并不是太满意。

alt

她们的意思是这里应该是纯绿的。。

我表示很无奈,毕竟svg这一块不是太懂,也不能证明那个插件写的是否有问题。

因此明年有时间还是补一下css3和svg这两块知识体系吧。。

本文链接:www.my-fe.pub/post/gradient-progress-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。