component-lib/projects/package/AIRobot/components/Thinking.vue

<template>
  <div class="ai-thinking">
    <div class="ai-thinking-circle c1"></div>
    <div class="ai-thinking-circle c2"></div>
    <div class="ai-thinking-circle c3"></div>
  </div>
</template>

<style lang="less" scoped>
.ai-thinking {
  &-circle {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #3786fd;
    border-radius: 50%;
    animation: ani 1s infinite;
    & + .ai-thinking-circle {
      margin-left: 2px;
    }
    &.c2 {
      animation: ani 1s 0.4s infinite;
    }
    &.c3 {
      animation: ani 1s 0.8s infinite;
    }
  }

  @keyframes ani {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>