Simple CSS Loader Animation

Simple CSS Loader Animation

In this video, you will learn how easy it is to create loading animation with Pure CSS


<!DOCTYPE html>
	<link rel="stylesheet" href="main.css">
	<title>Simple CSS Loader</title>
 <div class="holder">
 	<div class="loader"></div>

CSS Code

body {
    background: #2c3e50;
.holder {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
.loader {
    width: 100px;
    height: 100px;
    border: 10px dashed #fff;
    border-top-color: rgba(231, 76, 60, 0.6);
    border-bottom-color: rgba(26, 188, 156, 0.6);
    border-radius: 50%;
    animation: load 2s ease-in-out infinite;
@keyframes load {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
Comments are closed.