Adding animations to your website can make it more engaging and interactive for users. In this blog post, we'll create a right tick animation or checkmark animation using HTML, CSS, and simple Javascript.
Animations can be used for a variety of purposes on websites, such as:
- Highlighting actions and events.
- Improving user experience.
- Adding a touch of personality.
- Indicating completion.
- Marking, selecting etc.
This animation can be used for various purposes, such as indicating successful completion or marking items as checked. Used to provide visual confirmation to users when they click on a checkbox or complete an action.
Right Tick or Check Mark Animation.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right tick animation | maketechstuff.com</title>
</head>
<body>
<div class="main_box">
<div class="box">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.main_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 140px;
height: 80px;
display: block;
rotate: -45deg;
position: relative;
}
.line1 {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 0%;
background-color: blue;
border-radius: 100px;
transition: 0.3s;
}
.active .line1 {
height: 100%;
}
.line2 {
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 20px;
background-color: blue;
border-radius: 100px;
transition: 0.3s;
transition-delay: 0.3s;
}
.active .line2 {
width: 100%;
}
JavaScript
let box = document.querySelector(".box");
window.addEventListener("load" , animation);
function animation() {
setTimeout(() => {
box.classList.add("active");
}, 1000);
}
Output:
Crafting engaging right-tick or check mark animations is surprisingly simple with HTML, CSS, and JavaScript. Feel free to leave any questions or suggestions in the comments below.
Share your thoughts.