Loading 加载中

加载动画

代码演示

基本使用

收起源代码

import React from 'react'
import { Loading, Space, IconType } from '@dance-ui/ui'

export default () => (
  <Space style={{ fontSize: 40 }} align="center">
    <Loading />
    <Loading style={{ color: 'red' }} />
    <Loading style={{ color: 'blue' }} iconStyle={{ width: 60, height: 60 }} />
    <Loading style={{ color: 'blue' }} iconStyle={{ width: 60, height: 60 }} />
    <Loading iconType={IconType.DELETE} iconStyle={{ width: 60, height: 60 }} />
  </Space>
)

API

属性	说明	类型	默认值

组件源码

组件源码

import React, { ReactNode } from 'react'
import { twMerge } from 'tailwind-merge'
import Icon, { IconType } from '../Icon'

export type LoadingProps = {
  /** 显示与否 */
  show?: boolean
  /** 自定义Loading图标 */
  iconType?: IconType
  /** 自定义Loading图标 */
  renderIcon?: () => ReactNode
  /** 旋转容器额外的 CSS className */
  className?: string
  /** 旋转容器额外的 CSS style */
  style?: React.CSSProperties
  /** 图标额外的 CSS className */
  iconClassName?: string
  /** 图标容器额外的 CSS style */
  iconStyle?: React.CSSProperties
}

const Loading = ({ show, iconType, renderIcon, className, style, iconClassName, iconStyle }: LoadingProps): JSX.Element => {
  const _renderIcon = (): ReactNode => {
    if (renderIcon) return renderIcon()
    return <Icon type={iconType ?? IconType.LOADING} className={iconClassName} style={iconStyle} />
  }
  return (
    <>
      {show ? (
        <div className={twMerge('inline-block animate-spin text-base', className)} style={style}>
          {_renderIcon()}
        </div>
      ) : null}
    </>
  )
}
Loading.defaultProps = {
  show: true,
}

export default Loading