Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Building an animated loader in React.JS
In this article, we will see how to make an animated loader in React.js. Animated loaders are used in many websites to enhance the look and feel. In React.js, we can use the react-spinkit package to create beautiful animated loaders easily without having to write hundreds of lines of CSS.
First create a React project −
npx create-react-app tutorialpurpose
Go to the project directory −
cd tutorialpurpose
Example
Install the react-spinkit package −
npm i --save react-spinkit
This library provides premade loaders and it is really easy to add it in your project. Using spinner, you can add any animated loader in React.
Add the following lines of code in App.js −
import Spinner from "react-spinkit";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: "200px",
justifyContent: "space-between",}}>
<Spinner name="double-bounce" style={{ width: 100, height: 100 }} />
<Spinner name="circle" style={{ width: 100, height: 100 }} />
<Spinner name="cube-grid" style={{ width: 100, height: 100 }} />
<Spinner name="wave" color="coral" style={{ width: 100, height: 100 }} />
<Spinner name="three-bounce" style={{ width: 100, height: 100 }} />
<Spinner name="wandering-cubes" style={{ width: 100, height: 100 }} />
<Spinner name="chasing-dots" style={{ width: 100, height: 100 }} />
<Spinner name="rotating-plane" style={{ width: 100, height: 100 }} />
<Spinner name="wordpress" style={{ width: 100, height: 100 }} />
<Spinner name="ball-grid-beat" style={{ width: 100, height: 100 }} />
</div>
);
}Here we first created a simple div for centering all the content and then we added different types of loaders in it using our spinkit library. The name argument takes the type of loader and style takes the width and height and other styling for loaders.
Output
On execution, it will produce the following output −
691 Views
