Get started with nanobar CDN

// Import nanobar library
const Nanobar = require('nanobar/nanobar.min');

// Initialize progress bar
const progressBar = new Nanobar('progress-bar-container', {
  preventTransition: false, // Disable CSS transitions for smoother JavaScript progress updates
  barColor: '#4caf50', // Green color for the progress bar
  backgroundColor: '#f8f9fa', // Light grey background color
  easing: 'ease', // Easing function for progress bar animation
  round: false, // Rounded corners for the progress bar
  showOnInit: false, // Hide progress bar initially
});

// Update progress bar
function updateProgress(percent) {
  progressBar.update(percent);
}

// Simulate an asynchronous task and update progress bar
async function exampleTask() {
  for (let i = 0; i <= 100; i += 10) {
    await new Promise((resolve) => setTimeout(resolve, 100)); // Simulate work
    updateProgress(i);
  }
  progressBar.go(100); // Go to 100% when task is completed
}

// Start the example task and update progress bar
exampleTask();