ClockworkAprilFools2017/templates/wait.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>