Okay, let's tackle this user request. They want a single-page web app with a looping animated loading sequence using GSAP. The file needs to be self-contained in index.html, using the provided gsap.min.js. The animation should have morphing rounded shapes and a staggered row of dots on a GSAP timeline with smooth easing. 

First, I need to structure the HTML. Since it's a single file, I'll include all CSS and JS inline. The background should be dark, so I'll set the body's background color to something like #0f0f0f. 

For the shapes, maybe using SVG elements would be good for morphing. But since the user mentioned rounded shapes, perhaps divs with border-radius could work. However, morphing SVG paths might be more dynamic. But SVG can be a bit complex for morphing. Alternatively, using GSAP's ability to morph divs with clip-path or other properties. Wait, GSAP has a MorphSVGPlugin, but I'm not sure if that's included in the minified version. The user provided gsap.min.js, so maybe I should stick to basic properties.

Another approach: using multiple div elements with different shapes (like circles, squares) and animate their scale, rotation, and opacity. Maybe using GSAP's timeline to loop the animation. 

For the staggered row of dots, creating a series of small circles in a row and animating their scale or opacity in a staggered way using GSAP's stagger methods.

I'll need to set up the HTML structure with a container div that holds all the animated elements. Then, in the script, create a GSAP timeline that loops infinitely. 

In the CSS, make sure the body has a dark background, and the shapes are positioned absolutely so they can move around. The container should be relative to contain the absolute elements.

Let me outline the steps:

1. Create the HTML structure with a container div inside the body.
2. Style the body with a dark background and full viewport size.
3. Style the shapes (like circles, maybe different classes) with initial positions, colors, and border-radius.
4. In the JS, use GSAP to create a timeline that animates these shapes. For morphing, maybe scale them up/down, rotate, and change colors.
5. Add the staggered dots: create multiple divs with class 'dot', arrange them in a row, then use GSAP's staggerTo or staggerFrom to animate their scale or opacity.
6. Ensure the timeline repeats infinitely with a smooth easing, maybe using Sine.easeInOut or something similar.

Wait, the user mentioned morphing rounded shapes. So perhaps having multiple shapes that transform into each other? Like a circle morphing into a square? But without SVG, that might be tricky. Alternatively, using CSS clip-path or border-radius changes. For example, a circle (border-radius: 50%) animating to a square (border-radius: 0%), but that's a bit of a morph. Not perfect, but could work for a simple effect.

Alternatively, using transform: scaleX and scaleY to make them look like they're morphing. Maybe combining with rotation.

For the timeline, I can create a timeline that first scales the shapes, then moves them, then another animation, and loops. The staggered dots could pulse in sequence. 

Let me sketch some code:

In the CSS:

body {
  margin: 0;
  background: #0f0f0f;
  overflow: hidden;
  height: 100vh;
}

.shape {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.7;
}

Then, in the JS:

gsap.to(".shape", {
  duration: 2,
  scale: 1.5,
  opacity: 0,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
});

But that's just a simple animation. To make a timeline with multiple steps:

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to(".shape", { duration: 1, x: 100, y: 50, scale: 1.5, rotation: 360, ease: "power1.inOut" })
  .to(".shape", { duration: 1, x: -100, y: -50, scale: 1, rotation: 0, ease: "power1.inOut" }, "+=0.5");

But maybe more complex. Also, adding multiple shapes. So in the HTML, have multiple divs with class 'shape' and different initial positions.

For the dots: create a container with class 'dots' and several divs inside:

<div class="dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS for dots:

.dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  display: inline-block;
  margin: 0 5px;
  opacity: 0.5;
}

Then in JS:

gsap.staggerTo(".dot", 0.5, {
  scale: 2,
  opacity: 1,
  y: -10,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
}, 0.2);

But need to integrate this into the timeline. Alternatively, have the timeline control both the shapes and the dots.

Putting it all together in the timeline:

const tl = gsap.timeline({ repeat: -1 });

tl.to(".shape1", { duration: 2, x: 200, y: -100, scale: 1.5, rotation: 360, ease: "sine.inOut" })
  .to(".shape2", { duration: 2, x: -200, y: 100, scale: 0.5, rotation: -360, ease: "sine.inOut" }, 0)
  .staggerFrom(".dot", 0.5, { scale: 0, opacity: 0, y: 10, ease: "back.out(1.7)" }, 0.2, "-=1.5");

But need to make sure the animations overlap and loop smoothly. Also, using different easing functions for variety.

Putting all into the index.html file:

Start with the basic HTML structure, include the style and script tags. The gsap.min.js is already in the directory, so reference it with a script tag.

Testing the code: make sure that the shapes are animated and the dots pulse in a staggered way. Also, the background is dark. 

Potential issues: initial positioning of shapes so they don't all overlap. Maybe position them randomly in the CSS with different top and left values.

So, in the HTML:

<div id="container">
  <div class="shape" style="top: 20%; left: 30%; background: #ff4757;"></div>
  <div class="shape" style="top: 50%; left: 60%; background: #57ff47;"></div>
  <div class="shape" style="top: 70%; left: 40%; background: #4757ff;"></div>
</div>

And the dots in a div:

<div class="dots" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

In the CSS, set the dots to be positioned absolutely at the bottom center.

Putting all together, the index.html would have:

- The shapes with different initial positions and colors.
- The dots in a row at the bottom.
- GSAP animations for the shapes and dots in a timeline.

Testing this setup should give a looping animation with morphing shapes and pulsing dots. The easing used in GSAP can be adjusted for smoothness, like using "sine.inOut" or "elastic.out(1, 0.3)" for more bounce.

Finally, ensure that the HTML file includes all the code inline, with no external resources except the local gsap.min.js.

Okay, the user wanted a single-page web app with a looping animated loading sequence using GSAP. They specified that everything should be in one index.html file, with CSS and JS inline, and no external resources except the provided gsap.min.js.

First, I structured the HTML with a container for the shapes and dots. The CSS sets a dark background, positions the elements, and styles the shapes and dots. The shapes are absolutely positioned to allow for movement, and the dots are centered at the bottom.

In the JavaScript, I created a GSAP timeline that loops infinitely. The shapes have animations for position, scale, and rotation, using sine easing for smooth transitions. The dots use a staggered animation with a back easing effect to create a pulsing effect. The timeline is set to repeat forever, making the animation loop seamlessly.

I made sure to include the gsap.min.js script tag and referenced it correctly. All styles and scripts are inline as required. The colors and positions of the shapes are varied to add visual interest. The dots' animation starts from scale 0 and grows, then shrinks again, creating a dynamic loading effect.

Testing the code should confirm that the animation runs smoothly, with shapes morphing and dots pulsing in sync. The dark background meets the user's request, and the self-contained file ensures no external dependencies. This should fulfill the user's requirements effectively.