Motion Element
Ring Progress Animation Generator
A thick rounded ring sweeps clockwise to your percentage while the figure counts up in the middle. One value, one colour, done.
Create in your browser. Start for free.
What Is the Ring Progress Animation?
The ring progress animation is a circular percentage indicator on a square white card. A soft track marks the full circle, a gradient stroke with rounded ends sweeps around it to the share you set, and the percentage counts up in large type at the centre while the ring moves. A title sits above the ring and a caption underneath carries the detail, such as of monthly goal or of respondents. It is the visual most apps use for completion and goals, which is why viewers read it instantly: 73 percent of a ring means the same thing to everyone. Use it for savings progress, course completion, survey results with one headline share, capacity, or any single number out of a hundred.
How It Works
The ring's stroke length is driven by an eased progress value that runs from zero to your percentage over the build phase, and the centre figure is rounded from that same value on each frame, so the number and the arc never disagree. The stroke uses a multi-stop gradient with eased colour steps, which avoids the banding a two-stop gradient shows on a curve. Rounded line caps keep the leading edge soft. Once the sweep lands, the caption fades in and the card holds for whatever duration you set.
Best For
- -Savings goal and fundraising progress
- -Course, challenge or programme completion
- -Share of budget used or remaining
- -Survey results with one headline percentage
- -Capacity, occupancy or battery-style readouts
Best Platforms for Ring Progress Animation
TikTok
Challenge and progress content on TikTok relies on a number the viewer can compare to last week's. A ring that sweeps a little further each update is a visual streak, and it reads at thumb-scroll speed.
Survey and report posts on LinkedIn are usually a static chart screenshot. A ring that sweeps to the headline percentage in a short clip stands out in the feed and keeps the number readable on a phone.
Ring or bar: choosing the right progress animation
A circular progress animation and a horizontal progress bar show the same thing, so the choice is about layout and meaning. A ring is compact and square, which suits a stat that sits beside a face or in a grid with other cards, and it reads as completion or share of a whole. A bar is wide and reads as position along a path, which suits timelines and step counts. If you have several percentages to compare, one ring each becomes hard to read; the comparison card with its stacked pill bars handles that better. If you have one figure and want it to feel like an achievement, the ring is the stronger choice, and the centre number gives you the headline without any extra text.
Values above 100 percent and values that change
The ring accepts any percentage from zero to one hundred. If your figure is above a hundred, for example 140 percent of target, set the ring to full and put the real number in the caption, or use the number counter animation for the figure and keep the ring as a supporting graphic. For a value that changes across a video, add the element twice on the timeline with different percentages, and the second instance sweeps from zero to the new share, which reads as an update. The track tint, the gradient accent and the surface colour are separate controls, so a ring on a dark card, a light ring on a coloured surface and the default white card are all one element with different settings.
Can the ring start from a value other than zero?
The sweep always begins at zero so the motion reads as filling up. To show a change from one share to another, place two copies on the timeline, the second with the new percentage, and cut between them on the beat.
Can I show a fraction or a count instead of a percentage?
The centre figure is always the percentage, because that is what the ring geometry represents. Put the raw count in the caption line, for example 730 of 1,000 backers, and the viewer gets both readings.
Does the percentage animate smoothly or in steps?
It is recomputed every frame from the same eased progress that drives the arc, so it climbs in whole numbers without skipping and lands exactly on your value on the final build frame, in the preview and in the export.
Can I make the ring thicker or thinner?
Stroke weight scales with the card width, which is the single size control; a wider card gives a heavier ring in proportion. There is no separate thickness slider, which keeps every ring in the family looking like the same object.
Your next video starts here
Create a Free Ring Progress Animation Motion Element
Beautiful captions. Your words, your style.
Keep exploring