Как сделать анимированную дугу, используя css3

Question

Я сделал эту дугу, но я не могу ее анимировать. Не могли бы вы объяснить, о том, как идти об этом

это моя скрипка http://jsfiddle.net/cancerian73/23Wjj/

.circle { 
width: 60px; 
height: 60px; 
border-style: solid; 
border-radius: 35px; 
border-width: 5px; 
border-color: #999 transparent transparent transparent; 
} 
.arc-top { 
border-color: #999 transparent transparent transparent; 
} 

Просто добавил скриншот, где я хочу, чтобы заполнить серый от 0 до 100 или от 0 к чему-либо, как 60. Это то, как я смотрю на

Answer 1

как прокомментировал смотрите мой ответ here, который похож на то, что вы ищете ..

Demo (Модифицированная версия скрипки я ответил на вопрос, который я связан)

---

Где вы даже анимировать дугу? Здесь я использую CSS3 @keyframe с собственностью transform, и я вращаю элемент на 3 части, т.е. на 0%, 50% и 100%. Rest is self explainatory, animation-duration будет управлять общей продолжительностью вашей анимации, animation-iteration-count настроит анимацию на infinite, а последняя здесь animation-timing-function важна для анимации, чтобы получить постоянный поток.

Demo

.circle { 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: animation; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

    -moz-animation-duration: 5s; 
    -moz-animation-name: animation; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 

    animation-duration: 5s; 
    animation-name: animation; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    width: 60px; 
    height: 60px; 
    border-style: solid; 
    border-radius: 35px; 
    border-width: 5px; 
    border-color: #999 transparent transparent transparent; 
} 
.arc-top { border-color: #999 transparent transparent transparent;} 

@-moz-keyframes animation { 
    0% {-moz-transform: rotate(0);} 
    50% {-moz-transform: rotate(180deg);} 
    100% {-moz-transform: rotate(360deg);} 
} 

@-webkit-keyframes animation { 
    0% {-webkit-transform: rotate(0);} 
    50% {-webkit-transform: rotate(180deg);} 
    100% {-webkit-transform: rotate(360deg);} 
} 

@keyframes animation { 
    0% {transform: rotate(0);} 
    50% {transform: rotate(180deg);} 
    100% {transform: rotate(360deg);} 
} 

Answer 2

Пожалуйста, попробуйте этот кусок кода, вам может потребоваться некоторые изменения, хотя,

рабочий пример http://codepen.io/anon/pen/Jtepx

Это модифицируется из CSS 3 фокусы http://css-tricks.com/css-pie-timer/