feat: 加载中动画调整

2025-09-02 20:42:53 +08:00
parent 537b7521e1
commit 514d9ab944
3 changed files with 55 additions and 27 deletions
--- a/pages/loading/DotLoading.vue
+++ b/pages/loading/DotLoading.vue
@@ -0,0 +1,48 @@
+<template>
+  <view class="wave">
+    <view class="dot"></view>
+    <view class="dot"></view>
+    <view class="dot"></view>
+  </view>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped>
+.wave {
+  position: relative;
+  text-align: center;
+  width: 32px;
+  // background-color: #ff0000;
+
+  .dot {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    margin-right: 4px;
+    background: #333333;
+    animation: wave 1.3s linear infinite;
+
+    &:nth-child(2) {
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.9s;
+    }
+  }
+}
+
+@keyframes wave {
+  0%,
+  60%,
+  100% {
+    transform: initial;
+  }
+
+  30% {
+    transform: translateY(-6px);
+  }
+}
+</style>