# List with Circular Progress Bar Repeating Group

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

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZUFxam4OPWXffHbOVX%2F-MZUGiJoVPMv1XF1SMZ4%2Fcircular%20progress%20bar.png?alt=media\&token=3fe61225-b058-4ff2-8185-af80713e3034)

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-pages-and-modules/v/3.0.0/modules/title-group-with-button-and-filters).<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://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZUFxam4OPWXffHbOVX%2F-MZUSMCInlgR-JKZfFfC%2FScreen%20Shot%202021-04-29%20at%202.07.18%20PM.png?alt=media\&token=5fff5066-93af-4250-99d4-600ba19f0772)

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZUFxam4OPWXffHbOVX%2F-MZUSPHS5twAhcYWxEBe%2FScreen%20Shot%202021-04-29%20at%202.07.24%20PM.png?alt=media\&token=1c16cb6c-2617-4e2b-ad6d-f63e0fd94785)

#### Changing the progress bar's colors

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZUFxam4OPWXffHbOVX%2F-MZUM8MWHtelqdlY2UVE%2FScreen%20Shot%202021-04-29%20at%201.39.39%20PM.png?alt=media\&token=cffc3be6-e016-4d71-90a0-56d641a44623)

* 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 ).&#x20;

####