Quiero crear una barra de progreso circular en Html, Javascript y css.

Este es mi código:

 <div class="progress blue"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">70%</div> </div>

 @keyframes loading-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(50deg); transform: rotate(50deg) } }

Encontré la siguiente respuesta a mi pregunta en stackoverflow

 element.style.webkitTransform = "rotate(-2deg)";

pero tengo 2 fotogramas clave y 2 elementos de transformación webkit, entonces, ¿cómo puedo seleccionar el segundo?

el 1 al que quiero acceder es el

 100% { -webkit-transform: rotate(50deg); transform: rotate(50deg) }

¿Cómo puedo hacer esto en javascript para poder hacer mi barra de progreso dinámicamente?

Traté de usar esta respuesta aquí: ¿Cómo configurar el estilo -webkit-transformar dinámicamente usando JavaScript?

pero como dije, tengo 2 elementos de fotogramas clave y 2 elementos de transformación de webkit y no puedo acceder a ellos con element.style.webkitTransform = "rotate (-2deg)";