Gallery

Power Apps UI Cooker

Introduction

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Loading Popup

MyCondy

Last edited 119 days ago by MyCondy

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?

1x Group

2x Image

1x HTML TEXT

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

Loading Box (background) - #2D92FA

Blinking Image - #FFFFFF

Loading Image - #FFFFFF

⁠

← Info Box⁠

⁠

Menu →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.