Linear easing
Also called linear animation or linear timing function
Easing that moves at one constant speed from start to finish, with no speeding up or slowing down, drawn as a straight line on a graph.
export function Spinner({ label = 'Loading' }: { label?: string }) {
return (
<span
role='status'
className='inline-flex items-center gap-2 text-sm text-muted-foreground'
>
{/* linear keeps one steady speed, so each turn flows into the next
without speeding up or slowing down. Reduced motion: one turn every 2.4s. */}
<span
aria-hidden
className='size-4 animate-[spin_800ms_linear_infinite] rounded-full border-2 border-muted border-t-foreground motion-reduce:animate-[spin_2400ms_linear_infinite]'
/>
{label}
</span>
);
}Make the loading spinner rotate a full turn every 800ms with linear easing on an infinite loop, so it spins at a steady speed. When prefers-reduced-motion is set, slow it to one turn every 2.4 seconds.
Paste into Layerwise or any AI coding tool.
What is Linear easing?
With linear easing, an animation covers the same distance in every moment of its duration. On a graph of progress over time it is a straight diagonal. In CSS it is the linear keyword.
Linear suits motion that never really starts or stops: loading spinners, marquees, tickers, progress bars, and animations tied directly to scroll position. Put any other easing on a looping spinner and it surges and slows on every turn.
For things that start and stop, such as a menu opening or a card sliding into place, linear motion looks mechanical, because real objects speed up and slow down. Use ease-out or ease-in-out there instead.
CSS also has a linear() function that takes a list of points, such as linear(0, 0.25 75%, 1). Despite the name, it can approximate bounces and springs by joining many points with straight segments.
Often confused with
- Stepped animation
- A stepped animation jumps between a fixed number of frames. Linear easing moves smoothly at a constant speed.
Related terms
All termsEasing
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
Spinner
A small looping animation, usually a rotating ring, that shows the app is busy with a short task of unknown length.
Marquee
A strip of logos or text that scrolls sideways in an endless loop, often used for "trusted by" rows and announcements.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.