Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/unfoldadmin/django-unfold/llms.txt

Use this file to discover all available pages before exploring further.

The Progress component displays visual progress indicators with support for single or multiple stacked progress bars, titles, and descriptions.

​
Basic Usage

{% load unfold %}

{% component "unfold/components/progress.html" with value=75 %}
{% endcomponent %}

​
Props

​
value
number
Progress value as a percentage (0-100) for a single progress bar.
​
items
list
List of progress items for stacked/multiple progress bars. Each item should have value and optionally title and progress_class.
​
title
string
Title text displayed above the progress bar.
​
description
string
Description text displayed in the top-right corner.
​
progress_class
string
Additional CSS classes to apply to the progress bar.
​
class
string
Additional CSS classes for the container.

​
Examples

​
Simple Progress Bar

{% component "unfold/components/progress.html" with value=65 %}
{% endcomponent %}

​
Progress with Title

{% component "unfold/components/progress.html" with title="Completion" value=85 %}
{% endcomponent %}

​
Progress with Title and Description

{% component "unfold/components/progress.html" with title="Upload Progress" description="75%" value=75 %}
{% endcomponent %}

​
Custom Color Progress

{% component "unfold/components/progress.html" with value=45 progress_class="bg-green-600" %}
{% endcomponent %}

​
Multiple Stacked Progress Bars

# In view or context
progress_items = [
    {'value': 30, 'title': 'Completed', 'progress_class': 'bg-green-600'},
    {'value': 20, 'title': 'In Progress', 'progress_class': 'bg-blue-600'},
    {'value': 15, 'title': 'Pending', 'progress_class': 'bg-yellow-600'},
]

{% component "unfold/components/progress.html" with title="Project Status" items=progress_items %}
{% endcomponent %}

​
Progress in Card

{% component "unfold/components/card.html" with title="Statistics" %}
  <div class="space-y-4">
    {% component "unfold/components/progress.html" with title="CPU Usage" description="45%" value=45 %}
    {% endcomponent %}
    
    {% component "unfold/components/progress.html" with title="Memory" description="78%" value=78 progress_class="bg-orange-600" %}
    {% endcomponent %}
    
    {% component "unfold/components/progress.html" with title="Disk" description="32%" value=32 progress_class="bg-green-600" %}
    {% endcomponent %}
  </div>
{% endcomponent %}

​
Complete Dashboard Example

# views.py
from django.views.generic import TemplateView
from unfold.views import UnfoldModelAdminViewMixin
from django.db.models import Count, Q

class AnalyticsView(UnfoldModelAdminViewMixin, TemplateView):
    title = "Analytics Dashboard"
    template_name = "admin/analytics.html"
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        
        # Calculate task completion
        total_tasks = Task.objects.count()
        completed = Task.objects.filter(status='completed').count()
        in_progress = Task.objects.filter(status='in_progress').count()
        pending = Task.objects.filter(status='pending').count()
        
        context['task_completion'] = [
            {
                'value': round((completed / total_tasks) * 100, 1),
                'title': 'Completed',
                'progress_class': 'bg-green-600'
            },
            {
                'value': round((in_progress / total_tasks) * 100, 1),
                'title': 'In Progress',
                'progress_class': 'bg-blue-600'
            },
            {
                'value': round((pending / total_tasks) * 100, 1),
                'title': 'Pending',
                'progress_class': 'bg-yellow-600'
            },
        ]
        
        # Storage usage
        total_storage = 1000  # GB
        used_storage = 750
        context['storage_percent'] = round((used_storage / total_storage) * 100, 1)
        context['storage_description'] = f"{used_storage}GB / {total_storage}GB"
        
        return context

{# templates/admin/analytics.html #}
{% extends "unfold/layouts/base.html" %}
{% load unfold %}

{% block content %}
<div class="container mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    {% component "unfold/components/card.html" with title="Task Progress" %}
      {% component "unfold/components/progress.html" with title="Overall Status" items=task_completion %}
      {% endcomponent %}
    {% endcomponent %}
    
    {% component "unfold/components/card.html" with title="Storage" %}
      {% component "unfold/components/progress.html" with title="Disk Usage" description=storage_description value=storage_percent %}
      {% endcomponent %}
    {% endcomponent %}
  </div>
</div>
{% endblock %}

​
Usage in Templates

​
Dynamic Progress from QuerySet

{% load unfold %}

{% component "unfold/components/card.html" with title="Order Status" %}
  {% with total=orders.count %}
    {% component "unfold/components/progress.html" with title="Completed Orders" value=orders.filter|completed|count|div:total|mul:100 %}
    {% endcomponent %}
  {% endwith %}
{% endcomponent %}

​
Multiple Progress Indicators

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  {% component "unfold/components/card.html" with title="Users" %}
    {% component "unfold/components/progress.html" with title="Active" description="85%" value=85 progress_class="bg-green-600" %}
    {% endcomponent %}
  {% endcomponent %}
  
  {% component "unfold/components/card.html" with title="Revenue" %}
    {% component "unfold/components/progress.html" with title="Target" description="92%" value=92 progress_class="bg-blue-600" %}
    {% endcomponent %}
  {% endcomponent %}
  
  {% component "unfold/components/card.html" with title="Support" %}
    {% component "unfold/components/progress.html" with title="Tickets Resolved" description="78%" value=78 progress_class="bg-purple-600" %}
    {% endcomponent %}
  {% endcomponent %}
</div>

​
Styling

Default progress styles:
  • Container background: bg-base-100 dark:bg-base-800
  • Progress bar: bg-primary-600 dark:bg-primary-500
  • Height: h-1.5
  • Border radius: rounded-default
Custom colors using progress_class: 
{# Green progress #}
{% component "unfold/components/progress.html" with value=80 progress_class="bg-green-600 dark:bg-green-500" %}
{% endcomponent %}

{# Red progress #}
{% component "unfold/components/progress.html" with value=25 progress_class="bg-red-600 dark:bg-red-500" %}
{% endcomponent %}

{# Orange progress #}
{% component "unfold/components/progress.html" with value=60 progress_class="bg-orange-600 dark:bg-orange-500" %}
{% endcomponent %}

​
Accessibility

  • Progress bars include title attribute with percentage value
  • Title and description provide context for screen readers
  • ARIA attributes can be added via the component template

​
Best Practices

  1. Value Range: Keep values between 0-100
  2. Multiple Bars: Ensure stacked values don’t exceed 100%
  3. Colors: Use meaningful colors (green for success, red for danger, etc.)
  4. Context: Always provide title or description for clarity
  5. Dark Mode: Use dark mode compatible color classes
  • Card - Wrap progress bars in cards
  • Tracker - Alternative visualization for time-series data
  • Chart - More complex data visualizations

​
Source

Template: src/unfold/templates/unfold/components/progress.html:1

Build docs developers (and LLMs) love

Get started for freeTalk to us