css loading animation
Projects

Simple CSS Loader Animation

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

HTML Code


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

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);}
}