Airpln-UI ✈

Custom Designs to Elevate Your Airline Website!
Click Me!
Burst Button Interactive button with plane burst effects
Orbit Loading A smooth, circular loading animation
Cloud Loading Scenic loading with clouds and planes
Book Flight
Progress Button Animated booking confirmation button
Orbit Loading Circle Progress ring with rotating plane
Plane Background Animated flying planes background

Getting Started

Quick setup guide to integrate Airpln-UI into your project

Installation
// Using NPM npm install @ronantakizawa/airpln-ui // Using CDN <script type="module"> import { BurstButton, ProgressButton, OrbitLoading, CloudLoading, OrbitLoadingCircle } from 'https://cdn.jsdelivr.net/npm/@ronantakizawa/airpln-ui@1.1.0/dist/index.mjs'; </script>

Implementation

Examples of how to use Airpln-UI components in your code

Usage in HTML
<orbit-loading></orbit-loading> <burst-button>Click Me!</burst-button> <progress-button>Book Flight</progress-button> <cloud-loading></cloud-loading> <orbit-loading-circle></orbit-loading-circle>
Usage in React
import '@ronantakizawa/airpln-ui' function App() { return ( <div> <orbit-loading></orbit-loading> <burst-button>Click Me!</burst-button> <progress-button>Book Flight</progress-button> <cloud-loading></cloud-loading> <orbit-loading-circle></orbit-loading-circle> </div> ) }

Coming Soon (3D Flight Visualizer)

Check out our 3D Flight Visualizer!