"Pizza Loader"
Bootstrap 4.1.1 Snippet by AllinJS

1
2
3
4
5
6
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<canvas id="pizza"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
body {
background: white;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
29
30
31
32
33
34
35
36
37
'use strict'
let toRadians = (deg) => deg * Math.PI / 180
let map = (val, a1, a2, b1, b2) => b1 + (val - a1) * (b2 - b1) / (a2 - a1)
class Pizza {
constructor(id) {
this.canvas = document.getElementById(id)
this.ctx = this.canvas.getContext('2d')
this.sliceCount = 6
this.sliceSize = 80
this.width = this.height = this.canvas.height = this.canvas.width = this.sliceSize * 2 + 50
this.center = this.height / 2 | 0
this.sliceDegree = 360 / this.sliceCount
this.sliceRadians = toRadians(this.sliceDegree)
this.progress = 0
this.cooldown = 10
}
update() {
let ctx = this.ctx
ctx.clearRect(0, 0, this.width, this.height)
if (--this.cooldown < 0) this.progress += this.sliceRadians*0.01 + this.progress * 0.07
ctx.save()
ctx.translate(this.center, this.center)
for (let i = this.sliceCount - 1; i > 0; i--) {
let rad
if (i === this.sliceCount - 1) {
let ii = this.sliceCount - 1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: