Polygonal flame Loader | Html Css And JavaScript with Free Source Code

The Polygon Loader is a visually appealing loading animation created using HTML, CSS, and JavaScript. It features a polygon-shaped design that dynamically transforms and animates, giving users an engaging loading experience. This loader is perfect for websites and applications that require a loading indicator before content is displayed.

The source code for the Polygon Loader is freely available on both the Codeatnow.com website and the Telegram channel. Codeatnow.com is a platform dedicated to providing free and open-source code snippets and projects to developers. With this loader's source code, developers can easily integrate it into their own projects, customize its appearance, and enhance the loading experience for their users.

By visiting Codeatnow.com or joining the Telegram channel, developers can access a wide range of other code resources and stay up to date with the latest developments in web development, making it a valuable hub for the coding community.

Download Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Polygonal flame set</title>
  <link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="c" width="800" height="800"></canvas>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

CSS

body {
  display: grid;
  place-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  background: #11131e;
}

canvas {
  max-width: 90vmin;
  max-height: 90vmin;
  border-radius: 0.5em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  background-color: #11131e;
}

const _C = document.getElementById('c') /* canvas element */,
C = _C.getContext('2d') /* 2D canvas context */,
D = _C.width /* edge length of canvas square */,
N = 2 /* number of grid rows/ columns */,
L = D / N /* edge length of grid cell */,
RC = .25 * D / N /* circumradius of polygon */,
THEME = ['#e4a22f', '#cc1e4d', '#9a2388', '#6d62a7'],
NT = THEME.length,
POLY = [] /* array of polygons */,
FN = ['line', 'move'];

let step = 1 / 360,prg = 0;

class Poly {
  constructor(i, j) {
    /* position of current random polygon */
    this.x = (j + .5) * L; /* along x axis */
    this.y = (i + .5) * L; /* along y axis */

    /* shape of current random polygon */
    this.n = 3 + N * i + j; /* number of polygon vertices edges */
    this.β = 2 * Math.PI / this.n; /* base angle corresponding to an edge */
    this.α = .5 * (Math.PI - (1 - this.n % 2) * this.β); /* angular offset of 1st angle */
    this.ri = RC * Math.cos(.5 * this.β);
    this.vx = [];

    for (let k = 0; k < this.n; k++) {
      let γ = this.α + k * this.β;

      this.vx.push([RC * Math.cos(γ), RC * Math.sin(γ)]);
    }

    /* look and feel of current polygon */
    this.b = (this.n - 3) % NT;
  }}

function draw() {
  C.fillStyle = 'hsla(0, 0%, 13%, .08)';
  C.fillRect(0, 0, D, D);

  POLY.forEach(p => {
    prg += step;
    if (prg > 1) prg = 0;

    C.fillStyle = THEME[p.b];
    C.translate(p.x, p.y);
    C.rotate(prg * 2 * Math.PI);
    C.translate(0, .5 * p.ri);
    C.rotate(-4 * prg * Math.PI);
    C.beginPath();
    p.vx.forEach((coord, k) => C[`${FN[0 ** k]}To`](...coord));
    C.fill();
    C.resetTransform();
  });

  requestAnimationFrame(draw);
};

function init() {
  for (let i = 0; i < N; i++)
  for (let j = 0; j < N; j++)
  POLY.push(new Poly(i, j));

  draw();
};

init();