Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@uiw/react-loader
Advanced tools
Readme
用于页面和区块的加载中状态。
import { Loader } from 'uiw';
// or
import Loader from '@uiw/react-loader';
import React from 'react';
import { Loader } from "uiw";
export default function Demo() {
return (
<div>
<Loader size="small" />
<Loader />
<Loader size="large" />
</div>
);
}
import React, { Component } from 'react';
import { Loader, Row, Col, Message, Icon, Button } from "uiw";
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
return (
<div>
<Row gutter={10}>
<Col>
<Button
style={{ marginBottom: 10 }}
size="small"
onClick={() => {
this.setState({
loading: !this.state.loading,
});
}}
>
点击切换加载状态
</Button>
</Col>
</Row>
<Row gutter={10}>
<Col fixed>
<Loader loading={this.state.loading}>
<Message
type="success"
title="成功提示标题"
description={
<span>
<Icon
type="uiw"
verticalAlign="baseline"
style={{ fill: "#009688" }}
/>
这里是成功提示详情描述。
</span>
}
/>
</Loader>
</Col>
<Col fixed>
<Loader loading={this.state.loading}>
<Message
type="warning"
title="成功提示标题"
description="这里是成功提示详情描述。"
/>
</Loader>
</Col>
</Row>
</div>
);
}
}
export default Demo;
import React from 'react';
import { Loader, Card, Col, Row } from "uiw";
export default function Demo() {
return (
<Row gutter={10}>
<Col fixed>
<Card
title="图标与文字一行显示"
extra={<a href="#">更多</a>}
style={{ minWidth: 230 }}
>
<Loader color="red" tip="加载中..." style={{ width: "100%" }}>
<div>
卡片内容
<br />
卡片内容
<br />
卡片内容
<br />
</div>
</Loader>
</Card>
</Col>
<Col fixed>
<Card
title="图标与文字垂直显示"
extra={<a href="#">更多</a>}
style={{ minWidth: 230 }}
>
<Loader tip="loading..." vertical style={{ width: "100%" }}>
<div>
卡片内容
<br />
卡片内容
<br />
卡片内容
<br />
</div>
</Loader>
</Card>
</Col>
<Col fixed>
<Card
title="自定义背景颜色"
extra={<a href="#">更多</a>}
style={{ minWidth: 230 }}
>
<Loader
bgColor="rgba(0, 0, 0, 0.4)"
color="#fff"
tip="loading..."
vertical
style={{ width: "100%" }}
>
<div>
卡片内容
<br />
卡片内容
<br />
卡片内容
<br />
</div>
</Loader>
</Card>
</Col>
</Row>
);
}
import React from 'react';
import { Loader, Card, Icon } from "uiw";
export default function Demo() {
return (
<div>
<Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
<Loader
tip="加载中..."
color="red"
indicator={
<Icon
type="loading"
spin={true}
style={{ verticalAlign: "text-top" }}
/>
}
style={{ width: "100%" }}
>
<div>
卡片内容
<br />
卡片内容
<br />
卡片内容
<br />
</div>
</Loader>
</Card>
</div>
);
}
页面数据加载时显示。
import React from 'react';
import { Loader, Icon, Button } from "uiw";
class Demo extends React.Component {
constructor() {
super();
this.state = {
fullscreen: false,
};
}
render() {
return (
<div>
<Button
style={{ marginBottom: 10 }}
type="primary"
onClick={() => {
this.setState(
{
fullscreen: !this.state.fullscreen,
},
() => {
setTimeout(() => {
this.setState({
fullscreen: !this.state.fullscreen,
});
}, 3000);
}
);
}}
>
显示整页加载,3 秒后消失
</Button>
{this.state.fullscreen && (
<Loader
tip="加载中..."
size="large"
bgColor="rgba(255, 255, 255, 0.9)"
fullscreen={this.state.fullscreen}
/>
)}
</div>
);
}
}
export default Demo;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 尺寸 | Enum{small , default , large } | default |
loading | 是否旋转 | Boolean | true |
indicator | 加载指示符,可以加载一个 Icon 动画 | ReactNode | - |
tip | 当作为包裹元素时,可以自定义描述文案 | String | - |
color | 设置图标与文字的颜色 | String | - |
vertical | 图标与文字垂直显示 | Boolean | - |
bgColor | 自定义背景颜色 | String | - |
fullscreen | 是否全屏显示 | Boolean | false |
FAQs
Loader component
The npm package @uiw/react-loader receives a total of 213 weekly downloads. As such, @uiw/react-loader popularity was classified as not popular.
We found that @uiw/react-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.