Last active
June 4, 2018 14:12
-
-
Save outofink/c3e59e2bc1b97c8d17d9a1c1e210f05a to your computer and use it in GitHub Desktop.
Sine wave loading screen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <style> | |
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| canvas { | |
| max-width: 95%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| </body> | |
| <script> | |
| 'use strict'; | |
| const canvas = document.getElementById('canvas'); | |
| const context = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = canvas.width / 4; | |
| let numBall = 24; | |
| let timeStep = 0; | |
| let radius = 15; | |
| let horizontalOffset = (canvas.width - (40 * (numBall - 1))) / 2; | |
| let verticalOffset = canvas.height / 4; | |
| let getY = (i, t) => verticalOffset + 70 * (1 + Math.sin((t * (i / 300 + .02)) % 2 * Math.PI)); | |
| let draw = () => { | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let i = 0; i < numBall; i++) { | |
| context.fillStyle = 'black'; | |
| context.beginPath(); | |
| context.arc(horizontalOffset + 40 * i, getY(i, timeStep), radius, 0, 2 * Math.PI, false); | |
| context.fill(); | |
| } | |
| timeStep++; | |
| window.requestAnimationFrame(draw); | |
| } | |
| window.requestAnimationFrame(draw); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment