在正文的第一句加入“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

前言

进度条在再等待时候来缓解等待的失落感，减少使用者的焦躁，达到安慰用户的目的。其中赏心悦目的进度条效果更加，一个有趣的进度条甚至可以让用户愉悦的等待。本文只是众多实现方式之一，更加有趣的进度条还是要靠大家。

代码

正文

1.搭建框架

主要涉及的控件一个开始按钮，触发进度条开始，然后就是div方便后面进度条动态加载，最后就是进度条百分号显示。

<input type="button" value="开始" id="start"/>
<div class="outer">
  <div id="inner"></div><span id="pro_num"></span>
</div>

2.简单装饰

将两个div简单装饰一下，画出进度条轮廓和设置进度条初始的参数。

.outer{
  width:250px;
  height:10px;
  border:1px solid gray;
  border-radius:5px;
  margin-top:10px;
  background: grey;
  }
#inner{
  width:0px;
  height:10px;
  border-radius:5px;
  background:background:rgb(255, 0, 0);;
  }

3.控制实现

首先查询了一下彩虹色rgb的变化如下

	R	G	B
红	255	0	0
橙	255	165	0
黄	255	255	0
绿	0	255	0
青	0	255	255
蓝	0	0	255
紫	150	0	255

画图分析颜色变化

七种主要颜色分为6段就可以得出每一段变化的函数

if(barWidth<=40){
        r_c = 255
        g_c = Math.ceil(165/40*barWidth)
        b_c = 0
      }else if(40<barWidth && barWidth<=80){
        r_c = 255
        g_c = Math.ceil(90/40*barWidth+40)
        b_c = 0
      }else if(80<barWidth && barWidth<=120){
        r_c = Math.ceil(765-255/40*barWidth)
        g_c = 255
        b_c = 0
      }else if(120<barWidth && barWidth<=160){
        r_c = 0
        g_c = 255
        b_c = Math.ceil(255/40*barWidth-765)
      }else if(160<barWidth && barWidth<=200){
        r_c = 0
        g_c = Math.ceil(1275-255/40*barWidth)
        b_c = 255
      }else{
        r_c = Math.ceil(150/40*barWidth-750)
        g_c = 0
        b_c = 255
      }

最后将获得的rgb值设置到对应的内部进度条。对于百分比的计算则要简单的多

Math.floor(barWidth / 240 * 100)

当然这些包含在周期函数setInterval。当内部进度条到达最右端后停止

总结

本文只是抛砖引玉，简单的实现进度条颜色的随机渐变，远远达不到赏析悦目，希望在后续学习更多之后将其优化。