vue渐变进度条

本文使用iview，其他vue的UI库一样,稍作修改即可使用。

在线访问: https://run.iviewui.com/EHOwwV89

<template>
  <Progress :percent="100" :stroke-color="['#19be6b', '#ff3400']" :stroke-width="15" text-inside/>
  <Progress :percent="10" :stroke-color="getColor(10)" :stroke-width="15" text-inside/>
  <Progress :percent="20" :stroke-color="getColor(20)" :stroke-width="15" text-inside/>
  <Progress :percent="30" :stroke-color="getColor(30)" :stroke-width="15" text-inside/>
  <Progress :percent="40" :stroke-color="getColor(40)" :stroke-width="15" text-inside/>
  <Progress :percent="50" :stroke-color="getColor(50)" :stroke-width="15" text-inside/>
  <Progress :percent="60" :stroke-color="getColor(60)" :stroke-width="15" text-inside/>
  <Progress :percent="70" :stroke-color="getColor(70)" :stroke-width="15" text-inside/>
  <Progress :percent="80" :stroke-color="getColor(80)" :stroke-width="15" text-inside/>
  <Progress :percent="90" :stroke-color="getColor(90)" :stroke-width="15" text-inside/>
  <Progress :percent="100" :stroke-color="getColor(100)" :stroke-width="15" text-inside/>
</template>
<script>
  export default {
    data() {
      return {
        percent: 100,
      }
    },
    methods: {
      getColor(percent) {
        let colors = this.gradientColors('#19be6b', '#ff3400', 100, 1)
        return ['#19be6b', colors[percent - 1]]
      },
      // convert #hex notation to rgb array
      hexToRgb(hexColor) {
        return hexColor.length === 4 ? hexColor.substr(1).split('')
            .map(s => 0x11 * parseInt(s, 16)) :
          [hexColor.substr(1, 2), hexColor.substr(3, 2), hexColor.substr(5, 2)]
            .map(s => parseInt(s, 16))
      },
      // zero-pad 1 digit to 2
      pad(s) {
        return s.length === 1 ? '0' + s : s
      },
      // gradient colors
      gradientColors(start, end, steps, gamma) {
        let i, j, ms, me, output = [], so = []
        gamma = gamma || 1
        let normalize = function (channel) {
          return Math.pow(channel / 255, gamma)
        }
        start = this.hexToRgb(start).map(normalize)
        end = this.hexToRgb(end).map(normalize)
        for (i = 0; i < steps; i++) {
          ms = i / (steps - 1)
          me = 1 - ms
          for (j = 0; j < 3; j++) {
            so[j] = this.pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16))
          }
          output.push('#' + so.join(''))
        }
        return output
      }
    }
  }
</script>
<style lang="scss" scoped>
  .ivu-progress-inner-text {
    display: inherit;
    font-size: 10px;
  }
</style>