Vue实现进度条斑马条纹动画效果（easiest）

实现效果：

实现代码：

<template>
  <div class="hair-salon-bar-container">
    <div :style="{width: `${width}px`, height: `${height}px`}" class="bar"></div>
  </div>
</template>

<script>
export default {
  name: "HairSalonBar",
  props: {
    width: {
      type: String | Number,
      required: true
    },
    height: {
      type: String | Number,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
$main-color:#4169AA;
$sub-color: #c29292;
.bar {
  position: relative;
  margin: auto;
  border-radius: 20px;
  background: $main-color;
  overflow: hidden;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 1200px;
    height: 85px;
    background: repeating-linear-gradient(45deg, $sub-color, $sub-color 10px, transparent 11px, transparent 19px, $sub-color 20px) no-repeat 0 0;
    animation: move 1s linear infinite;
  }
}

@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -56px;
  }
}
</style>

·

调用方法：

import HairSalonBar from "@/components/HairSalonBar";
export default {
  name: 'SftpMonitor',
  components: {HairSalonBar},
  data() {
  }