In this post I am another discover from Codepen, is Simple CSS Loaders where you will see beautiful loaders through CSS code.
Sometimes, you just need a good loader! Jenning has you covered with this selection of single-element animated loaders.
In HTML:
<div class="page"> <header class="header"> <h1 class="header-title">Simple CSS loaders</h1> <p class="header-subtitle">single html element css animation</p> </header> <main class="container"> <div class="item"> <i class="loader --2"></i> </div> <div class="item"> <i class="loader --9"></i> </div> <div class="item"> <i class="loader --3"></i> </div> <div class="item"> <i class="loader --4"></i> </div> <div class="item"> <i class="loader --1"></i> </div> <div class="item"> <i class="loader --5"></i> </div> <div class="item"> <i class="loader --6"></i> </div> <div class="item"> <i class="loader --8"></i> </div> <div class="item"> <i class="loader --7"></i> </div> </main> </div>
In CSS:
.loader {
--color: white;
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
display: block;
position: relative;
width: 50%;
display: grid;
place-items: center;
}
.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
}
/**
loader --1
**/
.loader.--1::before {
width: var(--size-mid);
height: var(--size-mid);
border: 4px solid var(--color);
border-top-color: transparent;
border-radius: 50%;
animation: loader-1 1s linear infinite;
}
.loader.--1::after {
width: calc(var(--size-mid) - 2px);
height: calc(var(--size-mid) - 2px);
border: 2px solid transparent;
border-top-color: var(--color);
border-radius: 50%;
animation: loader-1 0.6s linear reverse infinite;
}
@keyframes loader-1 {
100% {
transform: rotate(1turn);
}
}
/**
loader --2
**/
.loader.--2::before,
.loader.--2::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
opacity: 0;
animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}
.loader.--2::after {
animation-delay: 0.3s;
}
@keyframes loader-2 {
0%, 80%, 100% {
opacity: 0;
}
33% {
opacity: 1;
}
0%, 100% {
transform: translateX(-4vmin);
}
90% {
transform: translateX(4vmin);
}
}
/**
loader --3
**/
.loader.--3::before,
.loader.--3::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
animation: loader-3 1.2s ease-in-out infinite;
}
.loader.--3::before {
left: calc(50% - 1.6vmin - var(--size-dot));
}
.loader.--3::after {
left: calc(50% + 1.6vmin);
animation-delay: -0.4s;
}
@keyframes loader-3 {
0%, 100% {
transform: translateY(-2.6vmin);
}
44% {
transform: translateY(2.6vmin);
}
}
/**
loader --4
**/
.loader.--4::before {
height: var(--size-bar);
width: 6vmin;
background-color: var(--color);
animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
@keyframes loader-4 {
0%, 44%, 88.1%, 100% {
transform-origin: left;
}
0%, 100%, 88% {
transform: scaleX(0);
}
44.1%, 88% {
transform-origin: right;
}
33%, 44% {
transform: scaleX(1);
}
}
/**
loader --5
**/
.loader.--5::before,
.loader.--5::after {
height: 3vmin;
width: var(--size-bar);
background-color: var(--color);
animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
.loader.--5::before {
left: calc(50% - 1vmin);
top: calc(50% - 3vmin);
}
.loader.--5::after {
left: calc(50% + 1vmin);
top: calc(50% - 1vmin);
animation-delay: 0.2s;
}
@keyframes loader-5 {
0%, 88%, 100% {
opacity: 0;
}
0% {
transform: translateY(-6vmin);
}
33% {
opacity: 1;
}
33%, 88% {
transform: translateY(3vmin);
}
}
/**
loader --6
**/
.loader.--6::before {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-6 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(100%);
}
50% {
transform: translateX(100%) translateY(100%);
}
75% {
transform: translateY(100%);
}
}
/**
loader --7
**/
.loader.--7::before,
.loader.--7::after {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
}
.loader.--7::before {
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
.loader.--7::after {
top: 50%;
left: 50%;
animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-7 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%) translateY(-100%);
}
75% {
transform: translateY(-100%);
}
}
/**
loader --8
**/
.loader.--8::before,
.loader.--8::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
}
.loader.--8::before {
top: calc(50% + 4vmin);
animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
}
.loader.--8::after {
opacity: 0;
top: calc(50% - 2vmin);
animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
}
@keyframes loader-8-1 {
0%, 55%, 100% {
opacity: 0;
}
0% {
transform: scale(0.2);
}
22% {
opacity: 1;
}
33%, 55% {
transform: scale(1) translateY(-6vmin);
}
}
@keyframes loader-8-2 {
0%, 100% {
opacity: 0;
}
33% {
opacity: 0.3;
}
0% {
transform: scale(0);
}
100% {
transform: scale(4);
}
}
/**
loader --9
**/
.loader.--9::before,
.loader.--9::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
}
.loader.--9::before {
left: calc(50% - var(--size-dot) - 1.6vmin);
}
.loader.--9::after {
left: calc(50% + 1.6vmin);
animation-delay: 0.12s;
}
@keyframes loader-9 {
0%, 100% {
opacity: 0;
}
0% {
transform: translate(-4vmin, -4vmin);
}
66% {
opacity: 1;
}
66%, 100% {
transform: none;
}
}
/**
miscs
**/
.container {
display: grid;
grid-template-columns: repeat(3, 18vmin);
grid-template-rows: repeat(3, 18vmin);
grid-gap: 1vmin;
}
.item {
background: rgba(255, 255, 255, 0.1);
display: grid;
place-items: center;
border-radius: 4px;
}
.page {
margin: auto;
}
.header {
margin-bottom: 4vmin;
}
.header-title {
font-size: 3.75vmin;
}
.header-subtitle {
font-size: 2vmin;
text-transform: uppercase;
opacity: 0.6;
}
html, body {
display: flex;
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: 'Noto Sans', sans-serif;
color: white;
text-align: center;
letter-spacing: 0.3px;
}
In Codepen:
Please share and comments this post and wants to improve the content WhatsApp us.
