Skip to main content

How to create a Loader using CSS Animation in React JS [ Rotate CSS animation Keyframes ]

 To create loader , take a div with classname spinner 

import './App.css'

function App() {

  return (
    <div className="spinner"></div>
  );
}

export default App;

In the index.css or App.css :

.spinner{
  width: 30px;
  height: 30px;
  border: 8px solid #f3f3f3;
  border-top: 8px solid red;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
    /* add if you want color change */
    border-top: 8px solid blue;
  }
}

Comments

Post a Comment

Popular posts from this blog

Shopping Cart React.js Project with Explanation✅ [ Simple Ecommerce Website using Reactjs ]

Hello guys in this video we will discuss shopping cart web app.  first we need to install the basic react app using - npx create-react-app app-name The folder structure should be containing three files  in components folder as below : In App.js :  import './App.css' ; import Header from './components/Header' ; import ProductList from './components/ProductList' ; import CartList from './components/CartList' ; import { useState } from 'react' ; function App () {   const [ product , setProduct ] = useState ([     {       url : 'https://rukminim1.flixcart.com/image/300/300/l51d30w0/shoe/z/w/c/10-mrj1914-10-aadi-white-black-red-original-imagft9k9hydnfjp.jpeg?q=70' ,       name : 'TRQ White Shoes' ,       category : 'Shoes' ,       seller : 'AMZ Seller Ghz' ,       price : 1999     },     {       url : 'https://5.imimg.com/data5/KC/PC...
Post a Comment
Read more

Create A Date Range Picker in React JS (By Saifi Code)

 To Create  A Date Range Picker in React JS , need to install following packages :  npm i antd npm i moment Step 1 : import DatePicker from antd and get RangePicker from this package Step 2 : In the JSX Use the package , you will start get picker ui Example :  To get the values use onChange method and save values in state  Try to console the state to check if the values are updating App.js File : import 'antd/dist/antd.css' ; import { DatePicker } from 'antd' ; import { useState } from 'react' ; import moment from 'moment' ; const { RangePicker } = DatePicker ; function App () {   const [ dates , setDates ] = useState ([])   console . log ( dates )     return (     < div style = { { margin : 20 } } >       < RangePicker         onChange = { ( values ) => {                     setDates ( values . map ( item => { ...
Post a Comment
Read more

MERN Authentication - Login, Register, Verification Email, Forget Password, User Name & Logout on Navbar

In The React Side :  The folder structure will be : Lets start from App.js  On this file we will be adding routing , install the package react-router-dom : import './App.css' ; import React from 'react' ; import {   BrowserRouter as Router ,   Routes ,   Route ,   Link } from "react-router-dom" ; import Signup from './components/Signup' ; import Signin from './components/Signin' ; import Home from './components/Home' ; import ForgetPassword from './components/ForgetPassword' ; import NewSubmit from './components/NewSubmit' ; function App () {   return (     < div >       < Router >         < Routes >           < Route path = "/signup" element = { < Signup /> } />           < Route path = "/signin" element = { < Signin /> } />           < Route path = "/" e...
Post a Comment
Read more