File size: 2,066 Bytes
5372a29 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import React, { useState, useEffect } from 'react';
interface LoadingScreenProps {
isBar?: boolean;
progress?: number;
}
const LoadingScreen: React.FC<LoadingScreenProps> = ({ isBar = false, progress = 0 }) => {
const [dots, setDots] = useState('.');
useEffect(() => {
const dotAnimation = setInterval(() => {
setDots(prevDots => {
if (prevDots.length >= 5) {
return '.';
}
return prevDots + '.';
});
}, 1000);
return () => clearInterval(dotAnimation);
}, []);
return (
<div className="fixed inset-0 z-50 flex h-screen w-screen flex-col items-center justify-center bg-bg font-sans text-fg">
<h1 className="mb-8 text-3xl font-bold">Mempersiapkan Presentasi...</h1>
{isBar ? (
<>
<div style={styles.progressBarContainer}>
<div style={{ ...styles.progressBar, width: `${progress}%` }}></div>
</div>
<p className="mt-4 text-xl font-medium">{Math.round(progress)}%</p>
</>
) : (
<div className='flex flex-row gap-10'>
<h2 className="mt-8 text-3xl font-bold">
LOADING
<span className="w-12 text-left">{dots}</span>
</h2>
</div>
)}
</div>
);
};
const styles: { [key: string]: React.CSSProperties } = {
container: {
width: '100vw',
height: '100vh',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#071026',
color: '#e6eef8',
fontFamily: 'Inter, system-ui, sans-serif',
},
title: {
marginBottom: '2rem',
},
progressBarContainer: {
width: '50%',
maxWidth: '500px',
height: '20px',
backgroundColor: '#0e2335',
borderRadius: '10px',
overflow: 'hidden',
},
progressBar: {
height: '100%',
backgroundColor: '#60a5fa',
},
progressText: {
marginTop: '1rem',
fontSize: '1.2rem',
}
};
export default LoadingScreen;
|