选中改颜色

wujingjing

2024-11-29 a7c0c52ed984e5dbae736a469fdac701d1a68a7f

 src/components/chat/components/Loding.vue

@@ -1,113 +1,33 @@
<template>
  <div class="com__box">
    <div class="loading">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
   <div class="com__box flex-center text-sm rounded-[6px] p-4 leading-relaxed bg-white">
      <p class="text">{{ process }}<div class="dot">...</div></p>
   </div>
</template>

<script setup lang="ts">
defineProps(['process']);
</script>
<style scoped>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
.dot {
   display: inline-block;
   text-align: center;
   margin: 0 auto;
   overflow: hidden;
   height: 1em;
   line-height: 1em;
   vertical-align: -0.25em;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
.dot::before {
   display: block;
   content: '...\A..\A.';
   white-space: pre-wrap;
   animation: dot 3s infinite step-start both;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 17px;
  height: 17px;
}

.loading > div {
  width: 3px;
  height: 3px;
  margin: 1px;
  border-radius: 100%;
  animation-name: ball-grid-beat;
  animation-iteration-count: infinite;
}

.loading > div:nth-child(1) {
  animation-duration: 0.65s;
  animation-delay: 0.03s;
}

.loading > div:nth-child(2) {
  animation-duration: 1.02s;
  animation-delay: 0.09s;
}

.loading > div:nth-child(3) {
  animation-duration: 1.06s;
  animation-delay: -0.69s;
}

.loading > div:nth-child(4) {
  animation-duration: 1.5s;
  animation-delay: -0.41s;
}

.loading > div:nth-child(5) {
  animation-duration: 1.6s;
  animation-delay: 0.04s;
}

.loading > div:nth-child(6) {
  animation-duration: 0.84s;
  animation-delay: 0.07s;
}

.loading > div:nth-child(7) {
  animation-duration: 0.68s;
  animation-delay: -0.66s;
}

.loading > div:nth-child(8) {
  animation-duration: 0.93s;
  animation-delay: -0.76s;
}

.loading > div:nth-child(9) {
  animation-duration: 1.24s;
  animation-delay: -0.76s;
}

@keyframes ball-grid-beat {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
@keyframes dot {
   33% {
      transform: translateY(-2em);
   }
   66% {
      transform: translateY(-1em);
   }
}
</style>