Skip to content
Drop in, configurable, dependency-free progress bars for your Django/Celery applications.
Branch: master
Clone or download
czue Merge pull request #12 from mcrot/issues_10_11
Fixes for issues 10 and 11
Latest commit 792a049 Jun 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
celery_progress Always return a float to ensure it can be JSON-serialized Dec 31, 2018
.gitignore Initial commit Jan 20, 2018
LICENSE Initial commit Jan 20, 2018 add manifest and Jan 20, 2018 Improved example for the case of multiple progress bars. Closes #11. Jun 18, 2019 bump version Jan 23, 2018

Celery Progress Bars for Django

Drop in, dependency-free progress bars for your Django/Celery applications.

Super simple setup. Lots of customization available.


Celery Progress Bar demo on Build With Django


pip install celery-progress



First add celery_progress to your INSTALLED_APPS in

Then add the following url config to your main

url(r'^celery-progress/', include('celery_progress.urls')),  # the endpoint is configurable

Recording Progress

In your task you should add something like this:

from celery import shared_task
from celery_progress.backend import ProgressRecorder
import time

def my_task(self, seconds):
    progress_recorder = ProgressRecorder(self)
    for i in range(seconds):
        progress_recorder.set_progress(i + 1, seconds)
    return 'done'

Displaying progress

In the view where you call the task you need to get the task ID like so:

def progress_view(request):
    result = my_task.delay(10)
    return render(request, 'display_progress.html', context={'task_id': result.task_id})

Then in the page you want to show the progress bar you just do the following.

Add the following HTML wherever you want your progress bar to appear:


<div class='progress-wrapper'>
  <div id='progress-bar' class='progress-bar' style="background-color: #68a9ef; width: 0%;">&nbsp;</div>
<div id="progress-bar-message">Waiting for progress to start...</div>

Import the javascript file.


<script src="{% static 'celery_progress/celery_progress.js' %}"></script>

Initialize the progress bar:

// vanilla JS version
document.addEventListener("DOMContentLoaded", function () {
  var progressUrl = "{% url 'celery_progress:task_status' task_id %}";


// JQuery
$(function () {
  var progressUrl = "{% url 'celery_progress:task_status' task_id %}";


The initProgressBar function takes an optional object of options. The following options are supported:

Option What it does Default Value
pollInterval How frequently to poll for progress (in milliseconds) 500
progressBarId Override the ID used for the progress bar 'progress-bar'
progressBarMessageId Override the ID used for the progress bar message 'progress-bar-message'
progressBarElement Override the element used for the progress bar. If specified, progressBarId will be ignored. document.getElementById(progressBarId)
progressBarMessageElement Override the element used for the progress bar message. If specified, progressBarMessageId will be ignored. document.getElementById(progressBarMessageId)
onProgress function to call when progress is updated CeleryProgressBar.onProgressDefault
onSuccess function to call when progress successfully completes CeleryProgressBar.onSuccessDefault
onError function to call when progress completes with an error CeleryProgressBar.onErrorDefault
You can’t perform that action at this time.