Update App.tsx

Key Changes:
Multiple Concentric Circles:

The animation now includes five concentric circles, each with different sizes (60vw, 50vw, 40vw, 30vw, 25vw).
Each circle rotates and scales infinitely with different speeds and sizes for a more dynamic and visually appealing effect.
No Central Rectangle:

The center of the animation no longer contains a rectangle or any other shape, just the expanding and contracting circles.
More Color Variations:

The circles now have diverse border colors that change as they rotate. These colors can be modified to fit the theme of your website.
Dynamic Circle Behavior:

Each circle has an animate behavior where it rotates (rotate: 360 or rotate: -360) and scales (scale: [1, 1.5, 1]) to give a continuous expanding and contracting effect.
Different timing for each circle’s animation, creating a varied but harmonious effect.
Loading Text:

The loading text is pulsing and has a gradient background that changes over time to enhance the loading experience.

src/App.tsx

@@ -25,7 +25,7 @@ const App: React.FC = () => {
         <div className="relative w-full h-full flex items-center justify-center">
           {/* Outer Circle */}
           <motion.div
-            className="absolute w-[50vw] h-[50vw] border-8 border-t-8 border-transparent rounded-full"
+            className="absolute w-[60vw] h-[60vw] border-8 border-t-8 border-transparent rounded-full"
             style={{
               borderTopColor: '#FF7F50',
               borderRightColor: '#FFD700',
@@ -45,7 +45,7 @@ const App: React.FC = () => {
 
           {/* Middle Circle */}
           <motion.div
-            className="absolute w-[35vw] h-[35vw] border-8 border-t-8 border-transparent rounded-full"
+            className="absolute w-[50vw] h-[50vw] border-8 border-t-8 border-transparent rounded-full"
             style={{
               borderTopColor: '#FF6347',
               borderRightColor: '#ADFF2F',
@@ -65,7 +65,7 @@ const App: React.FC = () => {
 
           {/* Inner Circle */}
           <motion.div
-            className="absolute w-[20vw] h-[20vw] border-8 border-t-8 border-transparent rounded-full"
+            className="absolute w-[40vw] h-[40vw] border-8 border-t-8 border-transparent rounded-full"
             style={{
               borderTopColor: '#FF4500',
               borderRightColor: '#800080',
@@ -83,6 +83,46 @@ const App: React.FC = () => {
             }}
           />
 
+          {/* Extra Inner Circle */}
+          <motion.div
+            className="absolute w-[30vw] h-[30vw] border-8 border-t-8 border-transparent rounded-full"
+            style={{
+              borderTopColor: '#32CD32',
+              borderRightColor: '#00FFFF',
+              borderBottomColor: '#8A2BE2',
+              borderLeftColor: '#FF69B4',
+            }}
+            animate={{
+              rotate: -360,
+              scale: [1, 1.2, 1],
+            }}
+            transition={{
+              repeat: Infinity,
+              duration: 2.2,
+              ease: 'easeInOut',
+            }}
+          />
+
+          {/* Additional Circle */}
+          <motion.div
+            className="absolute w-[25vw] h-[25vw] border-8 border-t-8 border-transparent rounded-full"
+            style={{
+              borderTopColor: '#8A2BE2',
+              borderRightColor: '#00BFFF',
+              borderBottomColor: '#FF6347',
+              borderLeftColor: '#FFD700',
+            }}
+            animate={{
+              rotate: 360,
+              scale: [1, 1.15, 1],
+            }}
+            transition={{
+              repeat: Infinity,
+              duration: 2.7,
+              ease: 'easeInOut',
+            }}
+          />
+
           {/* Loading Text with Pulse and Gradient Animation */}
           <motion.div
             className="absolute text-white text-xl font-bold animate-pulse"