Paper Plane Loader
A folded paper plane glides on a gentle swell, trailing a dashed flight path that keeps streaming behind it. Suits 'sending' states for messages, forms and invites.
Also known as: paper airplane animation, send message loader, flying plane css.
HTML
<div class="ldr-paper-plane" role="status" aria-label="Sending">
<svg viewBox="0 0 72 48" aria-hidden="true">
<g class="ldr-paper-plane-flight">
<path class="ldr-paper-plane-trail" d="M3 34c8 0 10-10 18-10s9 8 15 2"/>
<path d="M36 23L68 10L46 30Z"/>
<path class="ldr-paper-plane-fold" d="M46 30L68 10L54 39Z"/>
<path class="ldr-paper-plane-fold" d="M46 30L50 37L54 39Z"/>
</g>
</svg>
</div>CSS
.ldr-paper-plane {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
width: calc(var(--s) * 1.5);
height: var(--s);
}
.ldr-paper-plane svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
fill: var(--c);
}
.ldr-paper-plane-flight {
transform-origin: 70% 50%;
animation: ldr-paper-plane-glide 2.4s ease-in-out infinite;
}
.ldr-paper-plane-fold {
fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
}
.ldr-paper-plane-trail {
fill: none;
stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 3 4;
animation: ldr-paper-plane-dash 0.6s linear infinite;
}
@keyframes ldr-paper-plane-glide {
0%, 100% { transform: translateY(4%) rotate(3deg); }
50% { transform: translateY(-8%) rotate(-5deg); }
}
@keyframes ldr-paper-plane-dash {
to { stroke-dashoffset: 7; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-paper-plane, .ldr-paper-plane *, .ldr-paper-plane::before, .ldr-paper-plane::after, .ldr-paper-plane *::before, .ldr-paper-plane *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.