Skip to main content
CSS Tip

A simple CSS loader

Create a CSS-only loader with a simple code.

A CSS only loader

.loader {
width: 120px; /* the size */
padding: 15px; /* the border thickness */
background: #07e8d6; /* the color */

aspect-ratio: 1;
border-radius: 50%;
mask:
conic-gradient(#0000,#000),
linear-gradient(#000 0 0) content-box;
mask-composite: subtract;
box-sizing: border-box;
animation: load 1s linear infinite;
}

@keyframes load {
to{transform: rotate(1turn)}
}

See the Pen Spinner loader by Temani Afif (@t_afif) on CodePen.

More loaders: css-loaders.com


More CSS Tips