diff --git a/wiki/pages/attributions.html b/wiki/pages/attributions.html
index 845800cfa8fe7a6d3836547195e6219ce7255a58..a2f76c8ca2947b630f3044f31aafcf92a5dd3efe 100644
--- a/wiki/pages/attributions.html
+++ b/wiki/pages/attributions.html
@@ -42,8 +42,27 @@
height: 4px;
}
+ .progress-container {
+ position: fixed;
+ left: 20px;
+ bottom: 20px;
+ width: 100px;
+ height: 100px;
+ }
+
+ .progress-bar-circle {
+ transform: rotate(-90deg);
+ transform-origin: center;
+ }
+
+ .progress-circle {
+ stroke: #04AA6D;
+ stroke-linecap: round;
+ stroke-dasharray: 283;
+ stroke-dashoffset: 283;
+ }
</style>
-
+
</head>
<body>
@@ -64,6 +83,11 @@
</ul>
</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>
+</div>
<div class="row mt-4">
<div class="col-lg-12">
@@ -124,5 +148,14 @@
</div>
{% endblock %}
+<script>
+ window.onscroll = function() {
+ var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ var scrolled = (window.scrollY / height) * 100;
+ var offset = 283 - (283 * scrolled) / 100;
+ document.querySelector('.progress-circle').style.strokeDashoffset = offset;
+ };
+</script>
+
</body>
</html>
\ No newline at end of file