https://github.com/yashi-singh-1/segmented-progress-bar

The code provided sets up a segmented progress bar using HTML and CSS.
https://github.com/yashi-singh-1/segmented-progress-bar

animation css css-animation css3 front-end front-end-challenge front-end-development frontend frontend-development html html5

Last synced: 7 months ago
JSON representation

The code provided sets up a segmented progress bar using HTML and CSS.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/segmented-progress-bar
• Owner: Yashi-Singh-1
• Created: 2024-06-24T08:54:47.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-24T09:21:47.000Z (over 1 year ago)
• Last Synced: 2024-11-10T11:15:21.366Z (11 months ago)
• Topics: animation, css, css-animation, css3, front-end, front-end-challenge, front-end-development, frontend, frontend-development, html, html5
• Language: CSS
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Segmented Progress Bar

This project demonstrates a segmented progress bar using HTML and CSS, designed to visually represent progress in discrete segments.

## Project Structure

index.html         --> HTML file defining the structure of the progress bar.

styles.css         --> CSS file containing styles for the progress bar and animations.

## Preview

![Preview](Preview.png)

## How to Use

1. **Clone the Repository:**

   

   git clone https://github.com/Yashi-Singh-1/Segmented-Progress-Bar

   

2. **Navigate to the Project Directory:**

  

   cd segmented-progress-bar

   

3. **Open index.html in a Web Browser:**

   Simply open index.html in your preferred web browser to view the segmented progress bar.

## Customization

- **Number of Segments:**

  Adjust the number of segments by adding or removing 
 elements within .segmented-progress in index.html.


- **Progress Animation:**

  Customize the animation duration and segment width progression by modifying the @keyframes segment-grow animation in styles.css.

## Example

To see a working example, check out index.html in your browser after cloning the repository.

## Author

Yashi Singh