loader.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>

    <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/icon/favicon-194x194.png" sizes="194x194">
    <link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/icon/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/icon/android-chrome-manifest.json">
    <meta name="msapplication-TileColor" content="#2b5797">
    <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <script src="./js/d3/d3.js" charset="utf-8"></script>

    <title>facet.js</title>
    <style>
      html, body {
        margin: 0;
        background-color: #20222D;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
      }

      a {
        color: inherit;
        text-decoration: none;
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
      }

      .cont {
        position: absolute;
        top: 40%;
        left: 50%;
        width: 320px;
        margin-left: -160px;
        height: 340px;
        margin-top: -170px;
      }

      .soon {

      }
    </style>
  </head>
  <body>
<a href="https://twitter.com/facetjs">

<div class="cont">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="320px" height="320px" viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
<g>
  <path fill="#D63EC0" d="M37.347,127.984c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347l53.557-64.929
    c2.585-3.134,7.217-3.584,10.347-0.995c3.135,2.584,3.58,7.217,0.996,10.347L43.023,125.31
    C41.568,127.076,39.467,127.984,37.347,127.984"/>
</g>
<g>
  <path fill="#AC41E5" d="M117.739,87.559c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347l20.21-24.503
    c2.58-3.135,7.212-3.585,10.347-0.995c3.135,2.584,3.58,7.217,0.995,10.346l-20.21,24.504
    C121.96,86.65,119.859,87.559,117.739,87.559"/>
  <path fill="#AC41E5" d="M60.692,156.719c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347l36.836-44.656
    c2.584-3.139,7.212-3.585,10.347-0.995c3.134,2.584,3.58,7.217,0.995,10.346l-36.836,44.657
    C64.913,155.81,62.812,156.719,60.692,156.719"/>
</g>
<g>
  <path fill="#6C63EA" d="M84.038,185.452c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347l100.96-122.396
    c2.579-3.135,7.212-3.585,10.348-0.996c3.134,2.584,3.579,7.217,0.995,10.347L89.713,182.777
    C88.258,184.543,86.157,185.452,84.038,185.452"/>
</g>
<g>
  <path fill="#308EE2" d="M144.573,169.1c-1.646,0-3.302-0.551-4.671-1.681c-3.135-2.584-3.58-7.217-0.995-10.347l87.47-106.043
    c2.579-3.135,7.212-3.585,10.347-0.996c3.135,2.585,3.579,7.217,0.995,10.347l-87.47,106.043
    C148.794,168.19,146.693,169.1,144.573,169.1"/>
  <path fill="#308EE2" d="M107.383,214.182c-1.646,0-3.302-0.55-4.676-1.68c-3.13-2.584-3.575-7.218-0.99-10.352l17.587-21.315
    c2.585-3.136,7.208-3.58,10.352-0.991c3.13,2.584,3.575,7.217,0.991,10.352l-17.588,21.316
    C111.604,213.272,109.502,214.182,107.383,214.182"/>
</g>
<g>
  <path fill="#16AFBF" d="M130.728,242.915c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347L254.574,73.881
    c2.584-3.14,7.218-3.58,10.348-0.996c3.134,2.585,3.579,7.217,0.995,10.347L136.404,240.24
    C134.949,242.007,132.848,242.915,130.728,242.915"/>
</g>
<g>
  <path fill="#1EAD6C" d="M154.073,271.649c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.218-0.995-10.348l73.811-89.479
    c2.58-3.135,7.212-3.584,10.347-0.995c3.136,2.584,3.58,7.217,0.995,10.347l-73.811,89.48
    C158.294,270.74,156.193,271.649,154.073,271.649"/>
  <path fill="#1EAD6C" d="M249.334,156.168c-1.646,0-3.302-0.55-4.671-1.68c-3.135-2.584-3.58-7.217-0.995-10.347l33.309-40.387
    c2.584-3.14,7.213-3.585,10.348-0.995c3.134,2.584,3.579,7.216,0.995,10.346l-33.31,40.388
    C253.555,155.259,251.454,156.168,249.334,156.168"/>
</g>
</svg>
<div class="soon">soon</div>
</div>

</a>
  <script type="text/javascript">
  var colors = [
    '#D63EC0',
    '#AC41E5',
    '#6C63EA',
    '#308EE2',
    '#16AFBF',
    '#1EAD6C'
  ];

  var renderNumber = 0;
  function render() {
    var svg = d3.select('svg')
    svg.selectAll('path').attr('fill', null)
    svg.selectAll('g').data(colors).style('fill', function(d) { return d; })
    setTimeout(render, renderNumber % 6 ? 100 : 2000);
    renderNumber++;
    colors.unshift(colors.pop());
  }
  render();

  </script>

  </body>
</html>