.loader {
    width: 112px;
    height: 112px;
    cursor: pointer;
}

.box1,
.box2,
.box3 {
    box-sizing: border-box;
    position: absolute;
    display: block;
    border-radius: 6px;
}

.box1 {
    z-index: 2;
    width: 50px;
    height: 50px;
    margin-left: 13px;
    background: transparent;
    display: inline-block;
    transform: rotate(12deg);
    filter: url('#goo');
    animation-name: box1Out;
    animation-duration: 1s;

}

.box1::before {
    content: "";
    display: block;
    padding-top: 95%;
    background: #777777;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);

}

.box2 {
    z-index: 1;
    width: 50px;
    height: 50px;
    margin-top: 55px;
    margin-left: 0px;
    background: #f45a0e;
    border-radius: 50%;
    animation-name: box2Out;
    animation-duration: 1s;
}


.box3 {
    z-index: 2;
    width: 50px;
    height: 105px;
    margin-top: 0px;
    margin-left: 60px;
    background: #ffbc00;
    animation-name: box3Out;
    animation-duration: 1s;
}

.loader:hover .box1 {


    animation: box1In 1s 0ms forwards ease-in-out;
}

.loader:hover .box1::before {
    background: #ffbc00;
}

.loader:hover .box2 {
    animation: box2In 1s 0ms forwards ease-in-out;
}

.loader:hover .box3 {
    background: #308eff;
    animation: box3In 1s 0ms forwards ease-in-out;
}

/* Box1 On Mouse Hover Animation*/
@keyframes box1In {
    from {
        width: 50px;
        height: 50px;
        margin-top: 0px;
        margin-left: 13px;
        transform: rotate(12deg);
    }

    to {
        width: 60px;
        height: 60px;
        margin-top: 0px;
        margin-left: 0px;
        transform: rotate(0deg);
    }
}

/* Box1 On Mouse Out Reverse Animation*/
@keyframes box1Out {
    from {
        width: 60px;
        height: 60px;
        margin-top: 0px;
        margin-left: 0px;
        transform: rotate(0deg);

    }

    to {
        width: 50px;
        height: 50px;
        margin-top: 0px;
        margin-left: 13px;
        transform: rotate(12deg);
    }
}

/* Box2 On Mouse Hover Animation*/
@keyframes box2In {
    from {
        width: 50px;
        height: 50px;
        margin-top: 55px;
        margin-left: 0px;
    }

    to {
        width: 35px;
        height: 35px;
        margin-top: 0px;
        margin-left: 50px;
    }
}

/* Box2 On Mouse Out Reverse Animation*/

@keyframes box2Out {
    from {
        width: 35px;
        height: 35px;
        margin-top: 0px;
        margin-left: 50px;
    }

    to {
        width: 50px;
        height: 50px;
        margin-top: 55px;
        margin-left: 0px;
    }
}

/* Box3 On Mouse Hover Animation*/
@keyframes box3In {
    from {
        width: 50px;
        height: 105px;
        margin-top: 0px;
        margin-left: 60px;
    }

    to {
        width: 95px;
        height: 25px;
        margin-top: 64px;
        margin-left: 0px;
    }
}


/* Box3 On Mouse Out Reverse Animation*/
@keyframes box3Out {
    from {
        width: 95px;
        height: 25px;
        margin-top: 64px;
        margin-left: 0px;
    }

    to {
        width: 50px;
        height: 105px;
        margin-top: 0px;
        margin-left: 60px;
    }
}

.loader_dev {
    width: 112px;
    height: 112px;
    cursor: pointer;
}

.box_dev1,
.box_dev2,
.box_dev3 {
    box-sizing: border-box;
    position: absolute;
    display: block;
    border-radius: 6px;
}

.box_dev1 {
    z-index: 1;
    width: 112px;
    height: 48px;
    margin-top: 55px;
    margin-left: 0px;
    background: #ff6d43;
    animation-name: box_dev1Out;
    animation-duration: 1s;

}

.box_dev2 {
    z-index: 3;
    width: 50px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
    background: rgb(244 192 14);
    animation-name: box_dev2Out;
    animation-duration: 1s;
}

.box_dev3 {
    z-index: 2;
    width: 50px;
    height: 48px;
    margin-top: 0px;
    margin-left: 60px;
    background: #7d7d7d;
    animation-name: box_dev3Out;
    animation-duration: 1s;

}

.loader_dev:hover .box_dev1 {
    animation: box_dev1In 1s 0ms forwards ease-in-out;
}

.loader_dev:hover .box_dev2 {
    animation: box_dev2In 1s 0ms forwards ease-in-out;
}

.loader_dev:hover .box_dev3 {
    background: #2d9be3;
    animation: box_dev3In 1s 0ms forwards ease-in-out;
}

/* Box1 On Mouse Hover Animation*/
@keyframes box_dev1In {
    from {
        width: 112px;
        height: 48px;
        margin-top: 64px;
        margin-left: 0px;
    }

    to {
        width: 48px;
        height: 64px;
        margin-top: 28px;
        margin-left: 28px;
    }
}

/* box_dev1 On Mouse Out Reverse Animation*/
@keyframes box_dev1Out {
    from {
        width: 48px;
        height: 64px;
        margin-top: 28px;
        margin-left: 28px;
    }

    to {
        width: 112px;
        height: 48px;
        margin-top: 55px;
        margin-left: 0px;
    }
}


/* box_dev2 On Mouse Hover Animation*/
@keyframes box_dev2In {


    from {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
    }

    to {
        width: 48px;
        height: 112px;
        margin-left: 64px;
    }
}


/* box_dev2 On Mouse Out Reverse Animation*/
@keyframes box_dev2Out {


    from {
        width: 48px;
        height: 112px;
        margin-left: 64px;
    }

    to {
        width: 50px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
    }
}

/* box_dev2 On Mouse Hover Animation*/
@keyframes box_dev3In {

    from {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 64px;

    }

    to {
        width: 112px;
        height: 62px;
        margin-top: 50px;
        margin-left: 0px;

    }
}

/* box_dev3 On Mouse Out Reverse Animation*/
@keyframes box_dev3Out {

    from {
        width: 112px;
        height: 64px;
        margin-top: 50px;
        margin-left: 0px;

    }

    to {
        width: 50px;
        height: 48px;
        margin-top: 0px;
        margin-left: 60px;

    }
}

.loader_main {
    width: 112px;
    height: 112px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
}

.box_main1,
.box_main2 {
    box-sizing: border-box;
    position: absolute;
    display: block;
    border-radius: 6px;
}

.box_main1 {
    z-index: 1;
    width: 48px;
    height: 48px;
    border: 22px solid gray;
    border-radius: 50%;
    margin-left: 0px;
    animation-name: box_main1Out;
    animation-duration: 0.6s;

}

.box_main2 {
    z-index: 3;
    width: 70px;
    height: 70px;
    margin-top: 0px;
    margin-left: 55px;
    border: 32px solid orange;
    border-radius: 50%;
    animation-name: box_main2Out;
    animation-duration: 0.6s;

}

.loader_main:hover .box_main1 {
    border: 30px solid orange;
    animation: box_main1In 0.6s 0ms forwards ease-in-out;
}

.loader_main:hover .box_main2 {

    animation: box_main2In 0.6s 0ms forwards ease-in-out;
}


/* box_main1 Mouse In Hover Animation*/
@keyframes box_main1In {
    from {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
        border: 22px solid gray;

    }

    to {
        width: 70px;
        height: 70px;
        margin-top: 0px;
        margin-left: 55px;
        border: 30px solid orange;
    }
}

/* box_main1 Mouse Out Reverse Animation*/
@keyframes box_main1Out {
    from {
        width: 70px;
        height: 70px;
        margin-top: 0px;
        margin-left: 55px;
        border: 30px solid orange;
    }

    to {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
        border: 22px solid gray;
    }
}


/* box_main2 Mouse In Hover Animation*/
@keyframes box_main2In {
    from {
        width: 70px;
        height: 70px;
        border: 32px solid orange;
    }

    to {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
        border: 20px solid rgb(255, 102, 0);
    }
}

/* box_main2 Mouse Out Reverse Animation*/
@keyframes box_main2Out {
    from {
        width: 48px;
        height: 48px;
        margin-top: 0px;
        margin-left: 0px;
        border: 20px solid rgb(255, 102, 0);

    }

    to {
        width: 70px;
        height: 70px;
        border: 32px solid orange;
    }
}