.loader{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}

.loader span{
    background-color: #8e44ad;
    position: absolute;
    left: 25px;
    top: 25px;
    bottom: 25px;
    right: 25px;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    animation: animate 2s infinite ease-out;
}

.loader span:nth-child(2){
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    animation: animate2 2s infinite ease-out;
}

@keyframes animate{
   0%, 100%, 75%{
        background-color: #8e44ad;
        transform: translateX(0);
    }
    25%{
        background-color: #2980b9;
        transform: translateX(24px);
    }
    50%{
        background-color: #e74c3c;
        transform: translateY(-25px);
    }
}

@keyframes animate2{
  0%, 100%{
        background-color: #8e44ad;
        transform: translateX(0);
    }
    25%{
        background-color: #2980b9;
        transform: translateX(-24px);
    }
    50%{
        background-color: #e74c3c;
        transform: translateY(25px);
    }
}