Add a Touch of Magic to Your Power Apps with Animated SVGs

Ever wished you could sprinkle some animation magic into your canvas Power Apps? Look no further than SVGs! Not only are they scalable and resolution-independent, but they can also bring a touch of visual flair while keeping the user experience smooth.

In this tutorial, we'll build a dynamic Progress Circle to visualize different completion percentages. Think of it as a visual progress bar, perfect for showcasing task completion or process stages.

Setting the Stage (Optional)

These steps are purely for visual aesthetics. Feel free to customize to your liking!

• Layout: Start with the "Header and Footer" layout and remove the footer section. This provides a responsive base for our app.

• Header: Add three buttons within the Header Container. Their functionality is entirely up to you!

• Main Content Area:

  • Include labels to display your app's name and a brief description.

  • Spice things up with an SVG background image. A great resource for free SVGs is https://undraw.co/illustrations.

Bringing the Progress Circle to Life

Now for the main event – creating our animated progress circle!

• Image Control: Add an Image control to your Main container.

• SVG Setup: Paste the following code into the Image control's Image property. This tells Power Apps we're about to build an SVG:

"data:image/svg+xml;utf8, " & EncodeUrl(

• Animated Circle Code: Now, paste the code for the animated progress circle into the Image control's Image property.

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 40 40'> 
  <defs>
    <linearGradient id='gradient' x1='80%' y1='20%' x2='5%' y2='5%' spreadMethod='pad'>
      <stop offset='0%' stop-color='" & "#479ef5" & "'/> //Gradient Color 1
      <stop offset='100%' stop-color='" & "#479ef5" & "'/> //Gradient Color 2
      
    </linearGradient>
  </defs>
  
  <style>
    .rail {
     stroke: rgba(9, 33, 98, 1) 
    }
    .progress {
      stroke: url(#gradient);
      
      filter: drop-shadow(0.5px 0.5px 1px #46c2fc);
      stroke-linecap: round;
      animation: progressbar 2s; 
    }
    .progress-text {
      font-size: 0.6em; 
      font-family: Trebuchet MS, sans-serif;
      font-weight:bold;
    }
    .progress-name {
      font-size:0.3em;
    }
    @keyframes progressbar { 
      from {
        stroke-dasharray: 0, 100; 
      }
      to
      {
        stroke-dasharray: " & varProgress & ", " & 100 - varProgress 
) & ";
      }
    }
  </style>
  <circle class='rail' cx='20' cy='20' r='16' stroke-width='1' fill='transparent'> </circle>
   <circle class='progress' cx='20' cy='20' r='16' stroke-width='2' fill='transparent'  stroke-dasharray='" & varProgress & " " & 100 - varProgress & "' stroke-dashoffset='25'> </circle>
 <g class='progress-text'>
   <text y='58%' transform='translate(0,1)'>
     <tspan x='50%' text-anchor='middle' class='progress-percent'> " & varProgress & "%" & " </tspan> 
   </text>
   
  </g>
</svg>"

Controlling the Progress

Let's make our circle interactive!

• Control Buttons: Add two modern buttons to your app. Set their layout to "Icon Only."

  • For the first button, use an Up Arrow icon.

  • For the second button, use a Down Arrow icon.

• Button Logic:

  • In the OnSelect property of the Up Arrow button, paste the following code to increase the progress value:

If(
    varProgress = 100,
    false,
    UpdateContext({varProgress: varProgress + 10})
)

In the OnSelect property of the Down Arrow button, paste the following code to decrease the progress value:

If(
    varProgress = 100,
    false,
    UpdateContext({varProgress: varProgress + 10})
)

• Progress Display: Add a Text Label between the buttons to display the current value of the progress variable.

varProgress

And there you have it! You've successfully embedded an animated progress circle into your Power App. Use this technique to incorporate other SVG animations and elevate your app's visual appeal. Happy coding!