vue3带粒子效果的渐变色进度条。

动态效果

使用组件

<template>
  <div class="home">
    <div class="itemsBodys">
      <item1></item1>
    </div>
  </div>
</template>
<script>

import {defineAsyncComponent} from 'vue'
import item1 from './components/item26/index.vue'

export default {
  name: "home",
  components: {item1},
  data() {
    return {
      dynamicCom: [],
      comps: [],
      id: this.$route.query.id
    }
  },
  mounted() {
  },
  created() {
    this.dynamicCom = []
    if (this.id) {
      this.dynamicCom.push(
          defineAsyncComponent(() =>
              import(`./components/``{this.``route.query.id}/index.vue`)
          )
      )
    }
  },
  computed: {},
  watch: {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 111, 1.00);
  overflow-y: scroll;


  .itemsBody {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .items {
      width: 100%;
      height: calc(100% - 50px);
      margin: 20px auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: column;
      align-content: flex-start;
    }
  }

  .itemsBody2 {
    position: relative;
    height: 90%;
    width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .items {
      width: 100%;
      height: calc(100% - 50px);
      margin: 20px auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: column;
      align-content: flex-start;
    }
  }
}

.titleDesc {
  font-size: 16px;
  color: #fff;
  margin: 20px;
}
.itemsBodys{
  width: 400px;
  height: 400px;
  position: relative;
}
</style>

完整运行实例

代码运行环境 vue3 vite js nodejs16