---
description: Use this to display and track the progress of specific operations.
---

# List with Circular Progress Bar Repeating Group

## Overview <a href="#overview" id="overview"></a>

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/6ormll1m8W2UhP1rUHX4/16.png)

This repeating group is helpful for applications where it is important to display and track the progress of specific operations. A few use cases include:

* To-do list (with subtasks)
* Courses
* Funding&#x20;
* Metrics

## Structure

When this block is added to your app, it will be placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.

* **Group Circular progress bar rg**\
  This group contains all of the UI components for the list. \

  * **Group Title Group with Button and Filters**\
    This is a customizable section that includes a title, dropdown, toggle tabs, description text, sort dropdown, filters, and a new button. For more information, please read the instructions [here](https://docs.airdev.co/canvas/canvas-functionality/pages-and-modules#customizing-block-title-group).\

  * All data is displayed in **RepeatingGroup Dummy**
    * **Group Main list tile** includes the circular progress bar and text content
    * **Group PLACEHOLDER** - Please resize this group if you add more elements to the group

## How to set up

* Update the data source of **RepeatingGroup Dummy** and update the text elements to reference current cell's data.\

  * There are a few things to note when updating the progress bar:
    * First, select **HTML circular progress bar** and you'll see the following code (bolded text represents where you'll input dynamic data):\
      \
      \<div class="progress-circle p**10**" width=>\
      \<span>**10**%\</span>\
      \<div class="left-half-clipper">\
      \<div class="first-50-bar">\</div>\
      \<div class="value-bar">\</div>\
      \</div>\
      \</div>\
      \
      There is also a conditional statement that looks a bit different:\
      \<div class="progress-circle over50 p**10**" width=>\
      \<span>**10**%\</span>\
      \<div class="left-half-clipper">\
      \<div class="first-50-bar">\</div>\
      \<div class="value-bar">\</div>\
      \</div>\
      \</div>\

    * Please reference your progress/percentage numbers following the examples below:

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/WllcZlvQkQ58fC5raz0Y/17.png)

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/VmjZmNYuCiVsi8t0ofhJ/18.png)

#### Changing the progress bar's colors

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/NhgMv4HWuxEL9mAQto84/19.png)

* Select **HTML progress bar styling**
* Replace the following colors everywhere in the code (find hex code and enter new values):
  * 1 - completed progress: #0E65F0
  * 2 - inner circle: #F9F9FA
  * 3 - percentage text: #111827
  * 4 - not completed progress: #BECDF9
* Once you've updated your progress bar colors, please perform a hard refresh by clicking (shift + command + r )
