https://github.com/seraprogrammer/ezi
https://github.com/seraprogrammer/ezi
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/seraprogrammer/ezi
- Owner: seraprogrammer
- Created: 2025-03-10T07:03:47.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-03-10T07:08:27.000Z (11 months ago)
- Last Synced: 2025-03-10T08:22:54.765Z (11 months ago)
- Language: HTML
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Router
A lightweight, client-side dynamic routing system using Ezi.js. This project
provides seamless navigation with smooth transitions, loading indicators, and a
clean syntax for defining routes.
## Features
- **Dynamic Routing**: Load different templates based on the URL.
- **Smooth Page Transitions**: Fade-in effect for better user experience.
- **Loading Indicator**: Displays a progress bar when navigating.
- **404 Handling**: Custom 404 page for undefined routes.
- **Dark Mode Toggle**: Simple theme switcher in the settings page.
## Installation
No installation required. Just include Ezi.js from a CDN:
```html
```
## Usage
### HTML Structure
```html
Dynamic Router
.active {
color: #ff5733;
font-weight: bold;
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #ff5733, #ffc300);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.loading.active {
transform: scaleX(1);
}
.fade-enter {
opacity: 0;
transform: translateY(10px);
}
.fade-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s, transform 0.3s;
}
Home
About
Contact
Settings
404
Welcome Home
This is the home page
About Us
Learn more about our company
Contact Us
Send
Settings
Dark Mode
404 - Page Not Found
Sorry, the page you're looking for doesn't exist.
Go Home
```
## How It Works
- Clicking navigation links updates the URL and dynamically loads the respective
template.
- The `data-nav` attribute enables navigation without full page reloads.
- A loading indicator (`#loading-bar`) provides visual feedback.
- The `fade-enter` and `fade-enter-active` classes create smooth transitions.
## License
This project is open-source and available under the MIT License.