This project implements a simple circular timer with countdown functionality using HTML, CSS, and JavaScript. The circular timer visually represents the remaining time as the countdown progresses.
You can view a live demo of the circular timer here.
- Circular timer animation with three overlapping circles
- Countdown timer with minutes and seconds display
- Buttons to add time, skip time, clear the timer, and restart the timer
To use this circular timer in your project, follow these steps:
-
Clone the repository:
git clone <repository-url> -
Include the necessary files in your HTML file:
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta tags and title --> </head> <body> <!-- Include the CSS --> <link rel="stylesheet" href="./style.css" /> <!-- Timer Section --> <!-- Add the HTML structure here --> <!-- Include the JavaScript --> <script src="script.js"></script> </body> </html>
To start using the circular timer, simply include the necessary files as described in the installation section. The circular timer will automatically start when the HTML page is loaded.
- To add 10 seconds to the timer, click on the "Add(+10s)" button.
- To skip 5 seconds from the timer, click on the "Skip(-5s)" button.
- To reset the timer to zero, click on the "Clear" button.
- To restart the timer to its initial value, click on the "Restart" button.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent