Spinnercomponent in Chakra UI is a feedback indicator mainly used for visualizing an unspecified wait time where the length of the task is unknown.
Spinners are animated graphical controls that spin to indicate that a process is currently ongoing. They are often used for tasks such as loading data, submitting forms, or any asynchronous operations where the completion time cannot be estimated. Key features of the Spinner component in Chakra UI are its simplicity and its customizable appearance.
You can easily change the size and color of the Spinner to match the look and feel of your application. Unlike
CircularProgress components, Spinners do not represent a percentage completion, but rather the ongoing nature of a task. This makes them suitable for scenarios where the duration of the task is unpredictable.
In terms of accessibility, Chakra UI takes care of that by giving the Spinner component a role of 'status' and providing a fallback status message of 'Loading...', ensuring that screen reader users are also informed about the ongoing operation.
To import this component:
This is a basic Spinner component. It uses the default size, color, thickness, and speed values provided by Chakra UI.
This Spinner component has been customized with a specific color. The color of the spinner is set to "red.500" from the Chakra UI color scheme.
This example features a very small spinner. The size property of the Spinner has been set to "xs", which is the smallest size available in Chakra UI.
This is a small-sized spinner. The size property is set to "sm", making the spinner a bit larger than the "xs" size but still quite small.
This example shows a medium-sized spinner. By setting the size property to "md", it produces a spinner of moderate size.
Here, a large spinner is displayed. The size of the spinner is set to "lg", resulting in a larger, more noticeable loading animation.
This spinner is extra large, set with the "xl" value, making it the biggest standard size for the Spinner component in Chakra UI.
This is a heavily customized spinner. The thickness is set to "4px", making the rotating line of the spinner four pixels wide. The speed is set to "0.65s", which means each full rotation of the spinner takes 0.65 seconds. The emptyColor property is set to "gray.200", which colors the non-active section of the spinner. The color is set to "blue.500", which specifies the color of the active section of the spinner. The "xl", making this a large, noticeable, and customized spinner.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3