The short version
- For social posts and stories, a video loop of 5 to 15 seconds is usually long enough to read and short enough to replay.
- Website background loops work well at 10 to 30 seconds, kept small enough to load quickly.
- Screens in shops, venues and receptions suit longer loops of 20 to 30 seconds, because people see them many times.
- Animated GIFs for emails should stay around 2 to 5 seconds, because GIF files grow quickly with length.
- Slow motion makes any loop length feel calmer and hides the moment the loop restarts.
On this page
How long should a video loop be? For most social posts and stories, 5 to 15 seconds. For a website background, 10 to 30 seconds. For a screen in a shop or venue that people pass every day, 20 to 30 seconds, and for a GIF in an email, just 2 to 5 seconds. The right length is a balance between three things: time to read any words, how often people will see the restart, and file size. A seamless loop with slow motion can be shorter than you'd expect.
Video loop length by placement
Loop length
Why
Loop length
Why
Loop length
Why
Loop length
Why
Loop length
Why
Loop length
Why
Three things that decide the length
Time to read the words
If the loop carries a message, it must stay on screen long enough for someone to read it comfortably, ideally twice. A three word headline needs only a few seconds; a headline, a date and a place need more. If words animate in, count from the moment they settle, not from the start.
How often the restart is seen
Every loop has a seam, the moment the last frame meets the first. Even a perfect seamless loop repeats its pattern, and the more times someone watches, the more they notice it. That is why loops that are watched for a long time, such as screens in a café or a website hero, deserve more seconds than a post scrolled past in two.
File size
Length is the biggest driver of file size. Double the seconds and, at the same quality, you roughly double the file. On a website that slows the page; in an email it can push a GIF past what inboxes will happily load. Short loops with slow movement give the best ratio of feeling to kilobytes.
Too short
- Words gone before they're read
- The restart is visible every couple of seconds
- Motion has to be fast to fit, which feels nervous
- Feels like a GIF from a meme
Too long
- Heavy file, slow to load
- Nobody sees the second half on a feed
- Nothing new happens, just more of the same
Match the motion speed to the loop
Length and pace work together. A slow drift across 10 seconds feels calm and expensive; the same drift squeezed into 3 seconds becomes a wobble. As a rule, choose the pace first, then pick the shortest length in which one full cycle of that motion looks unhurried. Gentle motions, such as colour slowly breathing or light moving across a gradient, can loop at any length because they never draw attention to where they start.
A story loop at 8 seconds: one line of words, a slow drift, gone before it repeats too often.
A counter screen loop at 30 seconds: the background breathes so slowly that customers queueing never see a restart.
Website background video length
A background video on a website should be 10 to 30 seconds, silent, and as small as you can make it while still looking clean: aim for a few megabytes, not tens. Give it a poster image so something shows while it loads, and stop it for visitors who have asked their device for reduced motion. Video background website covers compression and formats in full.
<video class="hero-loop" autoplay muted loop playsinline
poster="/hero-poster.jpg" preload="metadata">
<source src="/hero-loop.webm" type="video/webm">
<source src="/hero-loop.mp4" type="video/mp4">
</video>
<script>
// Pause the loop for visitors who prefer less motion
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector('.hero-loop').pause();
}
</script>Choosing a loop length, step by step
- 1
Start from the placement
Take the starting range from the table above for where the loop will play.
- 2
Time the words
Read the text aloud twice at a relaxed pace. The loop should be at least that long after the words settle.
- 3
Set the pace
Choose slow motion for brand loops and screens; save brisk motion for short, energetic posts.
- 4
Watch it five times
Play the loop on repeat. If the restart starts to bother you by the fifth play, add seconds or slow the motion.
- 5
Check the file
If it's too heavy for the page or the email, shorten it before you lower the quality.
For specific formats, see Spotify Canvas size, animated email headers and ambient video for screens that play all day.
Loop lengths in Gradiently
With Pro, Gradiently exports any design as a seamless loop from 5 to 30 seconds, as MP4 or WebM up to 1080p, or as a GIF. You choose the seconds and a slow, even or brisk pace, and the Mark's motion is built to join without a visible seam at whatever length you pick. Recording runs in real time, so a 30 second loop takes 30 seconds to make; keep the tab open while it finishes.
Questions people ask
How long should a looping video be for Instagram?
5 to 10 seconds for a feed post and 5 to 15 seconds for a story or Reel background, long enough to read any words twice.
How long should a website background video be?
10 to 30 seconds, silent and compressed to a few megabytes, with a poster image and a pause for visitors who prefer reduced motion.
How long should a GIF loop be?
Around 2 to 5 seconds. GIF files grow quickly with length, which matters most in emails.
Does a longer loop look better?
Only where people watch for a long time, such as screens and website heroes. On a feed, extra seconds add file size that nobody sees.
How do I hide where a video loop restarts?
Make the last frame flow into the first, use slow motion and give screens that play all day a longer loop of 20 to 30 seconds.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile