# List with Circular Progress Bar Repeating Group

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

![](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FlsKnCdMzsX6u01N8g6Mi%2F16.png?alt=media\&token=b9ffcc45-cd89-4332-8de5-f510da09639b)

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. <br>
  * **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).<br>
  * 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.<br>
  * 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><br>
    * Please reference your progress/percentage numbers following the examples below:

![](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FfCzzveFRo5GxCMboWJzm%2F17.png?alt=media\&token=a2d29eb2-a46b-4a95-b595-008496d0c371)

![](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FSSO8jaSFnC9MDU4DxSR7%2F18.png?alt=media\&token=0497b1c2-bb8d-48df-813c-35f78e7bde64)

#### Changing the progress bar's colors

![](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2F7y0DSYyl9yDj4XIb9YyU%2F19.png?alt=media\&token=02f30cd7-ab8e-4261-beea-66007a6f98e5)

* 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 )