Versatile SVG-based spinner component to use in loading scenarios
Default (grey, 40px radius)
1import Spinner from '@tempoplatform/tpds/components/spinner'
2
3<Spinner
4 radius={50}
5/>Custom: red, 50px radius
1import Spinner from '@tempoplatform/tpds/components/spinner'
2
3<Spinner
4 color='red'
5 radius={50}
6/>Custom: green, 40px radius
1import Spinner from '@tempoplatform/tpds/components/spinner'
2
3<Spinner
4 color='green'
5 radius={40}
6/>Custom: blue, 40px radius, 1800ms loop duration
1import Spinner from '@tempoplatform/tpds/components/spinner'
2
3<Spinner
4 color='blue'
5 radius={40}
6 duration={1800}
7/>Prop Name
Type
Default
Required
Description
color
String
' '
no
Can be 'red', 'blue', 'green', 'orange', 'purple', 'yellow', or 'magenta'. Default will be white on dark mode and black on light mode.
radius
Number
40
no
The radius of the spinner
duration
Number
900
no
Duration of a single spinner rotation in milliseconds
strokeWidth
String
3
no
The thickness of the spinner SVG stroke