mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Improve card loading style, ref #9862
This commit is contained in:
afc163
parent
572ae5ce14
commit
f4ae9294c0
@ -394,54 +394,140 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-card-loading-content"
|
||||
>
|
||||
<p
|
||||
class="ant-card-loading-block"
|
||||
style="width:94%"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:28%"
|
||||
/>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:62%"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:22%"
|
||||
/>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:66%"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:56%"
|
||||
/>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:39%"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:21%"
|
||||
/>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:15%"
|
||||
/>
|
||||
<span
|
||||
class="ant-card-loading-block"
|
||||
style="width:40%"
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-22"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-15"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-18"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-13"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-9"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-4"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-3"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-16"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px"
|
||||
>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-6"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-8"
|
||||
style="padding-left:4px;padding-right:4px"
|
||||
>
|
||||
<div
|
||||
class="ant-card-loading-block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,8 @@ import omit from 'omit.js';
|
||||
import Grid from './Grid';
|
||||
import Meta from './Meta';
|
||||
import Tabs from '../tabs';
|
||||
import Row from '../row';
|
||||
import Col from '../col';
|
||||
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
||||
import warning from '../_util/warning';
|
||||
import { Omit } from '../_util/type';
|
||||
@ -148,24 +150,57 @@ export default class Card extends React.Component<CardProps, CardState> {
|
||||
|
||||
const loadingBlock = (
|
||||
<div className={`${prefixCls}-loading-content`}>
|
||||
<p className={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
|
||||
<p>
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
|
||||
</p>
|
||||
<p>
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
|
||||
</p>
|
||||
<p>
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
|
||||
</p>
|
||||
<p>
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
|
||||
<span className={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
|
||||
</p>
|
||||
<Row gutter={8}>
|
||||
<Col span={22}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={8}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={15}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={6}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={13}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={4}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8}>
|
||||
<Col span={8}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div className={`${prefixCls}-loading-block`} />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
&-contain-grid &-body {
|
||||
&-contain-grid:not(&-loading) {
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
}
|
||||
@ -224,21 +224,14 @@
|
||||
}
|
||||
|
||||
&-loading-content {
|
||||
padding: 0;
|
||||
animation: loading-entering .3s;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-wider-padding &-loading-content {
|
||||
animation: wider-loading-entering .3s;
|
||||
}
|
||||
|
||||
&-loading-block {
|
||||
display: inline-block;
|
||||
margin: 5px 2% 0 0;
|
||||
height: 14px;
|
||||
margin: 4px 0;
|
||||
border-radius: @border-radius-sm;
|
||||
background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
|
||||
animation: card-loading 1.4s ease infinite;
|
||||
@ -255,21 +248,3 @@
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-entering {
|
||||
from {
|
||||
padding: @card-padding-base;
|
||||
}
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wider-loading-entering {
|
||||
from {
|
||||
padding: @card-padding-base @card-padding-wider;
|
||||
}
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user