Merge pull request #15712 from ant-design/fix-spin-style

Fix Spin style when indicator is Icon
This commit is contained in:
偏右 2019-03-28 13:49:58 +08:00 committed by GitHub
commit a83b7dc516
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 138 additions and 49 deletions

View File

@ -11113,10 +11113,18 @@ exports[`ConfigProvider components Spin configProvider 1`] = `
<span
class="config-spin-dot config-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="config-spin-dot-item"
/>
<i
class="config-spin-dot-item"
/>
<i
class="config-spin-dot-item"
/>
<i
class="config-spin-dot-item"
/>
</span>
</div>
`;
@ -11128,10 +11136,18 @@ exports[`ConfigProvider components Spin normal 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
`;
@ -11143,10 +11159,18 @@ exports[`ConfigProvider components Spin prefixCls 1`] = `
<span
class="prefix-Spin-dot prefix-Spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="prefix-Spin-dot-item"
/>
<i
class="prefix-Spin-dot-item"
/>
<i
class="prefix-Spin-dot-item"
/>
<i
class="prefix-Spin-dot-item"
/>
</span>
</div>
`;

View File

@ -377,10 +377,18 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
</div>

View File

@ -7,10 +7,18 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
`;
@ -94,10 +102,18 @@ exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
</div>
@ -154,10 +170,18 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
<div
@ -166,10 +190,18 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
<div
@ -178,10 +210,18 @@ exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
</div>
@ -198,10 +238,18 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"

View File

@ -47,10 +47,10 @@ function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode {
return (
<span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
<i />
<i />
<i />
<i />
<i className={`${prefixCls}-dot-item`} />
<i className={`${prefixCls}-dot-item`} />
<i className={`${prefixCls}-dot-item`} />
<i className={`${prefixCls}-dot-item`} />
</span>
);
}

View File

@ -125,7 +125,7 @@
.square(@spin-dot-size);
i {
&-item {
position: absolute;
display: block;
width: 9px;
@ -136,6 +136,7 @@
transform-origin: 50% 50%;
opacity: 0.3;
animation: antSpinMove 1s infinite linear alternate;
&:nth-child(1) {
top: 0;
left: 0;

View File

@ -499,10 +499,18 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i />
<i />
<i />
<i />
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
</div>