React Suite is a front-end library designed for the middle platform and back-end products. React Suite Loader component gets appears on the screen whenever any state is being loaded. It is used to provide a good user experience.
Syntax:
<Loader/>
Loader props:
- vertical: It is a boolean that displays the text and the icon vertically. It is true by default.
- inverse: It is a boolean that provides an alternative dark style for the loader. It is true by default.
- backdrop: It is a boolean. It blurs the background. It is true by default.
- center: It is a boolean. It displays the loader at the center. It is true by default.
- classPrefix: This shows the prefix of the component CSS class i,e the default styling.
- content: It shows a custom descriptive text along with the icon.
- size: Sets the size of the button component.
- xs: The smallest size that is available.
- sm: It is a size small a bit bigger than the size xs.
- md: The medium size which is bigger than the sm.
- lg: The largest size available.
- speed: It defines the speed at which the loader rotates. The available alternates are “fast”,”slow”,”normal”.
Prerequisite: Introduction and installation reactJs
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: In this example, we are importing the Loader Component from “rsuite”. We are adding three loaders with variable size and speed using the size and the speed prop.We are also showing a text associated with the loader using the content prop.
Note: To add the default styles we are importing “rsuite/dist/rsuite.min.css”.
App.js
import { Loader } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h3> React Suite Loader</h3> <Loader content="speed=fast and size=large" speed="fast" size="lg" /> <hr /> <Loader content="speed=slow and size=small" speed="slow" size="sm" /> <hr /> <Loader content="speed=normal and size=medium" speed="normal" size="md" /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: In this example, we are creating a div with a height of 50px, we are adding a loader component with the inverse prop and another with the center and vertical prop, the form aligns the loader at the center of the screen and the latter aligns the content vertically.
App.js
import { Loader } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h3> React Suite Loader</h3> <div style={{ height: "50px", backgroundColor: "green" }}> <Loader inverse content="inverse" /> <Loader center content="center" vertical /> </div> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/loader/#code-lt-loader-gt-code
