Skip to main content
  • Power Apps
  • Overview
    • Build Apps
    • Automate Processes
    • Connect Data
    • AI Builder
    • Portals
  • Pricing
  • Partners
    • Partner Showcase
    • Find Consulting Services
    • Find a Partner
    • Become a Partner
  • Learn
    • Documentation
    • Guided Learning
    • Support
    • Roadmap
    • Blog
    • Customer Stories
  • Community
    • Forums
    • Galleries
    • Ideas
    • User Groups
    • Community Blog
  • Register
  • ·
  • Sign In
  • ·
  • Help
Go To
  • Power Apps Community
  • Get Help with Power Apps (Formerly General)
  • Building Power Apps (Formerly General Discussion)
  • Common Data Service for Apps
  • AI Builder
  • Power Apps Governance and Administering (Formerly Administering Power Apps)
  • Power Apps component framework, ALM & Pro Dev
  • Power Apps Portals
  • Power Virtual Agents Forum
  • Community Blog & News
  • News & Announcements (Formerly Power Apps Community Blog)
  • Galleries
  • Community App Samples
  • Video Gallery
  • Canvas Apps Components Samples
  • Microsoft Business Applications Presentations
  • Ideas
  • Power Apps Ideas
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
  • Community App Samples
  • Re: COMPONENT - Configurable SVG Circle Progress B...

COMPONENT - Configurable SVG Circle Progress Bar

05-15-2019 01:51 AM - last edited 10-10-2019 10:36 AM

egallis
Level 10
1451 Views
LinkedIn LinkedIn Facebook Facebook Twitter Twitter
egallis
egallis
Level 10

COMPONENT - Configurable SVG Circle Progress Bar

  • Mark as New
  • Bookmark
  • Subscribe
  • Mute
  • Subscribe to RSS Feed
  • Permalink
  • Print
  • Email to a Friend
  • Report Inappropriate Content
‎05-15-2019 01:51 AM

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:

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

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

 

 

CircleProgressBar-round.png
Labels:
  • Formulas and controls
  • Mobile app design and user experience
Message 1 of 2
1,451 Views
8 Kudos
Reply
Highlighted
topness
topness
Level: Powered On

Re: COMPONENT - Configurable SVG Circle Progress Bar

  • Mark as New
  • Bookmark
  • Subscribe
  • Mute
  • Subscribe to RSS Feed
  • Permalink
  • Print
  • Email to a Friend
  • Report Inappropriate Content
‎05-19-2019 03:07 PM

This is bananas.  I hadn't seen the source article, thanks for posting this sample.  I was able to grab your component from Github and try it in minutes.  Time to get good with SVG math I guess...

Message 2 of 2
1,342 Views
0 Kudos
Reply
  • All posts
  • Previous Topic
  • Next Topic

Power Platform

  • Overview
  • Power BI
  • Power Apps
  • Power Automate
  • Power Virtual Agents
  • Sign in
  • Sign up

Browse

  • Sample apps
  • Services

Downloads

  • Studio
  • iOS
  • Android

Learn

  • Documentation
  • Support
  • Community
  • Give feedback
  • Blog
  • Partners
  • © 2019 Microsoft
  • Privacy & cookies
  • Terms of use
  • Trademarks