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 (
)
}
// 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 (
)
}
```
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.