$loadingRippleSize: .6rem;
.atom-loading-ripple {
    display: inline-block;
    width: $loadingRippleSize;
    height: $loadingRippleSize;
    border-radius: 100%;
    animation: ripple 1s 0s ease-in-out infinite;
}

@each $key, $value in $theme_colors {
    .atom-loading-ripple--#{$key} {
        background: $value;
    }
}


@keyframes ripple {
    0% {
        transform: scale(0);
    }

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