Skeleton loading screen for PowerApps

Anand • 2023-04-14

Skeleton loading screens are an important aspect of user experience design. They help improve the perceived performance of a website or application by showing a simplified version of the content while the rest of the page is loading.

The use of SVG (Scalable Vector Graphics) is a great tool to create such loading screens.

Here are some examples of SVG code for creating circle and rectangle loading screens:

Circle loading screen:

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='60 0 220 80'>
       <defs>
         <mask id='mask'>
           <circle cx='110' cy='40' r='40' fill='#999'>

            <animate attributeName='r' from='40' to='35' dur='1s' begin='0s' repeatCount='indefinite' />
           </circle>
         </mask>
       </defs>
       <circle cx='110' cy='40' r='80' fill='#F6F6F6' mask='url(#mask)'/>
    </svg>"
)

Rectangle loading screen:

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 20'>
       <defs>
         <mask id='mask'>
           <rect x='0' y='0' width='420' height='20' fill='#999'/>
           <rect x='-280' y='0' width='480' height='20' fill='#dadada'>
             <animate attributeName='x' from='-480' to='0' begin='0s' dur='2s' repeatCount='indefinite'/>
           </rect>
         </mask>
       </defs>
       <rect x='0' y='0' rx='5' ry='5' width='420' height='20' fill='#F6F6F6' mask='url(#mask)'/>
    </svg>"
)

Larger rectangle loading screen:

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 350'>
       <defs>
         <mask id='mask'>
           <rect x='0' y='0' width='400' height='350' fill='#999'/>
           <rect x='-600' y='0' width='400' height='350' fill='#dadada'>
             <animate attributeName='x' from='-500' to='0' begin='0s' dur='2s' repeatCount='indefinite'/>
           </rect>
         </mask>
       </defs>
       <rect x='0' y='0' rx='5' ry='5' width='400' height='350' fill='#F6F6F6' mask='url(#mask)'/>
    </svg>"
)

SVG allows for easy customization of the loading screens with color, size, and animation. It’s important to keep the loading screens simple and consistent with the overall design of the website or application to ensure a smooth and enjoyable user experience.

PowerApps

Now include these SVGs as images inside a flexible height gallery in PowerApps. Repeat for more images and adjust the viewbox, width and height properties as needed.

Hope you found this article useful.

See More Posts

chatbot-component-powerapps-using-power-virtual-agent

Anand

Link-in-bio profile cards in SharePoint lists

Anand

Create a quiz with Microsoft Lists

Anand

Find me here