Как изменить ширину стиля элемента Div при загрузке страницы с помощью JavaScript или JQuery?

Question

В настоящее время у меня есть следующий элемент div:

 <div id="ProgressBar">
     <div id="ProgressBarPercentage" style="width: 50%" runat="server"></div>
 </div>

Я бы хотел, чтобы ширина изменялась от 0% до 50% постепенно и плавно.

Что я пробовал до сих пор (это не работает):

$(function () {
    $("#ProgressBarPercentage").each(function () {
        console.log("1");
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 1200);
     });
});

Я также пытаюсь поиграться с:

function update() {
    var element = document.getElementById("ProgressBarPercentage");
    var width = 1;
    var identity = setInterval(scene, 10);
    function scene() {
        if (width >= 100) {
            clearInterval(identity);
        } else {
            width++;
            element.style.width = width + '%';
        }
    }
}

Выше работает на Windows.load функция, но она не делает то, что я хочу. Я новичок в JS, любая помощь?

ОБНОВЛЕНИЕ:

Я также хотел бы сделать это плавно и постепенно делать, если бы я изменил ширину в функции js, например так:

document.getElementById("ProgressBarPercentage").style.width = 67%;

Answer 1

Подход 1 (анимация CSS):

Вы можете добиться этого эффекта, используя только анимацию CSS.

Эта анимация анимирует ширину #ProgressBarPercentage от 0 до 100%.

Рабочий пример:

#ProgressBar {
  margin-top: 30px;
  height: 30px;
  padding: 15px;
  background-color: rgb(0, 0, 0);
}

#ProgressBarPercentage {
 height: 30px;
 background-color: rgb(255, 0, 0);
 animation: loadProgressBar 4s linear;
}

@keyframes loadProgressBar {

   0% {width: 0;}
 100% {width: 100%;}
}

<div id="ProgressBar">
<div id="ProgressBarPercentage"></div>
</div>

---

Подход 2 (переход CSS):

Немного сложнее обновить значения CSS @keyframes через javascript, поэтому здесьявляется альтернативой вышеприведенной версии, на этот раз с использованием CSS transition вместо CSS animation.

Функция будет принимать параметр в диапазоне от 0 до 100. Когда функция запускается, #ProgressBarPercentage будет переходитьот текущего значения к новому значению.

Рабочий пример:

const progressBarPercentage = document.getElementById('ProgressBarPercentage');

const transitionProgressBar = (progress) => {

  setTimeout(() => {
    progressBarPercentage.style.width = progress + '%';
  }, 200);
}

// INITIAL TRANSITION (on PAGE LOAD)
transitionProgressBar(32);

// SUBSEQUENT TRANSITIONS
setTimeout(() => {transitionProgressBar(59)}, 4000);
setTimeout(() => {transitionProgressBar(78)}, 8000);
setTimeout(() => {transitionProgressBar(96)}, 12000);

#ProgressBar {
  margin-top: 30px;
  height: 30px;
  padding: 15px;
  background-color: rgb(0, 0, 0);
}

#ProgressBarPercentage {
 width: 0;
 height: 30px;
 background-color: rgb(255, 0, 0);
 transition: width 2s linear;
}

<div id="ProgressBar">
<div id="ProgressBarPercentage"></div>
</div>

Answer 2

Если вы действительно хотите что-то делать именно с фаговой нагрузкой, вы используете

div {
  width: 0%;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {width: 0%;}
  to {width: 50%;}
}


<script>
 document.onreadystatechange = function () {
  if (document.readyState === "complete") { 
  // incase you want it on "ready state of page you can use interactive"
  const myDiv = document.getElementById("ProgressBarPercentage")
    myDiv.classList.add("example")
 }
}


</script>

Answer 3

Давайте попробуем что-то вроде этого

div {
  width: 0%;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {width: 0%;}
  to {width: 50%;}
}


<script>

  window. addEventListener('load', () => {

    const myDiv = document.getElementById("ProgressBarPercentage")
    myDiv.classList.add("example")

  })

</script>