mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-21 22:09:16 +08:00
style(Loading): simplify selector (#9117)
This commit is contained in:
neverland
GitHub
parent
cafbf2bef4
commit
2821acb37a
@ -139,29 +139,29 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<div class="van-button__content">
|
<div class="van-button__content">
|
||||||
<div class="van-loading van-loading--spinner van-button__loading">
|
<div class="van-loading van-loading--spinner van-button__loading">
|
||||||
<span class="van-loading__spinner van-loading__spinner--spinner">
|
<span class="van-loading__spinner van-loading__spinner--spinner">
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -86,29 +86,29 @@ exports[`zoom in and drag image to move 1`] = `
|
|||||||
<div class="van-image__loading">
|
<div class="van-image__loading">
|
||||||
<div class="van-loading van-loading--spinner">
|
<div class="van-loading van-loading--spinner">
|
||||||
<span class="van-loading__spinner van-loading__spinner--spinner">
|
<span class="van-loading__spinner van-loading__spinner--spinner">
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -127,29 +127,29 @@ exports[`zoom in and drag image to move 2`] = `
|
|||||||
<div class="van-image__loading">
|
<div class="van-image__loading">
|
||||||
<div class="van-loading van-loading--spinner">
|
<div class="van-loading van-loading--spinner">
|
||||||
<span class="van-loading__spinner van-loading__spinner--spinner">
|
<span class="van-loading__spinner van-loading__spinner--spinner">
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -242,29 +242,29 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<span class="van-loading__spinner van-loading__spinner--spinner"
|
<span class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
style="width: 20px; height: 20px;"
|
style="width: 20px; height: 20px;"
|
||||||
>
|
>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,9 @@ import { createNamespace, addUnit, getSizeStyle, extend } from '../utils';
|
|||||||
|
|
||||||
const [name, bem] = createNamespace('loading');
|
const [name, bem] = createNamespace('loading');
|
||||||
|
|
||||||
const SpinIcon: JSX.Element[] = Array(12).fill(<i />);
|
const SpinIcon: JSX.Element[] = Array(12)
|
||||||
|
.fill(null)
|
||||||
|
.map((_, index) => <i class={bem('line', String(index + 1))} />);
|
||||||
|
|
||||||
const CircularIcon = (
|
const CircularIcon = (
|
||||||
<svg class={bem('circular')} viewBox="25 25 50 50">
|
<svg class={bem('circular')} viewBox="25 25 50 50">
|
||||||
|
|||||||
@ -28,8 +28,14 @@
|
|||||||
|
|
||||||
&--spinner {
|
&--spinner {
|
||||||
animation-timing-function: steps(12);
|
animation-timing-function: steps(12);
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
&--circular {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -46,12 +52,6 @@
|
|||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--circular {
|
|
||||||
animation-duration: 2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__circular {
|
&__circular {
|
||||||
display: block;
|
display: block;
|
||||||
@ -103,7 +103,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.generate-spinner(@n, @i: 1) when (@i =< @n) {
|
.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);
|
transform: rotate(@i * 30deg);
|
||||||
opacity: 1 - (0.75 / 12) * (@i - 1);
|
opacity: 1 - (0.75 / 12) * (@i - 1);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,29 +18,29 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div class="van-loading van-loading--spinner">
|
<div class="van-loading van-loading--spinner">
|
||||||
<span class="van-loading__spinner van-loading__spinner--spinner">
|
<span class="van-loading__spinner van-loading__spinner--spinner">
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -66,29 +66,29 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<span class="van-loading__spinner van-loading__spinner--spinner"
|
<span class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
style="color: rgb(25, 137, 250);"
|
style="color: rgb(25, 137, 250);"
|
||||||
>
|
>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -114,29 +114,29 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<span class="van-loading__spinner van-loading__spinner--spinner"
|
<span class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
style="width: 24px; height: 24px;"
|
style="width: 24px; height: 24px;"
|
||||||
>
|
>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--1">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--2">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--3">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--4">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--5">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--6">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--7">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--8">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--9">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--10">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--11">
|
||||||
</i>
|
</i>
|
||||||
<i>
|
<i class="van-loading__line van-loading__line--12">
|
||||||
</i>
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user