Skip to content

README.md

Latest commit

 

History

History
84 lines (58 loc) · 1.9 KB

README.md

File metadata and controls

84 lines (58 loc) · 1.9 KB

Dynamic Progress Bar

A beautiful animated progress bar with customizable colors and smooth transitions. Perfect for web applications that need to show loading states, file uploads, or any progress indication.

✨ Features

  • Smooth Animations: Fluid progress transitions with CSS animations
  • Customizable Colors: Easy to customize progress bar colors and themes
  • Responsive Design: Works perfectly on all device sizes
  • Multiple Styles: Different progress bar styles and variations
  • Accessible: Built with accessibility in mind
  • Lightweight: Pure CSS and JavaScript, no dependencies

🚀 Live Demo

View on CodePen

📁 Files

  • index.html - Main HTML structure
  • style.css - All styling and animations
  • script.js - JavaScript functionality

🛠️ Usage

Basic Implementation

<div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
</div>
// Update progress (0-100)
updateProgress(75);

Customization

/* Custom colors */
.progress-bar {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* Custom size */
.progress-container {
    height: 20px;
    border-radius: 10px;
}

🎨 Customization Options

  • Colors: Change gradient colors, background, and border
  • Size: Adjust height and width
  • Animation Speed: Modify transition duration
  • Border Radius: Customize corner roundness
  • Shadows: Add depth with box shadows

📱 Browser Support

  • Chrome ✅
  • Firefox ✅
  • Safari ✅
  • Edge ✅
  • IE11+ ✅

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is open source and available under the MIT License.

👨‍💻 Created by

HarmonCode - harmoncode.com

⭐ If you find this useful, please give it a star!