Welcome to bs-progressbar, a lightweight JavaScript overlay progress bar designed as a singleton utility. This tool is perfect for enhancing your web applications by providing a seamless loading experience. Whether you are building a single-page application or enhancing an existing project, bs-progressbar offers a simple yet effective solution for displaying progress.
- Lightweight: Minimal footprint ensures fast loading times.
- Easy to Use: Simple API for quick integration.
- Customizable: Tailor the look and feel to match your application.
- Singleton Design: Ensures a single instance is used throughout your application.
- Supports Bootstrap: Works seamlessly with Bootstrap 5 for styling.
To get started with bs-progressbar, you can download the latest release from our Releases page. Download the required files and include them in your project.
If you prefer using npm, you can install it directly:
npm install bs-progressbarUsing bs-progressbar is straightforward. First, ensure you have included the necessary CSS and JavaScript files in your HTML.
<link rel="stylesheet" href="path/to/bs-progressbar.css">
<script src="path/to/bs-progressbar.js"></script>Next, you can initialize the progress bar in your JavaScript code:
const progressBar = new ProgressBar();
progressBar.start(); // Start the progressTo stop the progress bar, simply call:
progressBar.stop(); // Stop the progressbs-progressbar allows you to customize its appearance and behavior. You can set the color, size, and other attributes directly when initializing:
const progressBar = new ProgressBar({
color: '#4caf50',
height: '5px',
duration: 2000
});- color: Set the color of the progress bar.
- height: Define the height of the progress bar.
- duration: Set the duration for the progress animation.
Here’s a simple example of how to use the progress bar in an application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/bs-progressbar.css">
<title>Progress Bar Example</title>
</head>
<body>
<div id="content">
<h1>Loading Content...</h1>
</div>
<script src="path/to/bs-progressbar.js"></script>
<script>
const progressBar = new ProgressBar();
progressBar.start();
// Simulate loading
setTimeout(() => {
progressBar.stop();
document.getElementById('content').innerHTML = '<h1>Content Loaded!</h1>';
}, 3000);
</script>
</body>
</html>For more advanced usage, you can integrate the progress bar with AJAX calls:
function fetchData() {
progressBar.start();
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
progressBar.stop();
console.log(data);
})
.catch(error => {
progressBar.stop();
console.error('Error fetching data:', error);
});
}We welcome contributions to bs-progressbar! If you would like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Make your changes.
- Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/YourFeature). - Open a pull request.
Please ensure your code adheres to the existing style and includes appropriate tests.
This project is licensed under the MIT License. See the LICENSE file for details.
To keep up with the latest updates and releases, visit our Releases page. Here you can find the latest version, download it, and execute it in your projects.
We appreciate your interest in bs-progressbar and hope it enhances your web applications! If you have any questions or feedback, feel free to reach out.