A loader for your site that draws Lissajous curves
- Authenticate to GitHub Packages
- Create file
.npmrcin your repository and add the following:@okcid:registry=https://npm.pkg.github.com npm i @okcid/lissajous-loader
HTML:
<html>
<head>
</head>
<body>
<canvas id="loader" width="50" height="50" />
</body>
</html>Javascript:
import LissajousLoader from 'lissajous-loader';
const canvas = document.getElementById('loader');
const loader = new LissajousLoader(canvas, {
xFrequency: 3,
yFrequency: 2,
delta: Math.PI / 2,
});
loader.start();
callApi()
.then(() => {
loader.stop();
});const loader = new LissajousLoader(canvas, props);-
canvas– instance ofHTMLCanvasElementto draw the loader on;
Note: canvas is recommended to be square (heightproperty should equal thewidthproperty) -
props– an object with loader propsNote: A and B are both equal to 1 for simplicity
Note: ❗ means required prop, ❓ – optional propName Type Default Description ❗ xFrequencynumber ❗ yFrequencynumber ❗ deltanumber , it is better to be a fraction of Pi (e.g. Pi/2, Pi/6, etc)
❓ stepnumber 0.05 A step for t param – the less it is, the more accurate the curve is ❓ paddingnumber 16 Padding inside canvas element ❓ colourstring 000000 HEX code of lines colour ❓ lineWidthnumber 1 The width of the curve's line ❓ pausenumber 1000 The time to wait before erasing the curve
loader.start();
This method starts the drawing cycle of a loader
loader.stop();
Stops the drawing cycle of a loader and clears the canvas
loader.clear();
An utility method to clear the canvas