The user wants me to create a single-page web app with a looping animated loading sequence on a dark background. Let me first check if gsap.min.js exists in the current directory, then create the index.html file.

The GSAP file exists. Now I'll create a single index.html with everything inline - CSS in <style>, JS in <script>, loading gsap.min.js via <script src="gsap.min.js">.

Let me design the animation:

1. **Dark background** - full viewport, dark (#0a0a1a or similar)
2. **Morphing rounded shapes** - a central shape that morphs between different rounded shapes (circle, rounded square, pill, etc.) using GSAP morphing, or more practically, using shape morphing with SVG or canvas. Since we can't use external resources, I'll use SVG paths or CSS shapes.

Actually, GSAP doesn't have a built-in SVG morphing plugin without the MorphSVGPlugin. But I can simulate morphing by:
- Using CSS border-radius animation on a div
- Or using SVG with path morphing (GSAP can animate SVG path d attribute)

Let me think about this more carefully. GSAP can animate the `d` attribute of SVG paths, but only if both paths have the same number of commands/points. I'll create an SVG path with matching command structures.

Alternatively, I can use a simpler approach:
- A central div that morphs between shapes using border-radius and scale transforms
- A row of dots that stagger in/out

Let me go with the SVG path approach for true morphing, and a row of dots.

For the morphing shapes, I'll use a path that goes through different shapes:
1. Circle (approximated with cubic bezier)
2. Rounded square
3. Pill shape
4. Triangle-ish rounded shape

Actually, let me use a simpler but visually effective approach:
- Use a div with border-radius animation to morph between shapes
- Use GSAP to animate width, height, border-radius, rotation

And for the dots, a staggered row of dots that animate in sequence.

Let me create something polished:

**Animation plan:**
1. A central container with a shape that morphs between:
   - A circle (border-radius: 50%)
   - A rounded square (border-radius: 25%)
   - A pill shape (very wide, small height)
   - A diamond (rotate 45deg)
   
2. Below the shape, a row of 5-7 dots that pulse/stagger in a wave pattern

3. Everything orchestrated on a GSAP timeline with smooth easing, looping infinitely.

Let me write this out now.

For SVG morphing, I'll create a path that morphs. Let me use a simpler CSS-based approach with GSAP animating CSS properties.

Actually, let me use SVG for the morphing shape - I'll create an SVG path with matching number of points for different shapes.

Let me use a path with 8 control points (a rounded square) that can morph into a circle, a pill, etc.

Here's my plan:

SVG path with 8 cubic bezier curves (like a rounded rectangle) that can morph.

Actually, this is getting complex. Let me use a simpler but beautiful approach:

1. A central div that uses GSAP to animate:
   - border-radius (morphing between circle, square, etc.)
   - scale (pulsing)
   - rotation (spinning)
   - background color (subtle shift)

2. Below it, 7 dots that animate with stagger.

Let me write the full code now.

I'll use CSS shapes with border-radius morphing - it's simpler and looks great.

Let me design the SVG path approach properly. I'll use a path with 4 cubic bezier curves (like a superellipse/rounded rectangle).

For a rounded rectangle with corner radius r:
- Start at (r, 0)
- Line to (w-r, 0)
- Curve to (w, 0) then (w, r)
- Line to (w, h-r)
- Curve to (w, h) then (w-r, h)
- Line to (r, h)
- Curve to (0, h) then (0, h-r)
- Line to (0, r)
- Curve to (0, 0) then (r, 0)

For a circle centered at (cx, cy) with radius R:
- Start at (cx+R, cy)
- Curve to (cx+R, cy+R*0.552) then (cx+R*0.552, cy+R) then (cx, cy+R)
- etc.

The problem is matching the number of commands. Let me use a simpler approach.

Let me use a 4-point path (4 cubic bezier curves) that can represent different shapes:

For a circle approximation with 4 cubic beziers:
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z

For a rounded square:
M 80,-20 C 80,-11 71,0 60,0 L -60,0 C -71,0 -80,-11 -80,-20 L -80,-60 C -80,-71 -71,-80 -60,-80 L 60,-80 C 71,-80 80,-71 80,-60 Z

This won't work well because the command structures differ.

Let me take a different approach. I'll use 4 paths, each with exactly the same structure (same number of commands, same types), just different coordinate values.

Actually, the simplest approach that works perfectly with GSAP's native ability:

Use an SVG path with the same number of curve points, just different coordinates. GSAP can animate the `d` attribute if the path structures match.

Let me use a path with 8 segments (4 cubic beziers for the 4 sides, each with a control point before and after):

Actually, the simplest reliable approach: Use a single cubic bezier curve with 4 segments (one for each "corner" of the shape), and morph the control points.

Let me just use a simpler approach. I'll use 4 paths that all have the same structure:

```
M x1,y1 C x2,y2 x3,y3 x4,y4 C x5,y5 x6,y6 x7,y7 C x8,y8 x9,y9 x10,y10 C x11,y11 x12,y12 x13,y13 Z
```

Each path has: M, 4x C, Z - same structure. GSAP can animate between these.

Let me define shapes centered at 0,0:

Circle (radius 100):
```
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z
```

Rounded Square (100x100, corner radius 20):
```
M 80,0 C 80,11 71,20 60,20 C -60,20 -71,11 -80,0 C -80,-11 -71,-20 -60,-20 C 60,-20 71,-11 80,0 Z
```

Hmm, this doesn't look right. Let me think more carefully.

For a rounded rectangle centered at (0,0) with width=160, height=160, corner radius=20:

Top edge: from (-60, -80) to (60, -80)
Top-right corner: curve from (60, -80) to (80, -60)
Right edge: from (80, -60) to (80, 60)
Bottom-right corner: curve from (80, 60) to (60, 80)
Bottom edge: from (60, 80) to (-60, 80)
Bottom-left corner: curve from (-60, 80) to (-80, 60)
Left edge: from (-80, 60) to (-80, -60)
Top-left corner: curve from (-80, -60) to (-60, -80)

As a path with 4 cubic beziers (one per side, each with 2 control points and 1 endpoint):

Actually, to make it simpler, let me just use 4 cubic bezier curves, one for each "corner to corner" segment:

For a circle radius 100:
```
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z
```

For a rounded square width 160, corner radius 20, centered at 0,0:
The top side goes from (-60, -80) to (60, -80)
The top-right corner arcs from (60, -80) to (80, -60)

Let me trace the full path:
- Start at left side middle: (-80, 0)
- Go up to top-left corner start: (-80, -60)
- Arc to top side: (-60, -80)
- Go across top: to (60, -80)
- Arc to right side: (80, -60)
- Go down right side: to (80, 60)
- Arc to bottom side: (60, 80)
- Go across bottom: to (-60, 80)
- Arc to left side: (-80, 60)
- Go back to start: (-80, 0)

As 4 cubic beziers (one per side, each covering the straight part + one corner arc):

Actually, let me reconsider. I'll use 4 cubic beziers where each covers from one corner to the next (including the straight part and the corner arc):

Wait, I think the simplest approach that will look great is:

1. Use a div with GSAP animating CSS properties like border-radius, width, height, rotation, scale
2. This is much simpler and more reliable

Let me go with this approach. I'll create a really polished version:

Central shape: a div that morphs between:
- Circle (border-radius: 50%)
- Rounded square (border-radius: 20%)
- Pill (border-radius: 50%, but width >> height)
- Diamond (rotated 45°)

Actually, let me use SVG with a path that has the same number of points. I'll make it work.

Let me use a simpler path structure. I'll use 4 cubic beziers, each describing one quadrant of the shape.

For a circle radius 100:
```
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z
```

For a rounded square (200x200, corner radius 30):
The path goes around the perimeter with rounded corners.

Let me simplify. I'll actually use 4 shapes, each defined as a path with the same number of commands:

Path 1 (Circle): M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z

Path 2 (Rounded Square): M 90,0 C 90,49.7 49.7,90 0,90 C -49.7,90 -90,49.7 -90,0 C -90,-49.7 -49.7,-90 0,-90 C 49.7,-90 90,-49.7 90,0 Z
This is actually a circle with radius 90... Hmm.

Let me try a different approach. Instead of trying to morph SVG paths, let me create a visually stunning animation using CSS properties and GSAP.

Here's my revised plan:

**Shape morphing**: Use a div container with GSAP animating:
- `border-radius` (morphs between circle, rounded square, etc.)
- `width` and `height` (changes aspect ratio)
- `transform: rotate()` (spins)
- Inside, a gradient or subtle color shift

**Dot row**: 7 dots below the shape, staggered animation

**Timeline**: loops with `repeat: -1`

Let me write this now. I'll make it really polished.

Actually, you know what, let me go with SVG paths. I'll define 4 different shapes, each using the exact same path structure (with the same number and types of commands), and GSAP will smoothly interpolate between them.

I'll use a path with 8 cubic bezier curves (matching the 8 segments of a rounded rectangle: 4 straight sides + 4 corner arcs).

Wait, I'll use a simpler approach: 4 cubic bezier curves, one for each "corner-to-corner" segment. For a circle, each segment is a cubic bezier arc. For a square, each segment is a straight line (with control points on the line).

Let me use this structure:
```
M x1,y1 C x2,y2 x3,y3 x4,y4 C x5,y5 x6,y6 x7,y7 C x8,y8 x9,y9 x10,y10 C x11,y11 x12,y12 x13,y13 Z
```

For a circle (radius 100):
```
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z
```

For a rounded square 200x200 corner radius 25:
The path goes: start at right-middle, up to top-right corner area, arc around corner, straight across top, arc around top-left corner, down left side, arc around bottom-left, straight across bottom, arc around bottom-right, up right side.

Hmm, this doesn't match the 4-segment circle structure.

OK let me just use a different approach. I'll define 4 shapes each with the same number of path commands. Let me use a path with 20 commands or so.

Actually, you know what, I think the cleanest approach for a truly beautiful morphing animation is to use CSS border-radius morphing with GSAP. It's simpler, more reliable, and looks great. Let me just do that.

Let me write the complete file now.

Here's my design:

```
- Dark background (#0f0f1a or similar)
- Central morphing shape:
  - Phase 1: Large circle, pulsing
  - Phase 2: Morphs into rounded square, rotates slightly  
  - Phase 3: Morphs into pill shape, elongates
  - Phase 4: Morphs back to circle
  - Throughout: subtle color shifts (blue -> purple -> teal)
- Below: 7 dots in a row, staggered animation
  - Each dot grows/shrinks in sequence
  - Color matches the current shape color
- Timeline loops infinitely
```

Let me write the code. I'll use GSAP's timeline with `repeat: -1` and `yoyo: true` for some effects.

Let me write it all out now.

Actually, I want to do SVG path morphing because it looks cooler. Let me just use a simple approach:

I'll define a path that has the same number of coordinates for each shape. The key insight is that I can use a path with multiple points and just move those points around.

Let me use a path with 8 points (a simple polygon), and then use GSAP's morphSVG... wait, I don't have MorphSVGPlugin.

OK, GSAP can animate the `d` attribute of SVG paths directly as long as the number and types of commands match. Let me use this approach.

I'll define 4 paths, each with the exact same structure:
```
M x1,y1 C x2,y2 x3,y3 x4,y4 C x5,y5 x6,y6 x7,y7 C x8,y8 x9,y9 x10,y10 C x11,y11 x12,y12 x13,y13 Z
```

Each path has exactly: M, 4xC, Z - matching structure.

Shape 1: Circle (radius 100)
```
M 100,0 C 100,55.2 55.2,100 0,100 C -55.2,100 -100,55.2 -100,0 C -100,-55.2 -55.2,-100 0,-100 C 55.2,-100 100,-55.2 100,0 Z
```

Shape 2: Rounded Square (width=160, height=160, corner radius=20)
I need to express this as 4 cubic bezier curves.
For a rounded square, the path goes:
- Start at right-middle (80, 0)
- Up to top-right corner area (80, -60)
- Arc to top side (-60, -80) via control points
- etc.

Actually, a rounded rectangle with 4 cubic bezier curves doesn't work well because a rounded rectangle has 8 segments (4 straight + 4 arcs).

Let me use a path with 8 cubic beziers instead:

```
M x1,y1 C x2,y2 x3,y3 x4,y4 C x5,y5 x6,y6 x7,y7 C x8,y8 x9,y9 x10,y10 C x11,y11 x12,y12 x13,y13 C x14,y14 x15,y15 x16,y16 C x17,y17 x18,y18 x19,y19 C x20,y20 x21,y21 x22,y22 C x23,y23 x24,y24 x25,y25 Z
```

For a circle with 8 cubic beziers (each spanning 45 degrees):
Actually, this is getting too complicated. Let me just use the CSS approach.

Let me go with a hybrid approach:
1. Use a div for the main shape, animate CSS properties with GSAP
2. Add SVG elements for decorative elements if needed

Here's my final plan for the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* Reset, full viewport, dark bg */
  /* Styling for the morphing shape container */
  /* Styling for dots */
</style>
</head>
<body>
  <!-- Shape container -->
  <div id="shape-container">
    <div id="morphing-shape"></div>
  </div>
  
  <!-- Dots row -->
  <div id="dots-row">
    <div class="dot"></div>
    ... x7
  </div>
  
  <script src="gsap.min.js"></script>
  <script>
    // GSAP timeline animation
    const tl = gsap.timeline({repeat: -1});
    // ... morphing shape animations
    // ... staggered dots
  </script>
</body>
</html>
```

Let me refine the CSS approach for morphing:
- I'll use a div with `border-radius` that I animate
- `width` and `height` to change shape
- `transform: rotate()` for spinning
- `background` for color shifts
- `box-shadow` for glow effects

For the dots:
- 7 small circles
- Animate scale and opacity with stagger
- Each dot pulses in sequence

Let me write the full code now. I'll make it really polished with smooth easing.

Final design:

Timeline structure:
1. 0s-2s: Shape is a circle, pulses (scale 1 → 1.1 → 1)
2. 2s-4s: Morphs to rounded square (border-radius: 50% → 20%), rotates 90°
3. 4s-6s: Morphs to pill shape (width increases, height decreases), rotates more
4. 6s-8s: Morphs back to circle, resets rotation
5. Throughout: color shifts
6. Dots: continuous staggered animation, each dot pulses briefly

Let me write the code. I'll use `ease: "power2.inOut"` or similar for smoothness.

Actually, let me think about what "morphing rounded shapes" means more precisely. The user said "morphing rounded shapes" - so it's about shapes that morph between different rounded forms.

Let me create the file now. I'll make it beautiful.

For the shape, I'll use a combination of:
- border-radius morphing (circle ↔ rounded square ↔ pill)
- scale pulsing
- rotation
- background gradient shift

For the dots, I'll use:
- staggered scale animation
- the dots "travel" in a wave-like pattern

Let me write it all now.

I realize I should also add a subtle glow effect and maybe some particle-like elements for extra polish.

Let me write the complete file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: #0a0a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}
.shape-wrapper {
  position: relative;
  width: 120px; height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
}
#morphing-shape {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
}
.dots {
  display: flex;
  gap: 12px;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6366f1;
}
</style>
</head>
<body>
<div class="shape-wrapper">
  <div id="morphing-shape"></div>
</div>
<div class="dots" id="dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<script src="gsap.min.js"></script>
<script>
// ... GSAP code
</script>
</body>
</html>
```

Let me now write the full GSAP animation. I'll use a main timeline with repeat: -1.

For the shape morphing, I'll animate:
1. border-radius: 50% → 20% → 50% → 8% (pill-like) → 50%
2. width/height: 100px → 100px → 140x60 → 100px
3. rotation: 0 → 180 → 360
4. background gradient: shift colors
5. box-shadow: glow changes

For the dots, a separate timeline or a nested timeline with stagger.

Actually, let me think about the structure more carefully. I want a single orchestrated timeline.

Let me use labels for clarity:

```js
const tl = gsap.timeline({repeat: -1, ease: "power2.inOut"});

// Phase 1: Circle pulse
tl.to('#morphing-shape', {scale: 1.15, duration: 1, ease: "sine.inOut"})
  .to('#morphing-shape', {scale: 1, duration: 1, ease: "sine.inOut"})
  // Phase 2: Morph to rounded square
  .to('#morphing-shape', {borderRadius: '25%', rotation: 90, duration: 1.5, ease: "power3.inOut"})
  // Phase 3: Morph to pill
  .to('#morphing-shape', {width: 140, height: 60, borderRadius: '50%', rotation: 180, duration: 1.5, ease: "power3.inOut"})
  // Phase 4: Return to circle
  .to('#morphing-shape', {width: 100, height: 100, borderRadius: '50%', rotation: 360, duration: 1.5, ease: "power3.inOut"});
```

For the dots, I'll use a separate timeline or use the main timeline with position parameter.

Actually, the dots should animate continuously. Let me use a separate timeline for the dots that also loops.

For the dots, I want them to "ripple" - each dot grows and shrinks in sequence. I can use gsap.to with stagger:

```js
gsap.to('.dot', {
  scale: 1.8,
  opacity: 0.6,
  duration: 0.8,
  stagger: 0.12,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});
```

This is simpler and creates a nice wave effect.

Let me also add color shifts to the dots that match the shape.

Let me finalize the code now. I'll create a polished, complete implementation.

For the color scheme, I'll use:
- Primary: #6366f1 (indigo)
- Secondary: #8b5cf6 (purple)
- Tertiary: #06b6d4 (cyan)
- Quaternary: #ec4899 (pink)

The shape will shift through these colors.

Let me write the complete file now.

Actually, I want to make the shape morphing more interesting. Instead of just border-radius, let me also animate the shape's "form" by changing width/height ratio and using a combination of CSS transforms.

Let me finalize and write the code:

I'll make the morphing sequence:
1. Circle (2s): Scale pulse 1→1.2→1
2. Rounded Square (2s): border-radius 50%→20%, rotate 90°
3. Pill (2s): width becomes 140px, height becomes 60px, border-radius 50%, rotate 180°
4. Diamond (1.5s): rotate 45°, then 225°, scale adjust
5. Back to Circle (1.5s): everything resets

Total: ~9s per loop. That's a good pace.

Let me write the final code now.

The file is created. Let me verify the HTML structure is correct by reading it back.

2 script tags: one for gsap.min.js, one for the inline script. 10 references to gsap. Looks good. Let me verify the complete file once more.

Everything looks good. The file is complete, self-contained, and uses the pre-provided gsap.min.js. Let me summarize what I've built.