如何使用jQuery（或JavaScript）将关键帧设置为50％？

Question

I'm making time(second) bar.

When opening page, bar's width should be (second/60)*100%.

I want to start from 50% instead of the beginning.

Using jquery or javascript.

Please tell me about.

                    #loader {
                    width: 50%;
                    height: 5px;
                    background-color: #fff;
                    animation-name: loadingBar;
                    animation-duration: 60s;
                    animation-timing-function: steps(60, end);
                    animation-direction: normal;
                    animation-play-state: running;
                    animation-iteration-count: infinite;

                    @keyframes loadingBar {
                        0% {
                            width: 0%;                            
                        }

                        100% {
                            width: 100%;
                        }
                    }

Answer 1

Hi Could you try this overwrite the style existing.And also remove it if required to get old behavior

  function setStyle() {
      let st = document.createElement("style");
      st.id="RemoveMeInFuture";
        const stext=`@keyframes loadingBar {
                        50% {
                            width: 0%;                            
                        }

                        100% {
                            width: 100%;
                        }
                    }

                    .foo{background:red}`;
      document.querySelector("head").appendChild(st);
      if (st.styleSheet){
  // This is required for IE8 and below.
  st.styleSheet.cssText = stext;
} else {
  st.appendChild(document.createTextNode(stext));
}
    }