"Pizza Loader"
Bootstrap 4.1.1 Snippet by AllinJS

<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>
body { background: white; height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
'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 rad = this.sliceRadians * i + this.progress ctx.strokeStyle = '#FBC02D' cheese(ctx, rad, .9, ii, this.sliceSize, this.sliceDegree) cheese(ctx, rad, .6, ii, this.sliceSize, this.sliceDegree) cheese(ctx, rad, .5, ii, this.sliceSize, this.sliceDegree) cheese(ctx, rad, .3, ii, this.sliceSize, this.sliceDegree) } else rad = this.sliceRadians * i // border ctx.beginPath() ctx.lineCap = 'butt' ctx.lineWidth = 11 ctx.arc(0, 0, this.sliceSize, rad, rad + this.sliceRadians) ctx.strokeStyle = '#F57F17' ctx.stroke() // slice let startX = this.sliceSize * Math.cos(rad) let startY = this.sliceSize * Math.sin(rad) let endX = this.sliceSize * Math.cos(rad + this.sliceRadians) let endY = this.sliceSize * Math.sin(rad + this.sliceRadians) let varriation = [0.9,0.7,1.1,1.2] ctx.fillStyle = '#FBC02D' ctx.beginPath() ctx.moveTo(0, 0) ctx.lineTo(startX, startY) ctx.arc(0, 0, this.sliceSize, rad, rad + this.sliceRadians) ctx.lineTo(0, 0) ctx.closePath() ctx.fill() ctx.lineWidth = .3 ctx.stroke() // meat let x = this.sliceSize * .65 * Math.cos(rad + this.sliceRadians / 2) let y = this.sliceSize * .65 * Math.sin(rad + this.sliceRadians / 2) ctx.beginPath() ctx.arc(x, y, this.sliceDegree / 6, 0, 2 * Math.PI) ctx.fillStyle = '#D84315' ctx.fill() } ctx.restore() if (this.progress > this.sliceRadians) { ctx.translate(this.center, this.center) ctx.rotate(-this.sliceDegree * Math.PI / 180) ctx.translate(-this.center, -this.center) this.progress = 0 this.cooldown = 20 } } } function cheese(ctx, rad, multi, ii, sliceSize, sliceDegree) { let x1 = sliceSize * multi * Math.cos(toRadians(ii * sliceDegree) - .2) let y1 = sliceSize * multi * Math.sin(toRadians(ii * sliceDegree) - .2) let x2 = sliceSize * multi * Math.cos(rad + .2) let y2 = sliceSize * multi * Math.sin(rad + .2) let csx = sliceSize * Math.cos(rad) let csy = sliceSize * Math.sin(rad) var d = Math.sqrt((x1 - csx) * (x1 - csx) + (y1 - csy) * (y1 - csy)) ctx.beginPath() ctx.lineCap = 'round' let percentage = map(d, 15, 70, 1.2, 0.2) let tx = x1 + (x2 - x1) * percentage let ty = y1 + (y2 - y1) * percentage ctx.moveTo(x1, y1) ctx.lineTo(tx, ty) tx = x2 + (x1 - x2) * percentage ty = y2 + (y1 - y2) * percentage ctx.moveTo(x2, y2) ctx.lineTo(tx, ty) ctx.lineWidth = map(d, 0, 100, 20, 2) ctx.stroke() } let pizza = new Pizza('pizza') ;(function update() { requestAnimationFrame(update) pizza.update() }())

Related: See More


Questions / Comments: