.wap {
    display: none;
    position: absolute;
    width: 10em;
    height: 10em;
    top: 50%;
    left: 50%;
    margin: -5em 0 0 -5em;
}
.wrap-01 {
/* 		background-color: pink; */
    width: 10em;
    height: 10em;
    margin: 0;
    position: relative;
    border-radius: 50%;
}
.wrap-01 > div {
    width: 60%;
    height: 60%;
    position: absolute;
    box-sizing: border-box;
    
    left: 20%;
    top: 0%;
    
    margin: 0% 0 0 0%;
    -webkit-transform-origin: 50% 83%;		
}

.wrap-01 > div > span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    
    border: 0.6em solid;
    
    top: 50%;
    left: 50%;
    margin: -50% 0 0 -50%;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: outer1 1s linear infinite;
    
}
.wrap-01 > div:nth-child(1) {
    border-color: red;
    -webkit-transform: rotate(240deg);
}
.wrap-01 > div:nth-child(1) > span {
    border-color: red;
}
.wrap-01 > div:nth-child(2) {
    border-color: lime;
    -webkit-transform: rotate(0deg);
}
.wrap-01 > div:nth-child(2) > span {
    border-color: lime;
}
.wrap-01 > div:nth-child(3) {
    border-color: blue;
    -webkit-transform: rotate(120deg);
}
.wrap-01 > div:nth-child(3) > span {
    border-color: blue;
}

@keyframes outer1 {
    100% {
        
        -webkit-transform: rotate(360deg);
/* 			-webkit-filter: hue-rotate(360deg); */
    }
}

@keyframes inner1 {
    33.33% {
        -webkit-transform: scale(0.33);
        border-width: 3em;
        border-color: lightgray;
/* 			border-radius: 50%; */
    }
    66.66% {
        -webkit-transform: scale(0.33);
        border-width: 3em;
        border-color: cyan;
/* 			border-radius: 0%; */
    }
}
#e2 .wrap-01 {
    -webkit-animation: outer1 0.5s infinite;
}
#e2 .wrap-01 > div > span {
    -webkit-animation: inner1 1.5s infinite;
}