How can I show a animation for 3 second, irrespective of loading-CodePudding

I want to show an animation before the content of the website is shown I tried it myself and then saw some videos but the videos show how to deliver the loader when the website is loading I want to show the animation irrespective of the loading can anyone suggest me how to do this.

This is the jsx file and the following is the CSS file part.

import React, { useRef } from 'react'
import './home.css'
import video from './A.mp4';
import video1 from './Ankit.mp4';
import img1 from './home1.jpeg';
import img2 from './home4.jpeg';
import img3 from './home3.jpeg';
import { faDisplay } from '@fortawesome/free-solid-svg-icons';

export default function Home() {
    const about = useRef(null);
    const work = useRef(null);
    const contact = useRef(null);

    const scrollSection = (elementRef) => {
        window.scrollTo({
            top: elementRef.current.offsetTop,
            behavior: "smooth",
        });
    };
    const alerting = () => {
        window.alert('Adding soon');
    }
    let preloder = document.getElementsByClassName('logo_video2');
    const showlogo = () =>{
        preloder.style.display = 'none';
    }
    return (
        <>

        <video loop autoPlay muted playsInline className='logo_video2' >
                            <source src={video1} type="video/mp4" />
        </video>

now this is the CSS part is this sufficient if not can u suggest me something

.logo_video2{
    position: fixed;
    width:  200px;
    height: 200px;
    top: 35%;
    right: 25%;
    background: black url('./Ankit.mp4') no-repeat center;
    z-index: 98798798 ;
}

CodePudding user response：

You can have a state variable that is set to true and then set it to false after 3 seconds and conditionally render your video component accordingly.

Please find the required code here.

export default function Home() {
    const [showVideo, setShowVideo] = useState(true);
    const about = useRef(null);
    const work = useRef(null);
    const contact = useRef(null);
    useEffect(
    () => {
      let timer1 = setTimeout(() => setShowVideo(false), 3000);
      return () => {
        clearTimeout(timer1);
      };
    },
    []
  );
    return (
        <>

       {showVideo ? <video loop autoPlay muted playsInline className='logo_video2' >
                            <source src={video1} type="video/mp4" />
        </video> : <YourOtherComponent />}

}