页面

src/components/dotLoading/index.module.scss

@@ -0,0 +1,45 @@
+.load_box{
+    height:40px;
+	line-height:40px;
+	position:relative;
+	text-align:center;
+    .load_box_item {
+        width:5px;
+        height:5px;
+        margin:0 1px;
+        display:inline-block;
+        vertical-align:middle;
+        background:#9b59b6;
+        animation:load_more_box 1.5s  infinite ease-in-out;
+        &:nth-child(2) {
+            animation-delay:.2s;
+        }
+        &:nth-child(3) {
+            animation-delay:.4s;
+        }
+        &:nth-child(4) {
+            animation-delay:.6s;
+        }
+        &:nth-child(5) {
+            animation-delay:.8s;
+        }
+    }
+}
+@keyframes load_more_box {
+	0% {
+        height:5px;
+        background:$color_font_two;
+    }
+    25% {
+        height:30px;
+        background:$color_main;
+    }
+    50% {
+        height:5px;
+        background:$color_font_two;
+    }
+    100% {
+        height:5px;
+        background:$color_font_two;
+    }
+}

src/components/dotLoading/index.tsx

@@ -0,0 +1,17 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+import styles from './index.module.scss'
+
+export default memo(() => {
+    return (
+        <>
+            <View className={styles.load_box}>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+            </View>
+        </>
+    )
+})