<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3评分统计柱形图进度条</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="reviews-container">
<h2>Reviews</h2>
<div class="review">
<span class="icon-container">5 <i class="fas 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">4 <i class="fas fa-star"></i></span>
<div class="progress">
<div class="progress-done" data-done="13"></div>
</div>
<span class="percent">13%</span>
</div>
<div class="review">
<span class="icon-container">3 <i class="fas 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="fas 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="fas fa-star"></i></span>
<div class="progress">
<div class="progress-done" data-done="7"></div>
</div>
<span class="percent">7%</span>
</div>
</div>
<script>
const progressDone = document.querySelectorAll('.progress-done');
progressDone.forEach(progress => {
progress.style.width = progress.getAttribute('data-done') + '%';
});
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');
floating_btn.addEventListener('click', () => {
social_panel_container.classList.toggle('visible')
});
close_btn.addEventListener('click', () => {
social_panel_container.classList.remove('visible')
});
</script>
</body>
</html>CSS3评分统计柱形图进度条
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
CSS3实现的一套动画表情
下一篇：
HTML5 背景图片毛玻璃模糊特效