Celery Progress Bar Demo

A few examples illustrating what you can do with celery-progress.

To understand how this works, you can read this guide. For a complete working code example, check out SaaS Pegasus—a Django starter kit for your next big project.

Default Functionality

A simple progress UI with zero configuration required.


CeleryProgressBar.initProgressBar(taskUrl);

Waiting for progress to start...

Custom Progress

Demonstrating how you can modify the way progress is rendered to your liking. In this case, using a line of 😊 emojis.


function customProgress(progressBarElement, progressBarMessageElement, progress) {
    progressBarElement.innerHTML = Array(parseInt(progress.percent) / 2).join("😊");
    progressBarMessageElement.innerHTML = (
      "about " + progress.percent + "% of the way through " + progress.total + ' custom thingies.'
    );
}
CeleryProgressBar.initProgressBar(taskUrl, {
    onProgress: customProgress
});

Waiting for progress to start...

Custom Success/Error

Overriding what happens on success/failure with your own custom UI.


function customSuccess(progressBarElement, progressBarMessageElement) {
    progressBarElement.innerHTML = (
     '<figure class="image"><img src="/static/images/web/progress-bars/success-kid.2e2340b7a9da.jpg"></figure>'
    )
    progressBarElement.style.backgroundColor = '#fff';
    progressBarMessageElement.innerHTML = 'Success!'
}
function customError(progressBarElement, progressBarMessageElement) {
    progressBarElement.innerHTML = (
     '<figure class="image"><img src="/static/images/web/progress-bars/fail-stamp.a7cb2c6828f8.jpg"></figure>'
    )
    progressBarElement.style.backgroundColor = '#fff';
    progressBarMessageElement.innerHTML = 'Fail.'
}
CeleryProgressBar.initProgressBar(taskUrl, {
    onSuccess: customSuccess,
    onError: customError,
});

Waiting for progress to start...

Celery Progress Bar Demo

Default Functionality

Custom Progress

Custom Success/Error

Subscribe for Updates

Sign up to get notified when I publish new articles about building SaaS applications with Django.