Loading to confetti animation
A spinner closes into a ring, a disc pops with a tick, confetti bursts from behind it and the words rise from their line.
Change anything, then export a GIF, an MP4 or a transparent video.
The sample look, font and background are shared. Anyone with the link can read the text you include.
Free download
Free for your own projects and client work, including commercial use. Read the licence
What it's good for
It is 1080 × 1080 pixels and 5 seconds long, and it plays once, then rests on its last frame. It comes with a background, which you can switch off above to get a transparent file.
The colours come from your brand kit. Change the timing in the editor. Type in the box above and the words change as you go.
- A success screen after an upload or a payment
- The end of a sign up or onboarding flow
- A post that celebrates a finished project
- The moment someone finishes a signup, order or upgrade
- Launch, birthday and New Year posts
How to use it on a website
- Pick your brand and words above, then download the dotLottie file.
- Add it to your site's files, for example as
/animations/loading-to-confetti.lottie. - Paste the code where the animation should play.
Without code
- Webflow: upload the Lottie JSON file in the Assets panel, then drag it onto your page.
- Framer: add a Lottie component and give it the JSON file.
- WordPress: use a Lottie block plugin and upload the JSON file.
Need it as a GIF or a video? Download the Lottie JSON and use the free Lottie to GIF or Lottie to MP4 converter, or check any file in the Lottie viewer.
For the steps in Mosso, read Edit a template.
Use it in code
Download the file, then copy the code for your platform. It plays once, and it holds a still frame for people who ask for less motion.
- Put
loading-to-confetti.lottiein your site'sanimationsfolder, so it loads from/animations/loading-to-confetti.lottie. - Paste this where it should play.
<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>
<dotlottie-wc src="/animations/loading-to-confetti.lottie" autoplay data-still="0.55"
aria-hidden="true"
style="display: block; width: 100%; aspect-ratio: 1 / 1; pointer-events: none"></dotlottie-wc>
<script>
// People who ask for less motion see a still frame: data-still is how far in, from 0 to 1.
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
const players = document.querySelectorAll('dotlottie-wc');
players.forEach((el) => el.removeAttribute('autoplay'));
customElements.whenDefined('dotlottie-wc').then(() => players.forEach((el) => {
const player = el.dotLottie;
if (!player || !el.dataset.still) return;
const show = () => player.setFrame(Math.round(Number(el.dataset.still) * (player.totalFrames - 1)));
if (player.isLoaded) show();
else player.addEventListener('load', show);
}));
}
</script>Good to know
Let clicks pass through
When confetti plays over your page, give it pointer-events: none so people can still click whatever is underneath.
Play it once
Celebrations work best right after the action, played once. Confetti that never stops turns into noise.
Use dotLottie for confetti
Confetti has lots of small pieces, so its files are bigger than an icon's. The zipped dotLottie file is much smaller than the JSON.
Respect reduced motion
Some people ask their device for less motion. Check prefers-reduced-motion and show a still frame for them instead.
Questions
Is this loading to confetti animation free?
Yes. A free account lets you download up to 50 library animations a day. You may edit these animations and use them in personal and commercial work, including client projects. Third party parts keep their own licences. Keep the supplied notices and credits when you share them. Mosso does not require a credit for its own work. The restriction on reselling Mosso templates does not limit rights granted by third party licences.
Can I change the colours and the words?
Yes. Pick a sample look above to see how it changes, and type your own words in the box. Open the Mosso project to edit its layers, timing and effect settings, and add your logo. Imported files may have fewer editable parts.
Should I download Lottie JSON or dotLottie?
dotLottie is the same animation in a zipped file, so it is smaller: this one is about 32 KB instead of 223 KB. Use it with the dotLottie players for the web, React, iOS and Android. Pick Lottie JSON when a tool asks for a .json file, like Webflow or lottie-web.
Can I get it as a GIF or a video?
Yes. Open it in Mosso and export a GIF, an MP4, a WebM video or PNG frames, all from the same project.
Is the background transparent?
Confetti is. Where an animation comes with a background, like the night sky behind fireworks, you can switch it off with the Background switch before you download.
Make it yours in Mosso
Change the words, colours, timing and size, add your logo, and export Lottie, GIF, MP4 or transparent video. Or start from a blank canvas and make something new.