Как установить ключевые кадры 50%, используя jquery (или javascript)?

Question

Я делаю время (второй) бар.

При открытии страницы ширина бара должна быть (секунда / 60) * 100%.

Я хочу начать с 50% вместоначала.

Использование jquery или javascript.

Пожалуйста, расскажите мне о.

                    #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

Привет. Можете ли вы попробовать перезаписать существующий стиль, а также удалить его, если требуется, чтобы получить старое поведение

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