joist/loading.html at main · phetsims/joist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<!--Temporary test for loading bar.-->
<head>
  <style>
    body {
      background-color: black;
    }
  </style>

</head>
<body>

<div id="progressBar"
     style="position:absolute;top:50%;left:50%;margin-left:-147px;margin-top:50px;width:273px;height:10px">
  <svg>
    <rect id="progressBarBackground" x="10" y="10" width="273" height="10" rx="3" ry="3"
          style="stroke: white;stroke-width:1"></rect>
    <rect id="progressBarForeground" x="10" y="10" width="0" height="10" rx="3" ry="3" style="fill:#6acef5;"></rect>
  </svg>
</div>
<script>
  const background = document.getElementById( 'progressBarBackground' );
  setInterval( () => {
    background.style[ 'stroke-width' ] = ( Math.sin( Date.now() / 1000 * 4 ) * 1.5 + 2 ).toFixed( 2 );
  }, 16 );
</script>
</body>
</html>