Circular Progress

Customizable Circular Progress Bar for Microsoft Power Apps

SVG Code

Copy the code and paste it in the Image property of the Image element. Replace the varMyProgress variable with any variable of fixed value.

"data:image/svg+xml; utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100%' height='100%'>
<style>
.fill-circle {
animation: rotatefill 1.5s ease-in-out forwards;
}
@keyframes rotatefill {
from {
stroke-dasharray: 251.2;
stroke-dashoffset: 251.2;
}
to {
stroke-dasharray: 251.2;
stroke-dashoffset: "& 251.2*(1-(varMyProgress/100)) &";
}
}
</style>

<circle cx='50' cy='50' r='40' fill='none' stroke='rgba(0, 0, 0, 0.15)' stroke-width='10'></circle>
<circle class='fill-circle' cx='50' cy='50' r='40' fill='none' stroke='#056ffa' stroke-width='10' stroke-linecap='round' transform='rotate(-90 50 50)'></circle>
</svg>")

Comments

A
Ash 1 month ago

this is awesome!