03
Май
2020

javascript, css, не выполняется функция

Пытаюсь сделать progressive bar (индикатор выполнения), но функция отказывается работать. Подскажите пожалуйста, в чем проблема как ее запустить? Спасибо

function run() {
  // body...
  const progress = document.querySelector('.progress-done');
  progress.style.width = progress.getAttribute('data-done') + '%';
  progress.style.opacity = 1;
}
html,
:root {
  --background: rgba(0, 214, 170, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

.container {
  max-width: 1100px;
  margin: auto;
}

#skills {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75vh;
  margin: 0;
}

#skills .progress {
  height: 30px;
  width: 300px;
  background-color: #d8d8d8;
  border-radius: 20px;
}

#skills .progress-done {
  height: 100%;
  width: 200px;
  background: linear-gradient(to left, #F2709C, #FF9472);
  box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
  opacity: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<section>
  <div id="skills">
    <div class="container">
      <h1>Custom Progress Bar</h1>
      <div class="progress">
        <div class="progress-done" data-done="70">
          70%
        </div>
      </div>
    </div>
  </div>
</section>

Источник: https://ru.stackoverflow.com/questions/1119446/javascript-css-%D0%BD%D0%B5-%D0%B2%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D1%8F%D0%B5%D1%82%D1%81%D1%8F-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F

Тебе может это понравится...

Добавить комментарий