List with Circular Progress Bar Repeating Group

Overview
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 
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.

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 p10" 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 p10" 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:
Changing the progress bar's colors
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 ). 
​

BLOCKS - Previous

Placeholder Group

Next - BLOCKS

Top Input Chat Widget

Last modified 1yr ago

Copy link

Outline

Overview

Structure

How to set up

Overview

Structure

How to set up

Changing the progress bar's colors

​