diff --git a/src/button/test/__snapshots__/demo.spec.ts.snap b/src/button/test/__snapshots__/demo.spec.ts.snap index 075970faa..e099ab638 100644 --- a/src/button/test/__snapshots__/demo.spec.ts.snap +++ b/src/button/test/__snapshots__/demo.spec.ts.snap @@ -139,29 +139,29 @@ exports[`should render demo and match snapshot 1`] = `
diff --git a/src/image-preview/test/__snapshots__/index.spec.ts.snap b/src/image-preview/test/__snapshots__/index.spec.ts.snap index e5eb9fc83..d5d7ed630 100644 --- a/src/image-preview/test/__snapshots__/index.spec.ts.snap +++ b/src/image-preview/test/__snapshots__/index.spec.ts.snap @@ -86,29 +86,29 @@ exports[`zoom in and drag image to move 1`] = `
@@ -127,29 +127,29 @@ exports[`zoom in and drag image to move 2`] = `
diff --git a/src/image/test/__snapshots__/demo.spec.ts.snap b/src/image/test/__snapshots__/demo.spec.ts.snap index 02c555d61..77a0c2209 100644 --- a/src/image/test/__snapshots__/demo.spec.ts.snap +++ b/src/image/test/__snapshots__/demo.spec.ts.snap @@ -242,29 +242,29 @@ exports[`should render demo and match snapshot 1`] = `
diff --git a/src/loading/Loading.tsx b/src/loading/Loading.tsx index 5237f81a2..67933bb82 100644 --- a/src/loading/Loading.tsx +++ b/src/loading/Loading.tsx @@ -3,7 +3,9 @@ import { createNamespace, addUnit, getSizeStyle, extend } from '../utils'; const [name, bem] = createNamespace('loading'); -const SpinIcon: JSX.Element[] = Array(12).fill(); +const SpinIcon: JSX.Element[] = Array(12) + .fill(null) + .map((_, index) => ); const CircularIcon = ( diff --git a/src/loading/index.less b/src/loading/index.less index cd3c2324f..98caaf764 100644 --- a/src/loading/index.less +++ b/src/loading/index.less @@ -28,24 +28,6 @@ &--spinner { animation-timing-function: steps(12); - - i { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &::before { - display: block; - width: 2px; - height: 25%; - margin: 0 auto; - background-color: currentColor; - border-radius: 40%; - content: ' '; - } - } } &--circular { @@ -53,6 +35,24 @@ } } + &__line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + &::before { + display: block; + width: 2px; + height: 25%; + margin: 0 auto; + background-color: currentColor; + border-radius: 40%; + content: ' '; + } + } + &__circular { display: block; width: 100%; @@ -103,7 +103,7 @@ } .generate-spinner(@n, @i: 1) when (@i =< @n) { - .van-loading__spinner--spinner i:nth-of-type(@{i}) { + .van-loading__line--@{i} { transform: rotate(@i * 30deg); opacity: 1 - (0.75 / 12) * (@i - 1); } diff --git a/src/loading/test/__snapshots__/demo.spec.ts.snap b/src/loading/test/__snapshots__/demo.spec.ts.snap index 1966528f7..473c51b13 100644 --- a/src/loading/test/__snapshots__/demo.spec.ts.snap +++ b/src/loading/test/__snapshots__/demo.spec.ts.snap @@ -18,29 +18,29 @@ exports[`should render demo and match snapshot 1`] = `
@@ -66,29 +66,29 @@ exports[`should render demo and match snapshot 1`] = `
@@ -114,29 +114,29 @@ exports[`should render demo and match snapshot 1`] = `