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 Speed. 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 of different speeds i.e. fast, normal, and slow.
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 speed="fast || normal || slow" />
}
Example 1: Below example demonstrates the fast loader speed.
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 Speed
</h4>
<div style={{
marginTop: 20,
width: 400
}}>
<Loader
content= "Fast loading..."
speed= "fast" />
</div>
</div>
</center>
);
}
|
Output:
Example 2: Below example demonstrates the normal loader speed.
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 Speed
</h4>
<div style={{
marginTop: 20,
width: 400
}}>
<Loader
content= "Normal loading..."
speed= "normal" />
</div>
</div>
</center>
);
}
|
Output:
Example 3: Below example demonstrates the slow loader speed.
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 Speed
</h4>
<div style={{
marginTop: 20,
width: 400
}}>
<Loader
content= "Slow loading..."
speed= "slow" />
</div>
</div>
</center>
);
}
|
Output:
Reference: https://rsuitejs.com/components/loader/#speed
Last Updated :
12 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...