sexy-progressbar.js

A sleek, modern, and sexy progress bar implemented in pure vanilla JavaScript with zero dependencies. Turn your boring progress indicators into eye-catching, professional UI elements! 🔥

✨ Features

• 🎨 Sexy minimalist design
• 📱 Fully responsive
• ⚡ Zero dependencies
• 🛠️ Highly customizable
• 🎯 Pure vanilla JavaScript
• 🖼️ PNG export capability
• 🎭 Custom events support
• 📦 Lightweight (~5KB minified)
• 🔄 Smooth animations
• 🎪 Modern transitions

📦 Installation

npm install sexy-progressbar.js

🚀 Quick Start

1. Add a container element in your HTML:

<div id="progress-container"></div>

2. Initialize your sexy progress bar:

const progressBar = new SexyProgressBar('progress-container');
progressBar.setProgress(75); // Set to 75%

🛠️ Configuration Options

const options = {
  // Essential Options
  width: '300px',           // Width of the bar (default: '100%')
  height: '20px',           // Height of the bar (default: '10px')
  color: '#4CAF50',         // Progress bar color (default: '#4CAF50')
  backgroundColor: '#eee',  // Background color (default: '#f0f0f0')
  
  // Visual Options
  borderRadius: '10px',     // Border radius (default: '5px')
  showPercentage: true,     // Show percentage text (default: true)
  animated: true,           // Enable animations (default: true)
  
  // Text Options
  textColor: '#333333',     // Percentage text color (default: '#333333')
  fontSize: '12px',         // Font size (default: '12px')
  fontFamily: 'Arial',      // Font family (default: 'Arial, sans-serif')
};

const progressBar = new SexyProgressBar('progress-container', options);

🎯 API Reference

Constructor

const progressBar = new SexyProgressBar(containerId, options);

Core Methods

setProgress(percentage)

Set the progress value (0-100)

progressBar.setProgress(75);

getProgress()

Get the current progress value

const currentProgress = progressBar.getProgress();

updateOptions(newOptions)

Update configuration options in real-time

progressBar.updateOptions({
  color: '#FF5733',
  height: '15px'
});

destroy()

Remove the progress bar from DOM

progressBar.destroy();

PNG Export Methods

generateProgressPNG(options)

Generate a PNG blob of the progress bar

const pngBlob = await progressBar.generateProgressPNG({
  width: 400,          // PNG width in pixels
  height: 40,          // PNG height in pixels
  progress: 75,        // Progress value (0-100)
  color: '#4CAF50',    // Bar color
  backgroundColor: '#eee',
  showPercentage: true,
  fontSize: 16,
  textColor: '#333',
  borderRadius: 5
});

downloadProgressPNG(filename, options)

Generate and download a PNG file

await progressBar.downloadProgressPNG('my-progress.png', {
  width: 500,
  height: 50,
  color: '#FF4081'
});

📡 Events

Listen for progress changes with custom events:

progressContainer.addEventListener('progressChange', (event) => {
  console.log('Progress updated:', event.detail.progress);
});

🎨 Sexy Styling Examples

Minimal & Clean

new SexyProgressBar('container', {
  width: '200px',
  height: '10px',
  color: '#2196F3',
  backgroundColor: '#E3F2FD',
  showPercentage: false
});

Bold & Professional

new SexyProgressBar('container', {
  width: '300px',
  height: '20px',
  color: '#FF4081',
  backgroundColor: '#FCE4EC',
  fontSize: '14px',
  textColor: '#880E4F'
});

Modern Gradient

new SexyProgressBar('container', {
  width: '100%',
  height: '15px',
  color: 'linear-gradient(45deg, #FF6B6B, #FF8E53)',
  borderRadius: '8px'
});

📱 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)

💡 Common Use Cases

Loading States

const loader = new SexyProgressBar('loader');
let progress = 0;

const interval = setInterval(() => {
  progress += 10;
  loader.setProgress(progress);
  if (progress >= 100) clearInterval(interval);
}, 1000);

Upload Progress

const uploadBar = new SexyProgressBar('upload-progress');
fileUploader.onprogress = (event) => {
  const percentage = (event.loaded / event.total) * 100;
  uploadBar.setProgress(percentage);
};

Real-time Updates

const dynamicBar = new SexyProgressBar('dynamic');
setInterval(() => {
  const randomProgress = Math.floor(Math.random() * 100);
  dynamicBar.setProgress(randomProgress);
}, 2000);

🤝 Contributing

Issues and pull requests are welcome! Feel free to contribute to make this progress bar even sexier! 🌟

📄 License

MIT License - feel free to use this in your projects! Make your progress bars sexy everywhere! ✨

🙌 Credits

Created with ❤️ by Jolly

Make your web apps sexier, one progress bar at a time! 🚀