Flight Booking Animation - Copy this React, Tailwind Component to your project
Create a JSX component for a flight booking loading animation. The animation should feature a plane that moves along a specific axis based on the progress of the loading process (from 0 to 100%). The progress animation follows these stages: 0 15%: The plane moves horizontally along the X axis. 16 40%: The plane starts to ascend, moving up along the Y axis. 40 60%: The plane moves horizontally again without changing the Y position. 60 85%: The plane descends, moving down along the Y axis. 85 100%: The plane continues moving horizontally along the X axis at its original position. Include a progress bar below the plane, showing the current percentage of progress. The animation should be smooth, with transitions between the different stages. The plane's position should update dynamically as the progress value increases, and the progress bar should fill in real time. Use React hooks (useState, useEffect) to manage the progress state. The plane and progress bar should be styled for a modern, minimalistic look, aligning with a flight booking website theme that uses blue skies, minimal clouds, and a clean interface.
