minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/components/common/Preloader.tsx Normal file
View File

@@ -0,0 +1,82 @@
'use client';
import { useEffect, useState } from 'react';
const Preloader = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Simulate loading time or wait for window load
const handleLoad = () => {
// Add a small delay to ensure assets are loaded or at least a smooth transition
setTimeout(() => {
setIsLoading(false);
}, 500);
};
if (document.readyState === 'complete') {
handleLoad();
} else {
window.addEventListener('load', handleLoad);
// Fallback in case load event already fired or takes too long
const timeoutId = setTimeout(handleLoad, 3000);
return () => {
window.removeEventListener('load', handleLoad);
clearTimeout(timeoutId);
};
}
}, []);
if (!isLoading) return null;
return (
<div id="preloader" className={`preloader ${!isLoading ? 'loaded' : ''}`} style={{ display: isLoading ? 'block' : 'none' }}>
<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>
);
};
export default Preloader;