I want to create a circular progressbar in Html, Javascript and css.

This here is my code:

<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)
    }
}

I have found following answer to my question on stackoverflow

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

but I have 2 keyframes and 2 webkit transform elements, so how can I select the 2nd one?

the 1 that I want to access is the

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

how can I do this in javascript so I can make my progress bar dynamically?

I tried to use this answer here: How to set the style -webkit-transform dynamically using JavaScript?

but as I said I have 2 keyframe elemnts and 2 webkit transform elements and I cant acces them with element.style.webkitTransform = "rotate(-2deg)";