Звёздный рейтинг: CSS + JavaScript
Небольшой скрипт для динамического изменения шкалы состояния результатов.
Можно применить как в качестве вывода звёздного рейтинга для статьи (товара и тд.), так и, например, для вывода результатов голосования на сайте. Значения изменяются в коде HTML.
HTML
<div class="reviews-container"> <div class="review"> <span class="icon-container">14 <i class="fa fa-star"></i></span> <div class="progress"> <div class="progress-done" data-done="68"></div> </div> <span class="percent">68%</span> </div> <div class="review"> <span class="icon-container">5 <i class="fa fa-star"></i></span> <div class="progress"> <div class="progress-done" data-done="13"></div> </div> <span class="percent">18%</span> </div> <div class="review"> <span class="icon-container">3 <i class="fa fa-star"></i></span> <div class="progress"> <div class="progress-done" data-done="9"></div> </div> <span class="percent">9%</span> </div> <div class="review"> <span class="icon-container">2 <i class="fa fa-star"></i></span> <div class="progress"> <div class="progress-done" data-done="3"></div> </div> <span class="percent">3%</span> </div> <div class="review"> <span class="icon-container">1 <i class="fa fa-star"></i></span> <div class="progress"> <div class="progress-done" data-done="7"></div> </div> <span class="percent">7%</span> </div> </div>
CSS
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background: linear-gradient(to right, #9796f0, #fbc7d4); color: #333; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Muli'; height: 100vh; margin: 0; } .reviews-container { background-color: #fff; border-radius: 5px; box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.3); padding: 20px; } .review { border: 1px solid transparent; border-radius: 5px; color: #777; display: flex; font-size: 12px; align-items: center; padding: 10px; margin: 5px 0; } .review:hover { border: 1px solid #ddd; box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.7); } .progress { background-color: rgba(100, 100, 100, 0.2); border-radius: 5px; position: relative; margin: 0 10px; height: 10px; width: 200px; } .progress-done { background: linear-gradient(to left, rgb(242, 112, 156), rgb(255, 148, 114)); box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156); border-radius: 5px; height: 10px; width: 0; transition: width 1s ease 0.3s; } .percent { color: #333; }
JavaScript
<script> const progressDone = document.querySelectorAll('.progress-done'); progressDone.forEach(progress => { progress.style.width = progress.getAttribute('data-done') + '%'; }); </script>