Feedback

Spinners

Added Aug 14, 2026

A single loading spinner, chosen from 5 predefined animated styles (Spin, Ring, Dots, Bars, Pulse) with a custom color. Each animated natively via SVG, no Power Apps Timer needed. Inspired by the shadcn/ui Spinner composition.

Spin

CopySnips Live Preview

How to Use

On the Settings tab, pick a spinner type from the dropdown (Spin/Ring/Dots/Bars/Pulse; each option shows its own live-animated glyph, and the selection stays visible in the closed dropdown too) and a color from the color picker. The Preview tab and the copyable YAML update together to show that style and color.
Paste the YAML into Power Apps Studio (Ctrl+V). One control is added: imgSpinner, a single Image, no wrapping container.
The chosen style and color are baked directly into imgSpinner's SVG at copy-time. It's not a live-switchable option inside the pasted app; pick what you want on the website before copying. Edit imgSpinner.Image directly in the pasted YAML if you want to hand-tweak the animation (duration, size) afterward.
Every style animates entirely inside the SVG itself via native SMIL (<animate>/<animateTransform>). No Power Apps Timer, variable, or OnVisible is involved at all; it just keeps looping on its own for as long as the image is on screen.

Problem Solved

Provides a ready-made, genuinely animated loading spinner in a choice of common visual styles and any color. Power Apps has no native spinner control and no built-in way to loop a CSS-style animation without a Timer (which this component deliberately avoids, reusing Button Spinner's proven Timer-free technique).

Integration

Purely decorative: wrap it in an If()/Visible toggle against your own loading variable to show/hide it around a real async operation.

- imgSpinner:
    Control: Image@2.2.3
    Properties:
      Height: =40
      Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'><circle cx='12' cy='12' r='9' stroke='RGBA(15, 23, 42, 1)' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='42.4 14.1'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/></circle></svg>")
      Width: =40
      X: =20
      Y: =20

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Spinners

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation