Overview
The Spinner component displays a circular loading animation to indicate that content is being loaded or processed. It’s useful for providing visual feedback during asynchronous operations.
Basic Usage
import { Spinner } from '@ui-kitten/components';
const LoadingExample = () => (
<Spinner />
);
Whether the spinner is animating. Set to false to stop the animation.
status
EvaStatus
default:"primary"
Determines the color of the spinner. Available values:
basicprimarysuccessinfowarningdangercontrol - Use when displaying on high-contrast backgrounds
Controls the size of the spinner. Available values:
tinysmallmediumlargegiant
Custom style object to override default styling.
Examples
Different Sizes
import { Spinner, Layout } from '@ui-kitten/components';
const SpinnerSizes = () => (
<Layout style={{ flexDirection: 'row', gap: 16 }}>
<Spinner size='tiny' />
<Spinner size='small' />
<Spinner size='medium' />
<Spinner size='large' />
<Spinner size='giant' />
</Layout>
);
Different Statuses
import { Spinner, Layout } from '@ui-kitten/components';
const SpinnerStatuses = () => (
<Layout style={{ flexDirection: 'row', gap: 16 }}>
<Spinner status='primary' />
<Spinner status='success' />
<Spinner status='info' />
<Spinner status='warning' />
<Spinner status='danger' />
</Layout>
);
Loading Data Pattern
import React, { useState, useEffect } from 'react';
import { Spinner, Layout, Text } from '@ui-kitten/components';
const DataLoadingExample = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
// Simulate API call
setTimeout(() => {
setData('Content loaded!');
setLoading(false);
}, 2000);
}, []);
if (loading) {
return (
<Layout style={{ padding: 20, alignItems: 'center' }}>
<Spinner />
<Text style={{ marginTop: 10 }}>Loading...</Text>
</Layout>
);
}
return (
<Layout style={{ padding: 20 }}>
<Text>{data}</Text>
</Layout>
);
};
Conditional Animation
import React, { useState } from 'react';
import { Spinner, Button, Layout } from '@ui-kitten/components';
const ConditionalSpinner = () => {
const [animating, setAnimating] = useState(true);
return (
<Layout style={{ alignItems: 'center', gap: 16 }}>
<Spinner animating={animating} />
<Button onPress={() => setAnimating(!animating)}>
{animating ? 'Stop' : 'Start'} Animation
</Button>
</Layout>
);
};
Theming
The Spinner component can be customized using Eva Design System theming. You can override colors, sizes, and animation properties in your custom theme.
The control status is specifically designed for use on high-contrast backgrounds and will automatically adapt to ensure visibility.
Accessibility
- Consider adding accompanying text or labels to provide context for screen readers
- Use the
accessibilityLabel prop to describe what is loading
- Ensure sufficient color contrast when using custom status colors
Related Components
