Loader

The RhLoader is a component that provides a loader/spinner animation that can be used to indicate that content is processing.

Usage

Once installed, you can import the RhLoader component into your React application:

import {RhLoader} from "@rhythm-ui/react"

Then, you can use the RhLoader component in your JSX code:

<div className="p-4 flex items-center">
  <RhLoader />
</div>

Loader Props

Sizes

The RhLoader is a customizable component that allows us to adjust the size of the Loader by specifying the desired height and width values through its class name.

<div className="flex justify-around items-center p-4">
  <RhLoader className="h-4 w-4" />
  <RhLoader className="h-8 w-8" />
  <RhLoader className="h-12 w-12" />
</div>

Colors

The RhLoader component allows the modification of the Loader's color through the use of text color values passed to its className.

<div className="flex justify-around items-center p-4">
  <RhLoader className="h-4 w-4 text-primary-500" />
  <RhLoader className="h-8 w-8 text-secondary-500" />
  <RhLoader className="h-12 w-12 text-warning-500" />
</div>

Loading Button

Creating the custom Loading Button by wrapping the RhLoader component within the RhButton. Also, we can apply custom styles and functionality specific to our needs.

<div className="flex justify-around items-center p-4">
  <RhButton>
    <RhLoader className="mr-3" />
    Processing...
  </RhButton>
</div>

;