@haoxuan8/react-spin

a simple and easy-use React loading/spinning component

Usage no npm install needed!

<script type="module">
  import haoxuan8ReactSpin from 'https://cdn.skypack.dev/@haoxuan8/react-spin';
</script>

README

npm version npm dw

@haoxuan8/react-spin

demo

live demo

Install

npm install @haoxuan8/react-spin -S

Usage

import Spin from '@haoxuan8/react-spin'

render(
  <Spin spinning>
    <div>Content</div>
  </Spin>,
  document.querySelector('#root')
)

Static Method

  • Spin.setDefaultIndicator(indicator: ReactNode)
  • Spin.clearDefaultIndicator()

Props

Name Type Default Description
spinning Boolean false Spinning
indicator ReactNode undefined Custom icon when loading. Hide indicator if set indicator as null
opacity Number 0.5 The opacity of content when loading
tip String undefined The text below indicator
mainColor String #409eff The color of default indicator
fontColor String #409eff The color of tip
size Number 42 The size(px) of default indicator
maxHeight Number | none 400 Default maxHeight(px) of indicator container. Indicator will be placed in the center of that container. If you want to place indicator in the center of children, just set this attribute as none