Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign In
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Re: Circle Progress Bar

    Re: Circle Progress Bar

    05-15-2020 08:41 AM

    schuess3
    Kudo Commander
    2969 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Circle Progress Bar

    ‎12-30-2019 10:00 AM

    Moved from Canvas App Samples Gallery.

    05-11-2020 update: added new properties to choose how the value is displayed (X/Y or percentage) (see reply to the post below)

     

    Hi all,

    Based on @davidni's blog article (available here) I created a configurable Circular Progress Bar component.

    Here is how it looks:

    Image 2.png

    Parameters

    Here are the properties you can set on the component:

    INPUT

    • Max (number) = maximum value (default is 100)
    • Value (number) = actual progress value (default is 50)
    • ShowLabel (boolean) = shows/hides the label in the center (default is True)
    • LabelSize (number) = font size for the label in the center (default is 20)
    • LabelColor (color) = color for the label in the center (default is Black)
    • BarBgR, BarBgG, BarBgB (numbers) = red, green and blue components for the color of the background progress circle (default is the grey color on the capture above)
    • BarR, BarG, BarB (numbers) = red, green and blue components for the color of the actual progress circle (default is the cyan color on the capture above)
    • BarBgWidth (number) = width for the background progress circle
    • BarWidth (number) = width for the actual progress circle
    • LineCapRound (boolean) = if True draws the circle lines with a round line cap, otherwise line cap will be square (default is True)
    • ValueMode (text) = how to display the value within the circle: X/Y or as a percentage value (use the ValueModeEnum output property as an enumeration to set the value)
    • PercentageDecimals (number) = determines how many decimals are shown for the percentage value (only applicable if ValueMode is set to ValueModeEnum.Percentage)

    OUTPUT

    • ValueModeEnum (record) = use this enumeration to set the value of the ValueMode property (MaxValue shows the value as X/Y; Percentage shows the value as a percentage value, using the PercentageDecimals property to set how many decimals should be displayed)

    Feel free to use it... If you have any comments or suggestions, please do not hesitate...

    You will find the component right here:

    https://github.com/e-gallis/PowerApps

    Emmanuel

     

    Updates

    • 05-15-2019: added a LabelColor property
    • 05-21-2019: added a LineCapRound property
    Preview file
    76 KB
    CircleProgressBar.zip
    Message 1 of 3
    5,227 Views
    14 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎05-11-2020 07:29 AM

    Hi all,

    Just updated the component to allow two types of display for the value in the center:

    • X/Y (as before)
    • percentage value

    So a new property called ValueMode will allow you to choose between those two modes. To set its value, use the enumeration property called ValueModeEnum like this:

    ValueMode = MyCircleProgressBar.ValueModeEnum.Progress
    -or-
    ValueMode = MyCircleProgressBar.ValueModeEnum.MaxValue

    If you choose the ValueModeEnum.Progress value for ValueMode, just know that the calculation of the current progress value will be automatic based on both the Max and the Value property values.

    Also, using the PercentageDecimals property, you will be able to decide how many decimals should be displayed in case the value is shown as a percentage.

    Message 2 of 3
    3,005 Views
    1 Kudo
    Reply
    schuess3
    schuess3 Kudo Commander
    Kudo Commander
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎05-15-2020 08:41 AM

    @R3dKap 

    You Rock! Between this one and the fabric UI icons... Thank you!

     

    Btw... any thoughts of changing your fabric UI component into a fluent UI component?

    • Cudos
    Message 3 of 3
    2,969 Views
    1 Kudo
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
     

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks