Alerts & Dialogs

Alert Success Animated

Added Jun 24, 2026

An animated success alert: slides in on appear and shows a green progress bar sweeping left to right. Powered by two PA Timer controls inside the group.

Changes saved

Your changes have been saved successfully and are now live.

CopySnips Live Preview

How to Use

Paste the copied YAML into Power Apps Studio (Ctrl+V).
Set varAlertTitle and varAlertBody via context or global variables.
⚡ Create a boolean variable named varPlayAlertSuccess in your app.
⚡ Set varPlayAlertSuccess = true to trigger the animation: the alert slides in and the green bar fills over 4 seconds.
⚡ Set varPlayAlertSuccess = false to hide the alert and reset both timers. The next time you set it to true, the animation replays from the beginning.

Problem Solved

Provides a visually engaging success alert for Power Apps. The slide-in draws user attention, and the green progress bar reinforces a positive outcome or indicates an auto-dismiss countdown.

Integration

⚡ Animation is controlled entirely by the boolean variable varPlayAlertSuccess. Set it to true after a successful action (e.g., save, submit) to show the alert with animation. Set it back to false to hide and reset. Both Timer controls (timAlertAnim, timAlertProgress) use Start: =varPlayAlertSuccess and Reset: =!varPlayAlertSuccess, so no manual timer wiring is needed.

- conAlertSuccessAnim:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      Fill: =RGBA(255, 255, 255, 1)
      Height: =100
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Width: =502
      X: =100
      Y: =100
    Children:
      - timAlertProgress:
          Control: Timer@2.1.0
          Properties:
            Duration: =4000
            Height: =10
            Repeat: =false
            Reset: =!varPlayAlertSuccess
            Start: =varPlayAlertSuccess
            Visible: =false
            Width: =10
            X: =0
            Y: =0
      - rectAlertProgress:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(34, 197, 94, 1)
            Height: =3
            Width: =Parent.Width * Min(timAlertProgress.Value, 4000) / 4000
            X: =0
            Y: =Parent.Height - 3
      - icoAlertIcon:
          Control: Image@2.2.3
          Properties:
            Height: =16
            Image: ="data:image/svg+xml," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#16a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>")
            Width: =16
            X: =16
            Y: =20
      - lblAlertTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =13
            Text: ="Changes saved"
            Width: =Parent.Width - 60
            X: =44
            Y: =16
      - lblAlertBody:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =37
            Size: =12
            Text: ="Your changes have been saved successfully and are now live."
            Width: =Parent.Width - 60
            X: =44
            Y: =48

Implementation

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

Something not pasting right? Troubleshooting guide