Hello friends, today in this blog you will learn how to create a loader with check mark animation using HTML and CSS. In our previous blog, we saw how to create a file downloader via URL using pure javascript. Earlier, I shared many projects related to javascript, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.
Preloaders (also known as loaders) are what you see on the screen while the rest of the page’s content is still loading. Loaders are simple or complex animations that are used to keep your visitors and content viewers entertained while the page’s content is still loading.
In this program (Circle Loader with Check-mark Animation), this loader rotates 360deg infinitely with changing its border-color at a certain time but when you click on this loader, this loader stops rotating and there is shown a check-mark icon with smooth animation which indicates that the loading process has been completed.
You may like these:
- Create Todo List App
- Filterable Image Gallery with preview
- How to Detect User Location
- Create a button to download the image
If you like this blog and want to download the source code files, I’ve also provided the download link of this program where you can easily download the source files of this program here.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- -------------------- Created By InCoder -------------------- -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader With Check Mark Animation - InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<input type="checkbox" id="loader">
<label for="loader">
<div class="check"></div>
</label>
</body>
</html>
CSS Code
/* -------------------- Created By InCoder -------------------- */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #202020;
}
input {
display: none;
}
input:checked~label {
animation: none;
transition: border 0.5s ease-out;
}
input:checked~label .check {
display: block;
}
label {
width: 7rem;
height: 7rem;
position: relative;
border-radius: 50%;
border: 2px solid #ccc;
border-left: 2px solid #472db9;
animation: spin 1.2s linear infinite, colorChange 3s linear infinite;
}
label .check {
top: 50%;
left: 23px;
width: 28px;
content: "";
height: 56px;
display: none;
position: absolute;
transform-origin: left top;
animation: check 0.8s ease;
border-top: 4px solid #5cb85c;
border-right: 4px solid #5cb85c;
transform: scaleX(-1) rotate(135deg);
}
@keyframes check {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 28px;
opacity: 1;
}
40% {
height: 56px;
width: 28px;
opacity: 1;
}
100% {
height: 56px;
width: 28px;
opacity: 1;
}
}
@keyframes colorChange {
40% {
border-left: 2px solid #2db981;
}
60% {
border-left: 2px solid #b97f2d;
}
80% {
border-left: 2px solid #b92db2;
}
100% {
border-left: 2px solid #b92d2d;
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
Top comments (0)