@keyframes spin { to{transform:rotate(.5turn);} } @keyframes bg { 50%{background: #655;} } .pie{width: 200px;height: 200px;background-color: yellowgreen;margin: 50px auto;border-radius: 50%; background-image: linear-gradient(to right,transparent 50%, #655 0); box-shadow: 25px 0 25px -25px black, -25px 0 25px -25px black; } .pie:before{ content: '';display: block;margin-left: 50%;height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin:left; animation: spin 3s linear infinite, bg 6s step-end infinite; }