Прогресс бар по выполнению плана

199

17 декабря 2018, 21:00

Добого времени суток. Есть задача. К примеру есть сайт в который вносится информация о работе менеджера, например если сделал продажу то сумма и товар который продал. Далее отображаем на сайте в процентах на сколько он выполнил работу. Хотелось бы что бы отображалось в прогресс баре. Какие есть библиотеки прогресс баров которые можно было бы связать с ларавелом и что бы прогресс бар наполнялся исходя из данных полученных из базы? Подскажите пожалуйста.

Answer 1

В HTML есть тег <progress min="0" max="100" value="50"></progress>

Демо

const progress = document.getElementById('progress'); 
const add = document.getElementById('add'); 
const subtract = document.getElementById('subtract'); 
 
add.addEventListener('click', function() { 
  progress.value += 10; 
}); 
 
subtract.addEventListener('click', function() { 
  progress.value -= 10; 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> 
 
<progress class="progress is-success" id="progress" min="0" max="100" value="50"> 
</progress> 
 
<div class="container"> 
  <button id="subtract" type="button" class="button is-danger"> 
    - 10 
  </button> 
  <button id="add" type="button" class="button is-success"> 
    + 10 
  </button> 
</div>