.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}
.loading-holder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin: 1em
}

.first-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    opacity: 0;
}

.second-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    animation-delay: .5s;
    opacity: 0;
}

.third-dot {
    animation: fade-in 1s infinite linear;
    animation-direction: alternate;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}