Skip to content
This component is only suitable for Power Apps
steps for Figma does not make any sense.
The custom component you can use when you run Power Automate flow or saving data to a storage (Sharepoint, Dataverse).
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create HTML loading box
Add a new HTML TEXT object, call it "loading_box" with this "HTML text" property:
"<div style='margin:0px;width:"&Self.Width&"px;height:"&Self.Height-10&"px;background-color:#2D92FA; border-radius:10px;'></div>"
Step 2 - create blinking SVG image
Add a new Image object, call it "blinking_text" with this "Image" property:
"data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 500 60'>
<text x='90' y='50' style='font-family:Poppins;font-size:82'>Loading
<animate
attributeName='fill'
values='#fff;transparent'
begin='0s'
dur='2s'
calcMode='discrete'
repeatCount='indefinite'
/>
</text>
</svg>")
Step 3 - create loading SVG image
Add a new Image object, call it "loading_svg" with this "Image" property:
"data:image/svg+xml;utf8, "&EncodeUrl("<svg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'>
<defs>
<style>
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spin {
transform-origin: center;
animation: spin 2s linear infinite;
}
</style>
</defs>
<circle class='spin' cx='400' cy='400' fill='none'
r='200' stroke-width='50' stroke='#fff'
stroke-dasharray='700 1400'
stroke-linecap='round' />
</svg>")
Step 4 - group all objects
Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).
This is an output:
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.