https://github.com/starknightt/animated-number-spinner-
This project features a vertical progress spinner created with HTML and CSS. The spinner is designed with a sleek green progress meter inside a stylish box, providing a visual indication of progress. The layout is centered on the page and utilizes the Poppins font for a modern and clean look.
https://github.com/starknightt/animated-number-spinner-
animatedspinner animation-css html-css-javascript javascript-project
Last synced: about 1 year ago
JSON representation
This project features a vertical progress spinner created with HTML and CSS. The spinner is designed with a sleek green progress meter inside a stylish box, providing a visual indication of progress. The layout is centered on the page and utilizes the Poppins font for a modern and clean look.
- Host: GitHub
- URL: https://github.com/starknightt/animated-number-spinner-
- Owner: StarKnightt
- Created: 2023-12-07T15:34:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-07T15:37:47.000Z (over 2 years ago)
- Last Synced: 2025-03-28T17:51:21.024Z (about 1 year ago)
- Topics: animatedspinner, animation-css, html-css-javascript, javascript-project
- Language: CSS
- Homepage: https://codepen.io/StarKnightt/pen/oNmmMNV
- Size: 1.95 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vertical Progress Spinner
This project features a vertical progress spinner created with HTML and CSS. The spinner is designed with a sleek green progress meter inside a stylish box, providing a visual indication of progress. The layout is centered on the page and utilizes the Poppins font for a modern and clean look.
## Technologies Used
- HTML
- CSS
- Poppins Font
## Components
### Box
The container (`div.box`) houses the entire spinner, providing a background and box-shadow to enhance the visual appeal.
### Spinner
The spinner itself (`div.spinner`) consists of a vertical progress meter and additional styling for an engaging appearance.
### Progress Meter
The progress meter (`div.progress`) is a vertical column with a green background, representing the progress of a task. It includes a subtle drop shadow for added visual effect.
### Styling
The project incorporates the Poppins font for a modern typography choice. The background is set to a dark shade (#222), creating a sleek contrast with the green progress meter.
## Usage
1. Clone the repository to your local machine:
```bash
git clone https://github.com/StarKnightt/Animated-Number-Spinner-.git