<!-- source-hash: b449369dfa3e96c7b37fd5b86f513eff -->
A React context provider that manages global loading state with an animated progress bar that appears at the top of the screen during loading operations.

## Key Components

- **LoadingProvider**: Context provider component that wraps the application and manages loading state
- **useLoading**: Custom hook to access loading state and control functions from any component
- **LoadingContext**: React context that holds the loading state and setter function
- **Progress Bar**: Animated top-level progress indicator that simulates loading progress

## Usage Example

```typescript
// Wrap your app with the provider
function App() {
  return (
    <LoadingProvider>
      <YourAppContent />
    </LoadingProvider>
  )
}

// Use the loading state in any component
function DataComponent() {
  const { isLoading, setIsLoading } = useLoading()

  const fetchData = async () => {
    setIsLoading(true)
    try {
      const data = await api.getData()
      // Process data
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <button onClick={fetchData} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Fetch Data'}
    </button>
  )
}
```

The progress bar automatically animates from 10% to 90% during loading, completes at 100% when loading finishes, then fades out after 500ms. The bar appears as a thin white line fixed to the top of the viewport with maximum z-index for visibility.