# List with Circular Progress Bar Repeating Group

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

![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/S8GrwJiCJQni4TA7M4jR/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. <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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/BQ1QaNuoDe2O8KK4otBq/17.png)

![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/OyE9O5ngS5h60YN9IFcA/18.png)

#### Changing the progress bar's colors

![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/ON2ba7TvweGqQQkqUzEA/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 )


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/canvas-library/blocks/list-with-circular-progress-bar-repeating-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.