React Suite Loader Center

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Loader Center. A loader is a component that provides state during data loading and the loader can also be used with a custom description. A loader can be aligned center in the web application.

Loader Props:

• backdrop: It indicates whether the background is displayed.
• center: It makes components centered in the container.
• classPrefix: It denotes the prefix of the component CSS class.
• content: It adds a custom descriptive text.
• inverse: It denotes the alternative dark visual style for the Loader.
• size: It set the loader dimensions.
• speed: It denotes the speed at which the loader rotates.
• vertical: It indicates whether the icon is displayed vertically with the text or not.

Creating React Application And Installing Module:

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

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Syntax:

import Loader from 'rsuite/Loader';
function App() {
    <Loader center content="loading" />
}

Example 1: Below example demonstrates the centered aligned loader.

Javascript

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Center
                </h4>
                <div style={{ marginTop: 20, width: 400 }}>
                    <Loader center
                        content="loading in center" />
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the vertically aligned centered loader.

Javascript

import { Loader } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Center
                </h4>
                <div style={{ marginTop: 20, width: 400 }}>
                    <Loader center vertical content
                        ="loading vertically in center" />
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/loader/#center