Loader 1

1"use client";
2 
3import React, { useRef, useEffect } from "react";
4import { useState } from "react";
5 
6const Loader = () => {
7  const textRef = useRef(null);
8  const [loading, setLoading] = useState(false);
9  const [loadingPercentage, setLoadingPercentage] = useState(0);
10  const [initialAdjustment, setInitialAdjustment] = useState(0);
11 
12  useEffect(() => {
13    if (textRef.current) {
14      setInitialAdjustment(textRef.current.offsetWidth);
15    }
16  });
17 
18  useEffect(() => {
19    let i = 0;
20    const interval = setInterval(() => {
21      if (i === 100) {
22        setLoading(false);
23      }
24      setLoadingPercentage((prev) => {
25        if (prev >= 100) {
26          clearInterval(interval);
27          return 100;
28        }
29        return prev + 1;
30      });
31      i++;
32    }, 50);
33 
34    return () => clearInterval(interval);
35  }, []);
36 
37  const textAdjustment = initialAdjustment * (1 - loadingPercentage / 100);
38 
39  return (
40    <div className="loading-page w-[100vw] h-[100vh] overflow-hidden relative z-10">
41      <div className="bg-black h-full w-full z-[10]"></div>
42      <div
43        style={{ right: `${100 - loadingPercentage}%` }}
44        className="bg-white h-full w-full absolute z-[30] top-0 overflow-hidden transition-all ease"
45      >
46        <div
47          style={{ right: `-${textAdjustment}px` }}
48          className="text-black z-[40] bottom-0 absolute text-[100px] px-5 inner-text"
49        >
50          {loadingPercentage}
51        </div>
52      </div>
53      <div
54        ref={textRef}
55        style={{
56          right: `calc(${100 - loadingPercentage}% - ${textAdjustment}px)`,
57        }}
58        className="text-white z-[20] bottom-0 absolute text-[100px] transition-all ease px-5 outer-text"
59      >
60        {loadingPercentage}
61      </div>
62    </div>
63  );
64};
65 
66export default Loader;