How To Create a Right-Tick Animation with HTML, CSS, and JavaScript


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.

right tick animation using html css and 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.


<!DOCTYPE html>
<html lang="en">
<!-- -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Right tick animation |</title>


    <div class="main_box">
        <div class="box">
            <div class="line1"></div>
            <div class="line2"></div>




        * {
            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%;


    let box = document.querySelector(".box");

    window.addEventListener("load" , animation);
    function animation() {
        setTimeout(() => {
        }, 1000);


right tick or check mark animation using html css and javascript

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.

Post a Comment


Share your thoughts.

Post a Comment (0)
To Top