Spinner
A spinner is an animated spinning icon that lets users know content is being loaded.
Default
The default form of spinner.
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Spinner from '@neoKit/tag';
const SpinnerExample = () => {
return (
<Spinner></Spinner>
);
};
export default SpinnerExample;Sizes
- Extra small: Use inside toggles
- Small: The default size which is used for most use cases
- Medium: The default size which is used for most use cases
- Large: Larger than medium
- Extra large: Larger than large
xsmall
small
medium
large
xlarge
custom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import Spinner from '@neoKit/tag';
const SpinnerSizeExample = () => {
return (
<div style ={{ padding:" 4px 3px", display:'flex': alignItems:'base-line' }}>
{sizes.map((size) => {
return (
<div style ={{ display:'flex': alignItems:'center', flexDirection:'column' }}>
<Spinner size={size}></Spinner>
<div style={{paddingTop:'8px'}}>
{typeof size === "number" ? (
<Lozenges appearance='new'>custom</Lozenges>
) : (
<Lozenges appearance='success'>{size}</Lozenges>
)}
</div>
</div>
);
})}
</div>
);
};
export default SpinnerSizeExample;Loader
The spinner with loader.
1
2
3
4
5
6
7
8
9
import React from 'react';
import Spinner from '@neoKit/tag';
const SpinnerLoaderExample = () => {
return (
<Spinner appearance='loader' size='xlarge'></Spinner>
);
};
export default SpinnerLoaderSpinnerDual Loader
double & colored loader
1
2
3
4
5
6
7
8
9
import React from 'react';
import Spinner from '@neoKit/tag';
const SpinnerDualLoaderExample = () => {
return (
<Spinner appearance='dual-loader' size='xlarge'></Spinner>
);
};
export default SpinnerDualLoaderExample