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!