You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import './index.less'
|
|
|
|
import { Row, Col } from 'ant-design-vue'
|
|
import 'ant-design-vue/es/grid/style/index.less'
|
|
|
|
import type { CSSProperties, FunctionalComponent } from 'vue'
|
|
|
|
type LoadingProps = {
|
|
/** Prefix */
|
|
prefix?: string
|
|
}
|
|
|
|
const Loading: FunctionalComponent<LoadingProps> = (props, { attrs }) => {
|
|
const { prefix } = props
|
|
|
|
return (
|
|
<div class={`${prefix}-loading-content`} style={attrs.style as CSSProperties}>
|
|
<Row gutter={8}>
|
|
<Col span={22}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={8}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
<Col span={15}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={6}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
<Col span={18}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={13}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
<Col span={9}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={8}>
|
|
<Col span={4}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
<Col span={3}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
<Col span={16}>
|
|
<div class={`${prefix}-loading-block`} />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Loading
|