Chakra UI Feedback Spinner

In Chakra UI, the Feedback Spinner is the component that is used to represent the spinner visual effect which we can use in our web application in the functionality of waiting periods. This component has various customization options that include color schemes, size, speed controls, and loading indicators. In this article, we will see the detailed practical-based implementation of Chakra UI Feedback Spinner in terms of examples.

Prerequisites:

• NPM & Node JS
• React JS
• React JS Chakra UI

Approach:

We have created different Feedback Spinners like Default, Colored, Size Based, Custom Option based. Additionally, there is user interactive option for the user to choose the Spinner color, according to the color selected, the color of the spinner has been updated and the selected color has been applied to the spinner.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
        "@chakra-ui/react": "^2.8.2",
        "@emotion/react": "^11.11.3",
        "@emotion/styled": "^11.11.0",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "framer-motion": "^6.5.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
 }

Example: Below is the practical implementation of the Chakra UI Feedback Spinner:

Javascript

import React,
{
    useState
} from 'react';
import {
    Spinner, Stack,
    Box, Heading, Text,
    ChakraProvider
} from '@chakra-ui/react';
const App = () => {
    const [
        choose_Color,
        set_choose_Color
    ] = useState('blue.500');
    return (
        <ChakraProvider>
            <Box textAlign="center" p={8}>
                <Heading as="h1" color="green.500">
                    GeeksforGeeks
                </Heading>
                <Text as="h3" mb={4}>
                    Chakra UI Feedback Spinner
                </Text>
                <Stack direction="row" spacing={4}
                    align="center" justify="center" my={8}>
                    <SpinnerBox label="Default">
                        <Spinner label="Loading..." />
                    </SpinnerBox>
                    <SpinnerBox label="Colored">
                        <Spinner
                            color={choose_Color}
                            _hover={{ transform: 'scale(1.2)' }}
                            transition="transform 0.3s ease-in-out" />
                    </SpinnerBox>
                    <SpinnerBox label="Sizes">
                        <Stack direction="row"
                            spacing={2} align="center">
                            {
                                [
                                    'xs', 'sm',
                                    'md', 'lg',
                                    'xl'
                                ].map(
                                    (size) => (
                                        <Box key={size}
                                            textAlign="center">
                                            <Spinner size={size} />
                                            <Text>{size}</Text>
                                        </Box>
                                    ))}
                        </Stack>
                    </SpinnerBox>
                    <SpinnerBox label="Custom Options">
                        <Spinner
                            thickness="4px"
                            speed="0.65s"
                            emptyColor="gray.200"
                            color={choose_Color}
                            size="xl"
                        />
                    </SpinnerBox>
                </Stack>
                <Text mb={4}>Select Spinner Color:</Text>
                <Stack direction="row"
                    spacing={2} justify="center" mb={8}>
                    {
                        [
                            'red.500', 'blue.500',
                            'green.500', 'yellow.500',
                            'purple.500', 'pink.500'
                        ].map(
                            (color) => (
                                <Box
                                    key={color}
                                    cursor="pointer"
                                    onClick={
                                        () =>
                                            set_choose_Color(color)
                                    }
                                    borderWidth={2}
                                    borderRadius="full"
                                    borderColor={
                                        choose_Color ===
                                            color ?
                                            'gray.800' :
                                            'transparent'}
                                    p={2}
                                    _hover={{ borderColor: 'gray.800' }}
                                    transition="border-color 0.3s ease-in-out">
                                    <Box
                                        w="20px"
                                        h="20px"
                                        borderRadius="full"
                                        bg={color}
                                        border={
                                            choose_Color ===
                                                color ?
                                                '2px solid white' :
                                                'none'} />
                                </Box>
                            )
                        )}
                </Stack>
            </Box>
        </ChakraProvider>
    );
};
const SpinnerBox =
    (
        {
            label,
            children
        }) => (
        <Box textAlign="center"
            p={4} borderWidth={1}
            borderRadius="lg" bg="green.100">
            {children}
            <Text mt={2} fontWeight="bold">
                {label}
            </Text>
        </Box>
    );
export default App;

Step to run the Application:

npm start 

Output: Now go to http://localhost:3000 in your browser: