forked from UKSOURCE/hailearning.edu.vn
feat: implement news details page with content and sidebar
This commit is contained in:
49
app/components/Loader.tsx
Normal file
49
app/components/Loader.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Loader() {
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setShow(false), 700);
|
||||
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="V" className="letters-loading">V</span>
|
||||
<span data-text-preloader="I" className="letters-loading">I</span>
|
||||
<span data-text-preloader="S" className="letters-loading">S</span>
|
||||
<span data-text-preloader="A" className="letters-loading">A</span>
|
||||
<span data-text-preloader="W" className="letters-loading">W</span>
|
||||
<span data-text-preloader="A" className="letters-loading">A</span>
|
||||
<span data-text-preloader="Y" className="letters-loading">Y</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user