页面

src/components/loading/index.module.scss

@@ -0,0 +1,43 @@
+.loading {
+    display: inline-block;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    z-index: 2000;
+    &__ring {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      margin: 2px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: #6190e8 transparent transparent;
+      border-radius: 50%;
+      animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  
+      height: 100%;
+      width: 100%;
+  
+      &:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+      &:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+      &:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+    }
+  }
+  
+  @keyframes loading {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+  
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }

src/components/loading/index.tsx

@@ -0,0 +1,25 @@
+import { View } from "@tarojs/components"
+import { memo, useMemo } from "react"
+import style from './index.module.scss'
+export default memo(({width=60, color='#6190e8'}:{width?:number, color?:string}) => {
+    const styleObj = useMemo(() => {
+        let obj = {}
+        if(width > 0) 
+            obj = {width: width + 'rpx', height:width + 'rpx'}
+        if(color)
+            obj = {...obj, borderColor: color+' transparent transparent'}
+        return obj
+        
+    }, [width, color])
+    console.log('loading:::')
+    return (
+        <View className={style.loading} 
+            style={styleObj}
+        >
+            <View style={styleObj} className={style.loading__ring}></View>
+            <View style={styleObj} className={style.loading__ring}></View>
+            <View style={styleObj} className={style.loading__ring}></View>
+        </View>
+    )
+    
+})