List with Circular Progress Bar Repeating Group
Last updated
Was this helpful?
Last updated
Was this helpful?
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
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.
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
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:
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 ).
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 .
