Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Action Another action Something else here
Separated link
Basic Progress Bars

Simple progress bars with different completion levels

25%
50%
75%
100%
Colored Progress Bars

Progress bars with different color schemes

check_circle25%
check_circle50%
check_circle75%
check_circle100%
info25%
info50%
info75%
info100%
warning25%
warning50%
warning75%
warning100%
error25%
error50%
error75%
error100%
Striped Progress Bars

Progress bars with striped patterns for visual appeal

25%
50%
75%
100%
25%
50%
75%
100%
Multiple Progress Bars

Stack multiple progress bars in a single container

check_circleCompleted 40%
scheduleIn Progress 30%
pendingPending 20%
personJohn 25%
personSarah 35%
personMike 25%
personEmily 15%
attach_moneyDevelopment 45%
design_servicesDesign 25%
personMarketing 20%
supportSupport 10%
Progress with Labels

Progress bars with detailed labels and descriptions

Website Development 75%
Frontend completed, working on backend integration
Mobile App 90%
Almost complete, final testing phase
API Development 45%
Core endpoints completed, working on authentication
Database Setup 100%
Database schema and initial data completed
UI/UX Design 30%
Wireframes completed, working on visual design
Testing 15%
Unit tests setup, integration tests pending
Circular Progress Indicators

Circular progress bars for modern UI designs

code
75%
Development
check_circle
90%
Testing
design_services
50%
Design
star
25%
Marketing
Progress with Icons

Progress bars enhanced with Material Icons

cloud_upload File Upload 65%
cloud_uploadUploading...
document.pdf (2.3 MB) - 1.5 MB uploaded
download Download 85%
downloadDownloading...
software-installer.exe (45.2 MB) - 38.4 MB downloaded
sync Synchronization 40%
syncSyncing...
Syncing 1,247 files with cloud storage
backup Backup 95%
backupBacking up...
Database backup in progress - 95% complete
security Security Scan 30%
securityScanning...
Scanning 15,432 files for security threats
update System Update 70%
updateUpdating...
Installing system updates - 70% complete
Progress Steps

Step-by-step progress indicators

Order Processing
check
check
Order Placed Payment Received
Project Milestones
assignment
schedule
Planning Development
User Onboarding
person_add
settings
Account Created Setup Profile
Deployment Process
build
rocket_launch
Building Deploying
Gradient Progress Bars

Modern gradient progress bars for enhanced visual appeal

75%
60%
85%
45%
90%
70%
Interactive Progress Bars

Progress bars with interactive controls and animations

0%
0%
0%
0%
65%
65%
This progress bar has a subtle pulsing animation
80%
80%
This progress bar has a glowing effect
45%
45%
This progress bar has a shimmer effect
Custom Styled Progress Bars

Progress bars with unique styling and effects

60%
75% Complete
40%
85%
70%
55%
BProgress - Page-level Progress Bar

Global top-of-page progress indicator for AJAX operations and page transitions

info
About BProgress

BProgress is a lightweight progress bar plugin that appears at the top of the page, similar to YouTube or Medium's page loading indicators. It's globally available throughout the application.

  • Auto-initialized: Available on all pages via the admin layout
  • AJAX-ready: Perfect for showing loading states during async operations
  • Lightweight: No dependencies, pure JavaScript
  • Customizable: Configurable colors, heights, and animation speeds
Interactive Test Controls

Test the BProgress plugin with these interactive buttons

JavaScript API

Available global functions

Function Description
showProgress() Start/show the progress bar
hideProgress() Complete and hide the progress bar
setProgress(value) Set progress to specific % (0-100)
Usage Examples
// Simple start and stop
showProgress();
// ... do some work ...
hideProgress();

// With specific progress values
showProgress();
setProgress(25);  // 25% complete
setProgress(50);  // 50% complete
setProgress(75);  // 75% complete
hideProgress();   // Complete and hide
// jQuery AJAX example
showProgress();
$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(data) {
        console.log('Data loaded:', data);
    },
    error: function(error) {
        console.error('Error:', error);
    },
    complete: function() {
        hideProgress();
    }
});
// Fetch API example
async function loadData() {
    showProgress();
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log('Data loaded:', data);
    } catch (error) {
        console.error('Error:', error);
    } finally {
        hideProgress();
    }
}
tips_and_updates
Best Practices
  • Always call hideProgress() in a finally block to ensure cleanup
  • Use for operations that take longer than 500ms
  • Don't use for instant operations - it may flash briefly
  • Consider combining with loading spinners for longer operations