.loader01 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}

.loader01::after,
.loader01::before {
    content: '';
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; /* osynlig innan animationen drar igång */
    animation: animloader01 2s linear infinite;
    animation-delay: 0.1s; /* liten fördröjning vid start */
}

.loader01::after {
    animation-delay: 1.2s; /* fasförskjutning för andra cirkeln */
}

@keyframes animloader01 {
    0% {
        transform: scale(0.1); /* nästan osynlig, inte helt noll */
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}