forked from UKSOURCE/hailearning.edu.vn
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function Loader() {
|
|
const [show, setShow] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setShow(false), 1100);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div id="preloader" className="preloader">
|
|
<div className="animation-preloader">
|
|
<div className="spinner"></div>
|
|
<div className="txt-loading">
|
|
<span data-text-preloader="H" className="letters-loading">
|
|
H
|
|
</span>
|
|
<span data-text-preloader="A" className="letters-loading">
|
|
A
|
|
</span>
|
|
<span data-text-preloader="I" className="letters-loading">
|
|
I
|
|
</span>
|
|
<span data-text-preloader="L" className="letters-loading">
|
|
L
|
|
</span>
|
|
<span data-text-preloader="E" className="letters-loading">
|
|
E
|
|
</span>
|
|
<span data-text-preloader="A" className="letters-loading">
|
|
A
|
|
</span>
|
|
<span data-text-preloader="R" className="letters-loading">
|
|
R
|
|
</span>
|
|
<span data-text-preloader="N" className="letters-loading">
|
|
N
|
|
</span>
|
|
<span data-text-preloader="I" className="letters-loading">
|
|
I
|
|
</span>
|
|
<span data-text-preloader="N" className="letters-loading">
|
|
N
|
|
</span>
|
|
<span data-text-preloader="G" className="letters-loading">
|
|
G
|
|
</span>
|
|
</div>
|
|
<p className="text-center">Loading</p>
|
|
</div>
|
|
<div className="loader">
|
|
<div className="row">
|
|
<div className="col-3 loader-section section-left">
|
|
<div className="bg"></div>
|
|
</div>
|
|
<div className="col-3 loader-section section-left">
|
|
<div className="bg"></div>
|
|
</div>
|
|
<div className="col-3 loader-section section-right">
|
|
<div className="bg"></div>
|
|
</div>
|
|
<div className="col-3 loader-section section-right">
|
|
<div className="bg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|