.ping {
    /*background: #fff;*/
    /*border-radius: 50%;*/
    /*border: 50px solid #222;*/
    /*width: 20px;*/
    /*height: 20px;*/
    animation: load 1.5s ease-out 5;
    /*position: absolute;*/
}

@keyframes load {
    0% {
        /*background: #fff;*/
        /*border: 0px solid #fff;*/
        box-shadow: 0 0 0 0;
    }
    100% {
        /*background: #fff;*/
        /*border: 100px solid #222;*/
        box-shadow: rgba(0, 0, 0, 0) 0 0 0 5em;
    }
}

.ping-red {
    animation: load-red 1.5s ease-out infinite;
}
@keyframes load-red {
    0%   {box-shadow: red 0 0 0 0;}
    100% {box-shadow: rgba(0, 0, 0, 0) 0 0 0 5em;}
}

.ping-green {
    animation: load-green 1.5s ease-out infinite;
}
@keyframes load-green {
    0%   {box-shadow: green 0 0 0 0;}
    100% {box-shadow: rgba(0, 0, 0, 0) 0 0 0 5em;}
}