Loading Animation

Create a smooth, minimalist loading animation component with the following characteristics:

## Requirements:
- Continuous looping animation from 0% to 100%
- Animated progress bar that fills smoothly
- Dynamic percentage counter that updates in sync with the bar
- Responsive design
- Dark theme with black and gray colors
- No scroll or interaction required
- Smooth easing animations
- Perfect for showcasing loading states

## Component Features:
- Auto-animating progress bar
- Real-time percent...

'use client'

import { useEffect, useState } from 'react'

export default function ScrollAnimation() {
  const [displayPercent, setDisplayPercent] = useState(0)

  useEffect(() => {
    let animationId: number
    let startTime: number | null = null
    const duration = 4000 // 4 seconds

    const animate = (currentTime: number) => {
      if (startTime === null) startTime = currentTime

      const elapsed = currentTime - startTime
      const progress = elapsed % duration

      // Calculate ...

# Loading Animation Component - Documentation

## What is this?
A smooth, minimalist loading animation component that continuously animates a progress bar from 0% to 100% with a synchronized percentage counter. Perfect for showcasing loading states, progress indicators, or creating engaging visual elements on landing pages and applications.

## Installation

1. Copy the component code to your project: `components/LoadingAnimation.tsx`
2. Import it in your page:

```typescript
import LoadingAnima...