https://github.com/withaarzoo/animated-loading-button
A customizable and animated loading button created with HTML, CSS, and JavaScript.
https://github.com/withaarzoo/animated-loading-button
css html js
Last synced: 6 months ago
JSON representation
A customizable and animated loading button created with HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/withaarzoo/animated-loading-button
- Owner: withaarzoo
- Created: 2024-01-10T07:32:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-17T13:48:42.000Z (over 1 year ago)
- Last Synced: 2024-11-15T19:37:58.456Z (8 months ago)
- Topics: css, html, js
- Language: CSS
- Homepage:
- Size: 10.7 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animated Loading Button
[](https://opensource.org/licenses/MIT)
[](https://github.com/withaarzoo/Animated-Loading-Button/stargazers)
[](https://github.com/withaarzoo/Animated-Loading-Button/network)
[](https://github.com/withaarzoo/Animated-Loading-Button/issues)A customizable and animated loading button created with HTML, CSS, and JavaScript.
## Demo

## Features
- Attractive animation on button click.
- Easy to integrate into your web projects.
- Customizable styles.## Installation
Include the following CSS and JavaScript files in your project:
```html
```
## Usage
Add the HTML structure for the button in your HTML file:
```html
Send Message
```
Initialize the button in your JavaScript file:
```javascript
document.addEventListener("DOMContentLoaded", function () {
const button = document.querySelector(".custom-btn");function toggleLoadingState() {
button.classList.toggle("loading");
}function handleButtonClick() {
toggleLoadingState();
setTimeout(toggleLoadingState, 3000);
}if (button) {
button.addEventListener("click", handleButtonClick);
}
});
```## Customization
- You can customize the button styles by modifying the CSS in the `animated-loading-button.css` file.
- Adjust the loading animation duration and appearance in the same CSS file.## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Inspired by [inspirecoding](https://codepen.io/inspirecoding).
## Contributing
Feel free to contribute by [opening an issue](https://github.com/withaarzoo/Animated-Loading-Button/issues) or creating a pull request.
## Support
If you encounter any issues or have questions, please [open an issue](https://github.com/withaarzoo/Animated-Loading-Button/issues) or contact the maintainer.
## Author
[Aarzoo](https://www.youtube.com/@codewithaarzoo)
---
### Like this project? Support it by giving a star! ⭐
Thank you for using Animated Loading Button!