Skip to content
Snippets Groups Projects
Commit fca19bd6 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file attributions.html

parent 46a8d101
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
wiki/pages/attributions.html
+ 34
− 14
View file @ fca19bd6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page with Circular Progress Bar</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.sidebar {
position: fixed;
left: 0;
......@@ -35,10 +49,10 @@
}
.progress-container {
position: fixed;
left: 20px;
right: 20px;
bottom: 20px;
width: 100px;
height: 100px;
width: 60px;
height: 60px;
}
.progress-bar-circle {
transform: rotate(-90deg);
......@@ -53,7 +67,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-size: 12px;
font-weight: bold;
color: hsl(17, 100%, 50%);
}
......@@ -80,8 +94,8 @@
</div>
<div class="progress-container">
<svg class="progress-bar-circle" width="100" height="100">
<circle class="progress-circle" cx="50" cy="50" r="45" stroke-width="5" fill="transparent"></circle>
<svg class="progress-bar-circle" width="60" height="60">
<circle class="progress-circle" cx="30" cy="30" r="25" stroke-width="5" fill="transparent"></circle>
</svg>
<div class="progress-text">0%</div>
</div>
......@@ -153,11 +167,7 @@
{% endblock %}
<script>
window.addEventListener('scroll', function() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
......@@ -165,10 +175,20 @@
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
const offset = circumference - (scrolled / 100) * circumference;
circle.style.strokeDashoffset = offset;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
var winScroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
}
document.querySelector('.progress-text').textContent = Math.round(scrolled) + '%';
window.addEventListener('scroll', handleScroll);
});
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment