.loader {
    width: 35px;
    height: 80px;
    position: relative;
    animation: rotateChocolate 5s linear infinite, pulse 1.5s infinite alternate;
}

@keyframes rotateChocolate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f9e1ae;
}

.loader:before {
    content: "";
    position: absolute;
    inset: 0 0 20px;
    padding: 1px;
    background:
        conic-gradient(from -90deg at calc(100% - 3px) 3px, #7e3c26 135deg, #341612 0 270deg, #0000 0),
        conic-gradient(from 0deg at 3px calc(100% - 3px), #0000 90deg, #341612 0 225deg, #7e3c26 0),
        #54281f;
    background-size: 17px 17px;
    background-clip: content-box;
    --c: no-repeat linear-gradient(#000 0 0);
    -webkit-mask:
        var(--c) 0    0, 
        var(--c) 17px 0, 
        var(--c) 0    17px, 
        var(--c) 17px 17px, 
        var(--c) 0    34px, 
        var(--c) 17px 34px,
        linear-gradient(#000 0 0);
    mask:
        var(--c) 0    0, 
        var(--c) 17px 0, 
        var(--c) 0    17px, 
        var(--c) 17px 17px, 
        var(--c) 0    34px, 
        var(--c) 17px 34px,
        linear-gradient(#000 0 0);
    mask-composite: xor;
}

.loader:after {
    content: "";
    position: absolute;
    inset: 60% 0 0;
    background: #B21B01;
    border-top: 5px solid #c9c7c5;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loader.hide:after {
    opacity: 0;
}