CSS Conversion animations

#loda {
width:200px;
height:200px;
border-radius:50%;
border:15px solid #ffff00;;
Border-left-color: #32cd32;
Border-top-color: #32cd32;
Animation:demo 10s linear 0s infinite;

}

@keyframes Demo {
from {
Transform:rotate (0DEG);
}
to {
Transform:rotate (360DEG);
}
}

#lodaing {
Text-align:center;
Color: #00bfff;
font-size:25px;
margin: -125px 70px;
Position:absolute;
}

<div id= "Lod" >
<div id= "Loda" ></div>
<p id= "Lodaing" >Lodaing</p>
</div>

Effect:

Make NetEase cloud music symbol

<div class= "Wangyi" >
<div class= "Wangyi1" ></div>
<div class= "Wangyi2" ></div>
<div class= "Wangyi3" ></div>
<div class= "Wangyi4" ></div>
<div class= "Wangyi5" ></div>
<div class= "Wangyi6" ></div>
</div>

/* NetEase Cloud Music symbol */
. Wangyi {
margin-top:100px;
margin-left:85px;
}

. wangyi1 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
Animation:wangyi 1s linear 0.2s infinite;
}

. wangyi2 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
Animation:wangyi 1s linear 0.4s infinite;
}

. wangyi3 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
Animation:wangyi 1s linear 0.6s infinite;
}

. wangyi4 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
Animation:wangyi 1s linear 0.8s infinite;
}

. wangyi5 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
animation:wangyi 1s linear 1s infinite;
}
. wangyi6 {
width:6px;
height:40px;
Background: #ffc0cb;
Display:inline-block;
Animation:wangyi 1.2s linear 1s infinite;
}

@keyframes Wangyi {
from {
Transform:scale (0.4);
}

to {
Transform:scale (0.6);
}
}
/*end NetEase Cloud * *

Effect:

CSS Conversion animations