mirror of
https://github.com/Adam-Ant/ClockworkAprilFools2017
synced 2024-11-05 11:36:22 +00:00
62 lines
1.3 KiB
HTML
62 lines
1.3 KiB
HTML
|
|
<meta http-equiv="refresh" content="29; url=/activate">
|
|
<script src="/static/progressbar.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
|
|
|
|
<style>
|
|
body {
|
|
background-image: url("/static/bg.jpg");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
#container{
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
top: 55%;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="container" class="container"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
// progressbar.js@1.0.0 version is used
|
|
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
|
|
|
|
var bar = new ProgressBar.SemiCircle(container, {
|
|
strokeWidth: 30,
|
|
color: '#FBDB0C',
|
|
trailColor: '#000000',
|
|
trailWidth: 2,
|
|
easing: 'easeInOut',
|
|
duration: 30000,
|
|
svgStyle: null,
|
|
text: {
|
|
value: '',
|
|
alignToBottom: false
|
|
},
|
|
from: {color: '#ED6A5A'},
|
|
to: {color: '#76FF03'},
|
|
// Set default step function for all animate calls
|
|
step: (state, bar) => {
|
|
bar.path.setAttribute('stroke', state.color);
|
|
var value = Math.round(bar.value() * 100);
|
|
if (value === 0) {
|
|
bar.setText('');
|
|
} else {
|
|
bar.setText(value);
|
|
}
|
|
|
|
bar.text.style.color = state.color;
|
|
}
|
|
});
|
|
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
|
|
bar.text.style.fontSize = '2rem';
|
|
|
|
bar.animate(1.0); // Number from 0.0 to 1.0
|
|
|
|
</script>
|