List with Circular Progress Bar Repeating Group


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.

    • 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 ).

Last updated