Eu gostaria de criar um spinner animado com CSS3. Deve se comportar assim:

Após o último estado, ele deve começar novamente como no primeiro estado.

Consegui criar círculos usando a técnica explicada aqui:pergunta stackoverflow

Agora, como podeAnimar o botão giratório entre os estados descritos? Não sei como animar a propriedade clip-rect. Eu também acho que ele se comportaria melhor com um clip-poly (um triângulo talvez), mas também não posso animar.