How to add loader or spinner in reactjs
React Loader Spinner is a library for adding loading spinners or
progress indicators to React applications. It provides a set of customizable
spinner components that can be used to indicate that a particular operation is
in progress, such as loading data or performing an asynchronous task.
React
Loader Spinner offers a wide range of spinner types, including classic
spinners like a circle or bar, as well as more complex ones like a pulsating
circle or a rotating cube. The library is highly configurable, allowing you to
customize the size, color, and animation speed of the spinners.
React
Loader Spinner is designed to be easy to use and integrate into React
projects. It can be installed via npm and imported into your React components.
Once imported, you can simply add the desired spinner component to your JSX
code and configure its props to suit your needs.
In summary, React Loader
Spinner is a useful library for adding loading spinners to React applications,
providing a variety of customizable spinner types and making it easy to
integrate them into your code.
To add a loader spinner in a React project, you can use an existing library
like react-loader-spinner or create your own spinner component.
Here's an example of how to use the react-loader-spinner library:
First Search on Browser "React loader spinner"
then as you can see there, there is a first link of npmjs.com, open it. But
dont worry i will provide you direct link (check below)
https://www.npmjs.com/package/react-loader-spinner
After opening it, this is a page of npmreactjs official site so
where we can install any type of package library so copy from here pkg
npm i react-loader-spinner
Then, in your vs code terminal paste it and install it
So as you can see installation done so whether is it install or not to
check it in your "package.json"
Now finally after installation of pkg library we will follow some steps
to complete the project
Step 1 - Then, we will do all type
of coding in "App.jsx" file. So import the pkg first.
import { Circles } from 'react-loader-spinner';
Step 2 - Now we will use useEffect() hooks inside
"function App()" and useState() too.
const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) setTimeout(() => { setLoading(false) }, 2000) }, [])
This code will render a TailSpin spinner with timeout of 2 seconds (1000
ms = 1 sec).
Step 3 - Now we import useState and
useEffect after importing react-loader-spinner
import { useState, useEffect } from 'react';
Step 4 - Now inside return, we will write react loader circle and
adding some content for displaying after loading the circle spinner.
<div className='App'> { loading ? <Circles color={'#D0021B'} loading={loading} size={100} /> : <div> <h1>Hello World </h1/> <p>Myself Kumar Atul Jaiswal CEO and Founder of Hacking Truth. </p> </div> } </div>
This code will render a TailSpin spinner with #D0021B color, 100px
height and width and loading is true when your page is refreshing.
Full Code
import React from 'react' import { Circles } from 'react-loader-spinner'; import { useState, useEffect } from 'react'; function App() { const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) setTimeout(() => { setLoading(false) }, 2000) }, []) return ( <div> <div className='App'> { loading ? <Circles color={'#D0021B'} loading={loading} size={100} /> : <div className='flex-1' > <h1>Hello World</h1> <p>Myself Kumar Atul Jaiswal CEO and Founder of Hacking Truth and She is miss Khushboo Kashyap Co-Founder of Hacking Truth</p> </div> } </div> </div> ) } export default App
Result -
If you have any components... so use it like this
import Navbar from './components/Navbar'; import { Route, Routes } from "react-router-dom"; import Discover from "./components/Discover"; import Signin from "./components/Signin"; import Dashboard from './components/Dashboard'; import Profileupdating from './components/Profileupdating'; import 'react-toastify/dist/ReactToastify.css'; import { Circles, ThreeDots } from 'react-loader-spinner'; import { useEffect, useState } from 'react'; function App() { const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) setTimeout(() => { setLoading(false) }, 2000) }, []) return ( <div> <div className='App'> { loading ? <Circles color={'#D0021B'} loading={loading} size={100} /> : <> <Navbar /> <Routes> {/* <Route path='/' element={ <Home /> } /> */} <Route path='/' element={<Signin />} /> <Route path='/discover' element={<Discover /> } /> <Route path='/dashboard' element={<Dashboard />} /> <Route path='/signin/:id' element={<Signin /> } /> <Route path='/profileupdating/:id' element={<Profileupdating /> } /> </Routes> </> } </div> </div> ) } export default App
Disclaimer
All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.