Button Spinner
A disabled, secondary-style button showing a loading ring next to text: a loading/busy state indicator. Inspired by the shadcn/ui ButtonLoading composition.
No settings required
This component works out of the box — no configuration needed.
How to Use
- No settings: the button text ("Generating") is fixed; edit it directly in the pasted YAML (lblButtonSpinnerText.Text) if you need different wording.
- Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conButtonSpinner) is added.
- Unlike Button Search/Button with Icon, this component has NO click target: it represents a disabled, in-progress loading state, matching the shadcn/ui source's `disabled` buttons, so there's nothing to wire up an OnSelect for.
- The ring spins on its own via a native SVG animation (animateTransform) baked into the icon's image. No Power Apps Timer or formula drives it, so it keeps rotating indefinitely with nothing else needed on the screen.
- No OnVisible initialisation needed.
Problem Solved
Provides a ready-made "busy/loading" button state (spinner + text, disabled) which Power Apps has no native control for (you'd otherwise hand-build the disabled styling and loading glyph separately each time).
Integration
No settings-driven content. To actually gate this on a real async operation, wrap it in an If()/Visible toggle against your own loading variable, and swap it out for your real (enabled) button once the operation completes.
YAML Code
- conButtonSpinner:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Height: =36
Width: =140
X: =20
Y: =20
Children:
- imgButtonSpinnerBg:
Control: Image@2.2.3
Properties:
Fill: =RGBA(241, 245, 249, 1)
Image: =Blank()
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Height: =Parent.Height
Width: =Parent.Width
X: =0
Y: =0
- conButtonSpinnerContent:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
PaddingLeft: =10
PaddingRight: =10
Height: =Parent.Height
Width: =Parent.Width
Children:
- imgButtonSpinnerIcon:
Control: Image@2.2.3
Properties:
AlignInContainer: =AlignInContainer.Center
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>")
Height: =16
Width: =16
- lblButtonSpinnerText:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Center
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =Parent.Height
Size: =10
Text: ="Generating"
Width: =94Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide