Page Transition Loading Indicator

Build a React component that displays a loading bar at the top of the page during navigation or async operations.

Requirements

Your component should:

1. Display a loading bar fixed at the top of the viewport
2. Show the loading bar when a "Start Loading" button is clicked
3. Automatically complete the loading animation after 3 seconds
4. Support customization of the bar color via a prop
5. Support customization of the bar height via a prop

Implementation

@generates

Test Cases

• When the Start Loading button is clicked, the loading bar becomes visible @test
• The loading bar automatically completes and disappears after 3 seconds @test
• The loading bar displays with a custom color when the color prop is provided @test
• The loading bar displays with a custom height when the height prop is provided @test

API

import React from 'react';

interface PageLoaderProps {
  color?: string;
  height?: number;
}

export const PageLoader: React.FC<PageLoaderProps>;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides top-of-page loading bar functionality with customization options.

@satisfied-by