Spinner - Keep React

A Spinner Component is a visual user interface element commonly found in web and mobile applications. It is used to indicate ongoing processes or loading states, providing users with a visual cue that something is happening in the background.

Table of Contents#

Default Spinner#

The "Default Spinner" is a loading indicator that uses the "info" color and appears in a larger size.

Spinner Colors#

By offering a variety of color variants for spinner components, applications can enhance communication with users and provide visual cues that match the context of the displayed information or actions. Here is available color variants for the spinner: failure gray info pink purple success and warning.

Spinner Sizes#

By offering a range of spinner sizes, applications can tailor the loading indicators to fit various design considerations and user experience needs. The choice of size depends on the context in which the spinner is used and the desired visual impact. Here is available sizes for the spinner: xs sm md lg and xl.

Spinner With Button#

A Spinner with Button is a user interface element that combines a loading spinner with a button. This combination is commonly used in scenarios where an action, such as submitting a form or performing an operation, requires some time to process.

API Reference#

Explore the available props for the spinner component

PropertyDescriptionTypeDefault
colorAvailable colors for the spinner
failure
gray
info
pink
purple
success
warning
gray
SizeAvailable sizes for the spinner
xs
sm
md
lg
xl
lg