-->

  • How to add loader or spinner in reactjs

     

    How to add loader or spinner in reactjs

     

    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"

     

     

    How to add loader or spinner in reactjs

     

    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

     

    How to add loader or spinner in reactjs

     

     

     
    Then, in your vs code terminal paste it and install it

     

     

    How to add loader or spinner in reactjs

     

     So as you can see installation done so whether is it install or not to check it in your "package.json"

     

    How to add loader or spinner in reactjs

     

     

     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
    



    How to add loader or spinner in reactjs


    Result -


    How to add loader or spinner in reactjs


    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.