List with Circular Progress Bar Repeating Group

Use this to display and track the progress of specific operations.

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 )