【Vue】条纹进度条

一、效果演示及使用

 作为组件引入到项目（引入地址修改为自己实际的存放地址），注册到components

import stripeloading from "@/components/LSUI/loading/stripeloading";

components: {

    stripeloading

  },

 使用组件

      <stripeloading
        :width="300"
        :height="40"
        :process="60"
        process-color1="pink"
        process-color2="white"
        :stripe-spacing="50"
        :process-speed="5"
        :stripe-speed="5"
      />

通过对提供的参数修改，可以一定程度地自定义进度条样式

      <stripeloading
        :width="400"
        :height="100"
        :process="process"
        process-color1="orange"
        process-color2="white"
        :stripe-spacing="80"
        :process-speed="8"
        :stripe-speed="10"
      />

 提供使用的参数如下

props: {
    //进度条宽度
    width: {
      type: Number,
      default: 300,
    },
    //进度条高度
    height: {
      type: Number,
      default: 40,
    },
    //进度(1-100)
    process: {
      type: Number,
      default: 0,
    },
    //进度条颜色1
    processColor1: {
      type: String,
      default: "pink",
    },
    //进度条颜色2
    processColor2: {
      type: String,
      default: "white",
    },
    //条纹间距
    stripeSpacing: {
      type: Number,
      default: 50,
    },
    //进度条移动速度
    processSpeed: {
      type: Number,
      default: 5,
    },
    //条纹移动速度
    stripeSpeed: {
      type: Number,
      default: 5,
    },
  },

二、组件源码

<!--LSUI>条纹进度条-->
<template>
  <div>
    <div
      :style="{
        width: `${bdW}px`,
        height: `${bdH}px`,
        border: `${bdL}px solid ${bdColor}`,
        borderRadius: `${bdBorderRadius}px`,
        background: bdbgColor,
      }"
      class="border"
    >
      <div
        :style="{
          width: `${contentW}%`,
          height: '100%',
          borderRadius: `${contentBorderRadius}px`,
          transition: `${processMoveTime}s`,
          paddingLeft: `-${bdL + 10}px`,
        }"
        class="content"
      >
        <div
          :style="{
            width: `${contentInW}px`,
            height: '100%',
            background: contentColorGroup,
            backgroundSize: `${contentSpacing}px ${contentSpacing}px`,
            transform: `translate(-${contentInW / 3}px, 0)`,
            animationDuration: `${processBgMoveTime}s`,
          }"
          class="content_in"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "stripeloading",
  props: {
    //进度条宽度
    width: {
      type: Number,
      default: 300,
    },
    //进度条高度
    height: {
      type: Number,
      default: 40,
    },
    //进度(1-100)
    process: {
      type: Number,
      default: 0,
    },
    //进度条颜色1
    processColor1: {
      type: String,
      default: "pink",
    },
    //进度条颜色2
    processColor2: {
      type: String,
      default: "white",
    },
    //条纹间距
    stripeSpacing: {
      type: Number,
      default: 50,
    },
    //进度条移动速度
    processSpeed: {
      type: Number,
      default: 5,
    },
    //条纹移动速度
    stripeSpeed: {
      type: Number,
      default: 5,
    },
  },
  components: {},
  data() {
    return {
      bdW: 300, //边框宽度
      bdH: 40, //边框高度
      bdL: 10, //边框厚度
      bdColor: "#ccc", //边框颜色
      bdbgColor: "#eee", //边框背景颜色
      contentW: 4, //内容宽度
      contentColor1: "pink", //内容颜色1
      contentColor2: "white", //内容颜色2
      contentSpacing: 50, //条纹间距
      processMoveTime: 3, //进度条移动时长
      processBgMoveTime: 5, //进度条背景移动时长
    };
  },
  computed: {
    //边框弧度
    bdBorderRadius() {
      return this.bdH / 2;
    },
    //内容弧度
    contentBorderRadius() {
      return (this.bdH - 2 * this.bdL) / 2;
    },
    //内容斜条纹
    contentColorGroup() {
      let bgStyle =
        "linear-gradient(45deg," +
        this.contentColor1 +
        " 25%," +
        this.contentColor2 +
        " 0%," +
        this.contentColor2 +
        " 50%," +
        this.contentColor1 +
        " 0%," +
        this.contentColor1 +
        " 75%," +
        this.contentColor2 +
        " 0%" +
        ")";
      return bgStyle;
    },
    contentInW() {
      let contentInMinW =
        Math.ceil(this.bdW / this.contentSpacing) * this.contentSpacing;
      return Math.max(this.contentSpacing, contentInMinW) * 3;
    },
  },
  watch: {
    process: {
      handler(val, oldVal) {
        this.contentW = Math.min(val, 100);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.bdW = this.width;
      this.bdH = this.height;
      this.contentW = Math.min(this.process, 100);
      this.contentColor1 = this.processColor1;
      this.contentColor2 = this.processColor2;
      this.contentSpacing = this.stripeSpacing;
      this.processMoveTime = 15 / this.processSpeed;
      this.processBgMoveTime = 25 / this.stripeSpeed;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.border {
  overflow: hidden;
}
.content {
  overflow: hidden;
}
.content_in {
  animation-name: move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes move {
  100% {
    transform: translate(0px, 0);
  }
}
</style>