Loader 1Retro

1"use client";
2 
3import React, { useRef, useEffect, useState } from "react";
4 
5const LoaderRetro = () => {
6  const containerRef = useRef(null);
7  const textRef = useRef(null);
8  const [loadingPercentage, setLoadingPercentage] = useState(0);
9  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
10  const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });
11 
12  useEffect(() => {
13    const handleResize = () => {
14      if (containerRef.current) {
15        setDimensions({
16          width: containerRef.current.offsetWidth,
17          height: containerRef.current.offsetHeight,
18        });
19      }
20      if (textRef.current) {
21        setTextDimensions({
22          width: textRef.current.offsetWidth,
23          height: textRef.current.offsetHeight,
24        });
25      }
26    };
27 
28    handleResize();
29    window.addEventListener("resize", handleResize);
30    return () => window.removeEventListener("resize", handleResize);
31  }, []);
32 
33  useEffect(() => {
34    let interval = setInterval(() => {
35      setLoadingPercentage((prev) => {
36        if (prev >= 100) {
37          clearInterval(interval);
38          return 100;
39        }
40        return prev + 1;
41      });
42    }, 50);
43    return () => clearInterval(interval);
44  }, []);
45 
46  // Simplified logic for demo purposes - assume Left-to-Right swipe
47  const travelWidth = Math.max(0, dimensions.width - textDimensions.width);
48  const currentX = (travelWidth * loadingPercentage) / 100;
49 
50  const barStyle = {
51      height: "100%",
52      width: `${loadingPercentage}%`,
53      left: 0,
54      top: 0, 
55  };
56  
57  const textStyle = {
58      left: `${currentX}px`,
59      bottom: 0, // Align closer to bottom like original if needed
60      top: "auto"
61  };
62 
63  return (
64      <div className="w-full h-screen p-4 flex flex-col font-mono text-black bg-white">
65        <div className="w-full border-2 border-black flex justify-between px-2 py-1 bg-white mb-2 shadow-[4px_4px_0px_0px_#000000]">
66             <span className="font-bold uppercase text-sm">SYSTEM_LOADER.exe</span>
67             <span className="font-bold uppercase text-sm">{loadingPercentage}%</span>
68        </div>
69        
70        <div
71            ref={containerRef}
72            className="w-full h-full overflow-hidden relative border-2 border-black shadow-[4px_4px_0px_0px_#000000] bg-white"
73        >
74            <div className="bg-white h-full w-full absolute top-0 left-0 z-[10]"></div>
75 
76            <div
77                ref={textRef}
78                style={textStyle}
79// … truncated