.loader {
    --color-1: #fff;
    --color-2: #0000;
    --color-3: #de3500;
    --color-4: rgba(0, 0, 0, 0.25);
    --color-5: #f79577;
    --size: 1.05px;

    position: relative;
    width: calc(100 * var(--size));
    height: calc(130 * var(--size));
    background: var(--color-1);
    border-radius: calc(4 * var(--size));
}

.loader:before {
    content: '';
    position: absolute;
    width: calc(54 * var(--size));
    height: calc(25 * var(--size));
    left: 50%;
    top: 0;
    background-image:
        radial-gradient(ellipse at center,
            var(--color-2) 24%,
            var(--color-3) 25%,
            var(--color-3) 64%,
            var(--color-2) 65%),
        linear-gradient(to bottom, var(--color-2) 34%, var(--color-3) 35%);
    background-size:
        calc(12 * var(--size)) calc(12 * var(--size)),
        100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    transform: translate(-50%, -65%);
    box-shadow: 0 calc(-3 * var(--size)) var(--color-4) inset;
}

.loader:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    width: 66%;
    height: 60%;
    background: linear-gradient(to bottom, var(--color-5) 30%, var(--color-2) 31%);
    background-size: 100% calc(16 * var(--size));
    animation: writeDown 2s ease-out infinite;
}

@keyframes writeDown {
    0% {
        height: 0%;
        opacity: 0;
    }

    20% {
        height: 0%;
        opacity: 1;
    }

    80% {
        height: 65%;
        opacity: 1;
    }

    100% {
        height: 65%;
        opacity: 0;
    }
}