atomic-spinner
v1.3.8
Published
Customizable React loading spinner that looks like an atom
Downloads
574
Maintainers
Readme
atomic-spinner
Customizable React loading spinner that looks like an atom
Live Demo
https://bayer-group.github.io/atomic-spinner/
Examples
Installation
npm i atomic-spinner
yarn add atomic-spinner
pnpm i atomic-spinner
Usage
import AtomicSpinner from 'atomic-spinner'
const App = () => <AtomicSpinner />
export default App
Options
| prop | type | default | | ---- | ---- | ------- | | atomSize | number | 200 | | displayElectronPaths | bool | false | | displayNucleus | bool | false | | electronColorPalette | string[] | [ '#0081C9', '#5BC0F8', '#86E5FF' ] | | electronPathCount | number | 3 | | electronPathColor | string | #707070 | | electronPathWidth | number | 0.5 | | electronsPerPath | number | 2 | | electronSize | number | 1.5 | | electronSpeed | number | 0.5 | | nucleusDistanceFromCenter | number | 2.5 | | nucleusLayerCount | number | 2 | | nucleusParticlesPerLayer | number | 3 | | nucleusParticleFillColor | string | #707070 | | nucleusParticleBorderColor | string | #999999 | | nucleusParticleBorderWidth | number | 0.3 | | nucleusParticleSize | number | 2.5 | | nucleusSpeed | number | 2 | | nucleusMaskOverlap | bool | true |