Chakra-UI

I♥️Components

Spinners

|

Chakra Docs

|

⦾ The Spinner component 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 Progress or 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.

Some description

To import this component:

Examples

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

Loading state spinner in a button: Suppose we are working on a form submission. Upon clicking the submit button, we can replace the button text with a spinner to indicate the form is being processed. The following example shows a button that, when clicked, will display a spinner instead of its text for two seconds, simulating a form submission process.

Code

Creative Idea No. 2

ScoreSpinner: takes a score as its prop. Depending on the score value, the spinner's color varies from bright red when a user's score is not so good to green when a user's score is great. To illustrate this, we've created an interactive slider that adjusts the score value dynamically, altering the spinner's color in real-time. This visually compelling, color-coded spinner provides an immediate, intuitive sense of the score's value, making it a useful tool for displaying data or status in a user-friendly way.

Your score is: 50

Code

Creative Idea No. 3

Spinner color schemes: the following example is a vertical set of tabs where each tab represents a different color scheme. When you click on a tab, you'll see two examples of a spinner with the chosen color scheme - one on a light background and the other on a dark one. This allows you to easily compare how the color scheme affects the spinner's appearance in different environments. You can also see the effects of the thickness of the spinner visually.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.