--- title: How to use the Circular Progress Bar widget? description: Learn how to use the Circular Progress Bar to visualize progress --- [Skip to content](https://success.ministrydesigns.help/how-to-use-the-circular-progress-bar-widget#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to use the Circular Progress Bar widget? ## Show progress in a circular animated style 1\. A circular progress bar widget is a circular visual indicator that shows the status of a task. It helps users understand how much of the task has been completed and how much is left. It provides a visual cue that signifies progression towards a goal. Drag and drop the Circular Progress Bar widget onto the page. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-02-27/7ff7daeb-aa54-4ff9-aae9-d3a9c58ebeec/ascreenshot.jpeg?tl_px=0,304&br_px=764,731&force_format=jpeg&q=100&width=764&wat_scale=68&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=196,188) 2\. Select the Circular Progress Bar widget to edit the Settings described in Step 3 and further ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/180c195a-3a6e-4b6f-acb3-dc095c6c64ab/ascreenshot.jpeg?tl_px=437,197&br_px=1420,747&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=334,254) ### Settings tab 3\. Enabled the "Fixed Width" checkbox for Circular Progress Bar to have a fixed width. Specify the fixed width value in pixels ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/b9aad671-96c0-42a0-9f23-9212aacaf7e6/ascreenshot.jpeg?tl_px=542,1&br_px=1525,550&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=699,243) 4\. Specify the title for the Circular Progress Bar ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/077c016e-d239-41a4-87c0-19ddcd21a195/ascreenshot.jpeg?tl_px=665,222&br_px=1525,703&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=583,212) 5\. Specify the position for the title. The following options are available: **Top** - the title is positioned at the top **Before Value** - the title is positioned before the % value **After Value** - the title is positioned after the % value **Bottom** - the title is positioned at the bottom ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/ba0dd52d-ef78-4c0d-bdd9-94c06d832c79/ascreenshot.jpeg?tl_px=665,236&br_px=1525,717&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=648,212) 6\. Specify the spacing for the title. Spacing is a common feature in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on spacing ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/d20672b3-736b-4207-9196-0a98de8b404a/ascreenshot.jpeg?tl_px=665,382&br_px=1525,863&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=685,212) 7\. Specify the % value for the Circular Progress Bar ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/3c896ae5-f04b-4bd3-b965-e17ebaa1e09b/ascreenshot.jpeg?tl_px=665,320&br_px=1525,801&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=748,212) 8\. Enable the "Change the displayed value to" checkbox to enter a different numerical value for the Circular Progress Bar ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/634834ce-d89b-447e-8a9e-6dc83386f634/ascreenshot.jpeg?tl_px=665,66&br_px=1525,547&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=578,212) 9\. Enter the new displayed value. The displayed value is changed to 111%. However, the progress bar itself is still at 76%, which allows more flexibility with Circular Progress Bars. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/797179e9-7c21-4ee5-8c5d-0013c1f1c834/ascreenshot.jpeg?tl_px=665,114&br_px=1525,595&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=610,212) 10\. Specify the display unit. This field can also be empty as an option ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/ba2dc68a-9cca-4057-a14e-33668bfa1d3f/ascreenshot.jpeg?tl_px=665,242&br_px=1525,723&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=602,212) 11\. Specify Unit Position. The following options are available: **After Content** - the percentage is positioned after the value **Before Content** - the percentage is positioned before the value ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/8106462c-4545-4689-828b-de39b2581277/ascreenshot.jpeg?tl_px=665,325&br_px=1525,806&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=645,212) 12\. Specify the spacing between text and numbers. Spacing is a common feature in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on spacing. Additionally, you can specify **Vertical Alignment** for the % unit. It can be the top, middle, or bottom. The Vertical Alignment will only work if the % unit has a Text Style with a smaller font size than the Text Style in the numerical value ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-07/9e020ab1-dea7-4816-9fa0-77714c2c467e/ascreenshot.jpeg?tl_px=665,324&br_px=1525,805&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=675,212) The remaining features here - Spacing, Devices, Alignment, and Visible On are common features in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on these features ### Design tab 13\. Select the "Design" tab ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/f8777df4-8d6c-4410-ae12-663a871d63a2/ascreenshot.jpeg?tl_px=542,0&br_px=1525,549&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=883,182) 14\. Select a Text Style for the Title. Additionally, you can specify the Progress Text Style and the Unit Text Style ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/bb2087a4-1a42-4b97-bb77-4f304a5a1da8/ascreenshot.jpeg?tl_px=665,71&br_px=1525,552&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=678,212) 15\. If needed, the Text Style appearance can be changed by clicking the pencil icon. Please refer to [**this guide**](https://success.ministrydesigns.help/how-to-use-text-styles-in-website-builder) for Text Style overview. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/018d5fa8-7a12-48d5-b23b-37000f77b3f4/ascreenshot.jpeg?tl_px=665,35&br_px=1525,516&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=801,212) 16\. Specify the width for the Circular Progress Bar ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/da055e70-2e37-4aca-9902-9e47a117d0d3/ascreenshot.jpeg?tl_px=665,118&br_px=1525,599&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=731,212) 17\. Specify the color for the Circular Progress Bar. Please refer to [this guide](https://success.ministrydesigns.help/how-do-i-change-widget-colors) on how to select a specific color with the Color Picker ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/46728ef9-8467-4882-a9b7-060f7187672a/ascreenshot.jpeg?tl_px=665,173&br_px=1525,654&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=636,212) 18\. Specify the width for the progress bar range ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/4a000c2b-eeb8-4b34-a66e-74cf5a7c6930/ascreenshot.jpeg?tl_px=665,315&br_px=1525,796&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=678,212) 19\. Specify the color for the progress bar range ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/e7d02719-8f5f-4486-a49e-6afe727d7b53/ascreenshot.jpeg?tl_px=665,279&br_px=1525,760&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=636,212) 20\. Select the "Round Corners" checkbox to make the progress bar range rounded ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/a713db0e-f2a3-4ddc-b0ef-b2687906c3ab/ascreenshot.jpeg?tl_px=665,326&br_px=1525,807&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=577,212) 21\. Enable bar animation with the corresponding checkbox so the Circular Progress Bar is not static ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/86aa7d05-7ad8-4082-b764-76599b057507/ascreenshot.jpeg?tl_px=665,430&br_px=1525,911&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=577,212) 22\. Specify the duration of the animation ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/9e872fea-7615-4800-a02f-0a1daf036801/ascreenshot.jpeg?tl_px=665,464&br_px=1525,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=697,245) 23\. Enable value animation with the corresponding checkbox so the Circular Progress Bar value is not static ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/723d8b9c-8e74-4417-b766-934d20c61d1c/ascreenshot.jpeg?tl_px=665,464&br_px=1525,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=578,277) 24\. Specify the duration of the animation ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/8a96ffce-bda8-4e20-b8ef-d2d399a2e86c/ascreenshot.jpeg?tl_px=665,464&br_px=1525,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=692,351) 25\. Click "Save" for the changes to reflect on the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-07-08/84ad52ff-9a40-4360-9c9b-8e7c95dcedad/ascreenshot.jpeg?tl_px=760,0&br_px=1525,427&force_format=jpeg&q=100&width=764&wat_scale=68&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=685,65) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,