Battery Charging UI 🔋 A dynamic and stylish battery charging interface built with HTML and CSS. This project simulates a battery charging process using smooth animations and color transitions, creating an interactive and visually appealing UI.
🛠 Features Charging Animation: A fluid charging animation with color changes from red to green, indicating different levels of charge. CSS Keyframes: Smooth transitions and charging effects created with CSS keyframes. Customizable Delay: Delayed animation start to simulate real-world battery charging. 🚀 Technologies HTML5: Used for structuring the content and layout. CSS3: For styling the elements and creating the charging animation using keyframes. 📁 Project Structure bash Copy code |– index.html # Main HTML file |– style.css # Styles and animations |– img.png # Battery image for UI 🌟 Getting Started To run this project locally:
Clone the repository:
bash Copy code git clone https://github.com/your-username/battery-charging-ui.git Open the project:
Open the index.html file in any web browser to see the battery charging animation in action. 🎨 Customization Animation Timing: Modify the animation-duration or animation-delay in style.css to control the speed and start time of the charging animation. Battery Image: Replace the img.png file with your custom image for a different battery design.
🤝 Contributing Contributions, issues, and feature requests are welcome! Feel free to open a pull request or submit an issue.
📄 Li
✨ Demo Check out the live demo here. (https://mehak-mehtab01.github.io/Battery-Charging-Animation-/)