Animations for Power Apps

The Animations family is the moving pieces for a Power Apps screen: a progress bar and a percentage counter that fill up on a Timer control, a progress circle and a line chart drawn as SVG inside an Image control, and a two-state toggle with a sliding knob. Makers reach for them when a plain label looks too static: an upload that should visibly fill, or a KPI ring on a dashboard. Every component in this family needs a Components, Ultra, Team or Lifetime plan, and the whole family is Classic YAML only.

Pick a variant

Component	Plan	What it is for	Settings you can change
Success Check	Paid	The tick that draws itself after a save: a ring sweeps in, the check mark draws, the message appears. Show it with one variable, hide it again automatically. Light and dark.	See the Settings tab
Staggered Fade-in	Paid	A list whose rows appear one after another, each fading in while sliding up. One Timer, one tick variable, and every row works out its own moment. Light and dark.	See the Settings tab
Animated Bar Chart	Paid	Bars that grow from the baseline one after another, values fading in above them. One SVG image, your labels and values from Settings, click to replay. Light and dark.	See the Settings tab
Loading Spinner	Paid	Three styles of please wait in one SVG image: a spinning ring, pulsing dots or bouncing bars, with an optional caption. Bind Visible to your loading flag. Light and dark.	See the Settings tab
Animated Line Chart	Paid	A dashboard line chart from typed values or a SharePoint list	Connect to SharePoint Data with SharePoint List Name, X-Axis Label Column and Y-Axis Value Column; Chart Title, Y-Axis Labels, X-Axis Labels, Data Values; Glow Effect, Shadow Effects, Area Gradient Fill and their gradient colors; five Animate switches; Animation Speed Multiplier
Animated Toggle	Paid	A two-state switch with your own text on each side	Activate Text, Disable Text, Toggle Color, Background Color, Animation Duration (seconds)
Count-up Number	Paid	A number that counts from 0% to 100% with Start and Reset buttons	Total Duration (seconds), Start Button Text, Reset Button Text
Progress Bar	Paid	Loading states, file uploads and data processing, filled by a Start button	Width (px), Height (px), Duration (seconds), Button Text, Show Percentage
Progress Circle	Paid	A dashboard ring that shows whatever number is typed into its text box	Value (0-100), Width (px), Height (px), Stroke Width (px), Duration (seconds), Input Label

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Animations.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

The demo drivers are part of the paste: the bar has a Start button and a hidden Timer, the circle reads a text box, the counter has Start and Reset buttons. To use your own data, point the same variables and controls at it. Names below use the default var, lbl, txt and con prefixes.

Put this in the OnSelect property of your own button to move the Modern Progress Bar to a value without the demo animation. The fill container conFill is Parent.Width * varProgress / 100 wide and lblPercent shows the rounded number, so both follow the variable. Leave varIsLoading alone: true starts the hidden Loader Timer that runs the fake upload.

Set(varProgress, 40)

Put this in the Default property of txtPercent to draw the Modern Progress Circle from a table called Tasks instead of a typed number. The Image imgModernProgress and the label lblPercentDisplay both read Value(txtPercent.Text). Hide the box with its Visible property once it works.

Text(
    Round(
        CountRows(Filter(Tasks, Status = "Done")) / CountRows(Tasks) * 100,
        0
    )
)

Put this in the OnSelect property of a reset button to push the Animated Toggle to one side from code. varToggle is the Boolean the knob and both labels flip; read it in any Visible property. varToggleCount must change too, or the knob will not slide.

Set(varToggle, true);
Set(varToggleCount, varToggleCount + 1)

Good to know

Modern Progress Bar and Percentage Counter run on a hidden Timer control (Loader and timerCircular) that adds a slice to varProgress or varCircularProgress on every tick. Duration (seconds) sets the bar's slice size (its tick stays at 50 milliseconds); Total Duration (seconds) sets the counter's tick length (its slice stays at 1). Delete the Timer and the Start button does nothing.
Modern Progress Circle and Animated Line Chart are an SVG string inside an Image control (imgModernProgress and imgLineChart). The circle redraws when txtPercent changes; the chart replays when varChartReload changes, which clicking the chart or btnReloadChart does.
Animated Line Chart is the only component here with an Instructions tab. Manual Mode bakes the Data Values into the YAML. Connect to SharePoint Data adds a Code to Copy section to the Settings tab; its third block goes into the screen's OnVisible property, collects the list into colMyCollection and builds varLinePath, varAreaPath, varCircles and varXLabels. The list needs a label column (text or number) and a number column.
The bar, circle, counter and toggle knob follow the brand color from your settings; Toggle Color overrides it once you pick one. The line chart does not: its gradients come from the Line Gradient Colors and Area Fill Gradient Colors sections, blue until you change them. The light and dark toggle in the component header swaps the grey backgrounds.
Modern Progress Circle has no Show Value switch: lblPercentDisplay is always generated, so hide it with its Visible property if you only want the ring.

Open the family in the library at Animations. Related guides: Toggles and Data Display.