created:7/7/2021
updated:7/7/2021
loc
59
comments
8%
passed
4
failed
4
coverage
67%
Spinning
grommet-controls
3.0.2A spinning process indicator.
Name | Description | Default | Controls |
|---|---|---|---|
| kind | Kind of spinner circlepulsethree-bouncecube-gridwavefolding-cubedouble-bouncewandering-cubeschasing-dotsrotating-plane | circle | |
| color | A color identifier to use for the spinning color ColorType | undefined | |
| size | A size for the spinning xsmallsmallmediumlargexlarge | medium | |
| fadeIn | fade in effect fullhalfquarternonewordpress | full |
package | imports | peer |
|---|---|---|
grommet/utils ^2.15.0 | ColorType | * |
react ^17.0.1 | React | * |
styled-components ^5.1.1 | ThemeContext | * |
file | imports |
|---|---|
| "./spinners" | allSpinners |
| "./SpinningProps" | ISpinningProps |
| "./StyledSpinning" | CircleSpinnerThreeBounceSpinnerCubeGridSpinnerWaveSpinnerFoldingCubeSpinnerDoubleBounceSpinnerWanderingCubesSpinnerChasingDotsSpinnerRotatingPlaneSpinnerPulseSpinnerWordPressSpinner |
<ThemeContext.Consumer>
styled-components
^5.1.1<StyledSpinning
colorfadeInthemesize
>StyledSpinning
<div
key
/>div
- config
- source
() => (<Box gap="medium"><Spinning kind="circle" /><Spinning kind="pulse" /><Spinning kind="three-bounce" /><Spinning kind="cube-grid" /><Spinning kind="wave" /><Spinning kind="folding-cube" /><Spinning kind="double-bounce" /><Spinning kind="wandering-cubes" /><Spinning kind="chasing-dots" /><Spinning kind="rotating-plane" /></Box>)
- config
- source
() => (<Box gap="medium"><Spinning kind="circle" color="brand" /><Spinning kind="pulse" color="accent-1" /><Spinning kind="three-bounce" color="accent-2" /><Spinning kind="cube-grid" color="accent-3" /><Spinning kind="wave" color="neutral-1" /><Spinning kind="folding-cube" color="red" /><Spinning kind="double-bounce" color="blue" /><Spinning kind="wandering-cubes" /><Spinning kind="chasing-dots" /><Spinning kind="rotating-plane" /></Box>)
- config
- source
() => (<Box gap="medium"><Spinning kind="circle" color="brand" size="xsmall" /><Spinning kind="pulse" color="accent-1" size="small" /><Spinning kind="circle" color="brand" size="medium" /><Spinning kind="three-bounce" color="accent-2" size="large" /><Spinning kind="cube-grid" color="accent-3" size="xlarge" /></Box>)