Spin

加载器组件用于展示加载状态

基础按钮

Preview
Code

按钮变体

Preview
Code

尺寸设置

Preview
Code

Props

sizeenum
middle
组件尺寸: small , middle , large
variantenum
primary
组件变体: primary , success , info , warning , danger
disabledboolean
false
是否禁用组件
boxClassstring
透传盒子类
lineClassstring
透传线条类

样式

Code
/**
 * ObSpin - 样式
 * @see {@link https://uiverse.io/G4b413l/soft-jellyfish-12}
 */
export default obCva<ISpinProps>('relative h-12 w-12 flex items-center justify-center', {
  variants: {
    size: {
      small: 'scale-70',
      middle: 'scale-100',
      large: 'scale-130',
    },
  },
})

/**
 * ObSpin - Line 样式
 */
export const lineStyle = obCva<ISpinProps>('absolute left-0 top-1/2 h-1 w-full animate-spin rounded-full', {
  variants: {
    variant: {
      primary: 'bg-primary',
      success: 'bg-success',
      info: 'bg-mediumGray',
      warning: 'bg-warning',
      danger: 'bg-danger',
    },
  },
})