logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
basic Usage
Size
Inside a container
Embedded mode
Customized description
delay
Custom spinning indicator
API
Static Method

Spin

SkeletonAffix

A spinner for displaying loading state of a page or a section.

When To Use

When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.

Examples

API

PropertyDescriptionTypeDefault
delaySpecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
indicatorReact node of the spinning indicatorReactNode-
sizeThe size of Spin, options: small, default and largestringdefault
spinningWhether Spin is visiblebooleantrue
tipCustomize description content when Spin has childrenReactNode-
wrapperClassNameThe className of wrapper when Spin has childrenstring-

Static Method

  • Spin.setDefaultIndicator(indicator: ReactNode)

    You can define default spin element globally.

basic Usage

A simple loading status.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Spin } from 'mogud';

const App: React.FC = () => <Spin />;

export default App;
Inside a container

Spin in a container.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Spin } from 'mogud';

const App: React.FC = () => (
  <div className="example">
    <Spin />
  </div>
);

export default App;

.example {
  margin: 20px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
Customized description
expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Alert, Space, Spin } from 'mogud';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Space>
      <Spin tip="Loading" size="small">
        <div className="content" />
      </Spin>
      <Spin tip="Loading">
        <div className="content" />
      </Spin>
      <Spin tip="Loading" size="large">
        <div className="content" />
      </Spin>
    </Space>

    <Spin tip="Loading...">
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </Spin>
  </Space>
);

export default App;

.content {
  padding: 50px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
Custom spinning indicator

Use custom loading indicator.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'mogud';

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

const App: React.FC = () => <Spin indicator={antIcon} />;

export default App;
Size

A small Spin is used for loading text, default sized Spin for loading a card-level block, and large Spin used for loading a page.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Space, Spin } from 'mogud';

const App: React.FC = () => (
  <Space size="middle">
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </Space>
);

export default App;
Embedded mode

Embedding content into Spin will set it into loading state.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'mogud';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };

  return (
    <div>
      <Spin spinning={loading}>
        <Alert
          message="Alert message title"
          description="Further details about the context of this alert."
          type="info"
        />
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state：
        <Switch checked={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;
delay

Specifies a delay for loading state. If spinning ends during delay, loading status won't appear.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'mogud';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };
  const container = (
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  );

  return (
    <div>
      <Spin spinning={loading} delay={500}>
        {container}
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state：
        <Switch checked={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;
Loading
Loading
Loading
Loading...
Alert message title
Further details about the context of this alert.
Alert message title
Further details about the context of this alert.
Loading state：
Alert message title
Further details about the context of this alert.
Loading state：