Skip to main content

AtomSpinner

An animated loop used for giving users feedback while the content of a page or section is being loaded.

Installation​

$ npm install @s-ui/react-atom-spinner --save

Usage​

Basic usage​

import AtomSpinner from '@s-ui/react-atom-spinner'

return (
  <AtomSpinner />
)

Full Screen Spinner​

By default type prop has atomSpinnerTypes.SECTION value.

import AtomSpinner, {atomSpinnerTypes} from '@s-ui/react-atom-spinner'

return (
  <AtomSpinner type={AtomSpinnerTypes.FULL} />
)

Delayed Spinner​

You can delay when the Spinner is shown.

import AtomSpinner from '@s-ui/react-atom-spinner'

return (
  <AtomSpinner isDelayed  />
)

Overlay Types​

Different overlay types can be selected. Each one modify the overlay background color and the colors of the loader. All of these can be customized in your theme. Options are: LIGHT (default), ACCENT, DARK, PRIMARY and TRANSPARENT.

import AtomSpinner, {atomSpinnerOverlayTypes} from '@s-ui/react-atom-spinner'

return (
  <AtomSpinner overlayType={atomSpinnerOverlayTypes.DARK} />
)

Custom Children​

Children of AtomSpinner are injected with the same props AtomSpinner is receiving and with the component's default ones. In the following example, CustomChildren can be a reusable component.

import {atomSpinnerOverlayTypes. atomSpinnerTypes} from '@s-ui/react-atom-spinner'
import cx from 'classnames'

const CustomChildren = ({children, loader, overlayType, type}) => {
  const className = cx('readme-custom-children', {
    'readme-custom-children--dark':
      overlayType === atomSpinnerOverlayTypes.DARK,
    'readme-custom-children--fullPage': type === atomSpinnerTypes.FULL
  })

  return (
    <>
      {loader}
      // the use of `loader` is not mandatory, and can be replaced
      <div className={className}>{children}</div>
    </>
  )
}
import AtomSpinner, {atomSpinnerOverlayTypes. atomSpinnerTypes} from '@s-ui/react-atom-spinner'
import CustomChildren from './CustomChildren.js'

return (
  <>
  <AtomSpinner>
    <CustomChildren>With custom children</CustomChildren>
  </AtomSpinner>
  <AtomSpinner overlayType={atomSpinnerOverlayTypes.DARK} type={atomSpinnerTypes.FULL}>
    <CustomChildren>
      With custom children but receiving different props through AtomSpinner
    </CustomChildren>
  </AtomSpinner>
  </>
)

Find full description and more examples in the demo page.