Envelope Loader
A letter slides into an open envelope, the flap folds shut and the envelope hops as it is sent. Built from clip-path triangles; the flap flips with scaleY and swaps its z-index.
Also known as: mail sending animation, email loader css, letter envelope animation.
HTML
<div class="ldr-envelope" role="status" aria-label="Sending">
<span class="ldr-envelope-body">
<span class="ldr-envelope-letter"></span>
<span class="ldr-envelope-pocket"></span>
<span class="ldr-envelope-flap"></span>
</span>
</div>CSS
.ldr-envelope {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-envelope-body {
position: absolute;
left: 8%;
right: 8%;
bottom: 14%;
height: 54%;
border-radius: calc(var(--s) / 20);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
animation: ldr-envelope-send 2.4s infinite;
}
.ldr-envelope-letter {
position: absolute;
z-index: 1;
left: 12%;
right: 12%;
top: 8%;
height: 80%;
box-sizing: border-box;
border: calc(var(--s) / 40) solid var(--c);
border-radius: calc(var(--s) / 40);
background:
repeating-linear-gradient(to bottom, var(--c) 0 calc(var(--s) / 30), transparent 0 calc(var(--s) * 0.08)) 50% 30% / 64% 36% no-repeat,
color-mix(in srgb, var(--c) 10%, #fff);
animation: ldr-envelope-letter 2.4s infinite;
}
.ldr-envelope-pocket {
position: absolute;
z-index: 2;
inset: 0;
border-radius: calc(var(--s) / 20);
background: var(--c);
clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.ldr-envelope-flap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 62%;
background: color-mix(in srgb, var(--c) 72%, #000);
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform-origin: 50% 0;
animation: ldr-envelope-flap 2.4s infinite;
}
@keyframes ldr-envelope-letter {
0% { transform: translateY(-70%); opacity: 0; }
10% { transform: translateY(-70%); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
36% { transform: translateY(6%); opacity: 1; }
58% { transform: translateY(6%); opacity: 1; }
60% { transform: translateY(6%); opacity: 0; }
100% { transform: translateY(-70%); opacity: 0; }
}
@keyframes ldr-envelope-flap {
0%, 38% { transform: scaleY(-1); z-index: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
39% { z-index: 3; }
48%, 84% { transform: scaleY(1); z-index: 3; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
93%, 100% { transform: scaleY(-1); z-index: 0; }
}
@keyframes ldr-envelope-send {
0%, 50% { transform: translate(0, 0) rotate(0); }
56% { transform: translate(0, calc(var(--s) * 0.03)) rotate(0); }
64% { transform: translate(calc(var(--s) * 0.04), calc(var(--s) * -0.1)) rotate(-6deg); }
74%, 100% { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-envelope, .ldr-envelope *, .ldr-envelope::before, .ldr-envelope::after, .ldr-envelope *::before, .ldr-envelope *::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.