/* Dot opacity loader */

.dot-opacity-loader {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}

.dot-opacity-loader span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: $primary;
    margin: 35px 5px;
    opacity: 0;
}
  
.dot-opacity-loader span:nth-child(1){
    animation: opacitychange 1s ease-in-out infinite;
}

.dot-opacity-loader span:nth-child(2){
    animation: opacitychange 1s ease-in-out 0.33s infinite;
}

.dot-opacity-loader span:nth-child(3){
    animation: opacitychange 1s ease-in-out 0.66s infinite;
}
  
@keyframes opacitychange{
    0%, 100%{
        opacity: 0;
    }

    60%{
        opacity: 1;
    }
}