.loading {
    width: 200px;
    height: 200px;
    position: relative;
    /* border: 1px solid red; */
}

.loading::before, .loading::after {
    content: '';
    width: 0;
    height: 0;
    /* border:1px solid red; */
    background-color: black;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    animation-name: circle;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.loading::after {
    animation-delay: 1s;
}

@keyframes circle {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}