Canvas Indicator - Alternative for AjaxLoad.gif
Many probably use process indicators , for example, when transmitting / receiving any data via AJAX.
Once I was puzzled that when I clicked on the button that sends the form data to the server, this same indicator will appear inside it. Initially, the background was monophonic, but at any moment designers could replace it with another one, or even make a gradient.
Making a special GIF for every situation is pretty stupid. Therefore, the right solution is to use Canvas.
')
In the very first minutes, I came across this JavaScript module , with the help of which you can at least be generated with similar indicators:
But this did not solve the problem, not from the technical side of course, but from the design side. The person dealing with these issues insisted that not circles, but sticks, run in a circle like this:
Initially, I stumbled upon this library , but it implemented many functions that I did not even plan to use. The search had to continue.
In the end, I came across one record that almost solved my problem.
Removing too much, adding the necessary, I will be happy to share the decision with you.
An example of use. In the right place, put the canvas tag:
And create an instance of the CanvasIndicator class:
As you can see, the CanvasIndicator constructor takes two parameters: the first is necessarily the canvas, where the action will take place. The second parameter is optional - this is an object whose properties are the configuration of the indicator.
Read more about the properties:
bars - the number of blocks
innerRadius - inner radius
size is an array, where the first element is the width of the block, and the second is its height
rgb - indicator color, specified by an array of three elements, where Red, Green, Blue - respectively
fps - the number of frames per second, the larger the value, the faster the indicator is spinning
Well, directly the code of the library CanvasIndicator.js
See an example here .
Download the library here
Once I was puzzled that when I clicked on the button that sends the form data to the server, this same indicator will appear inside it. Initially, the background was monophonic, but at any moment designers could replace it with another one, or even make a gradient.
Making a special GIF for every situation is pretty stupid. Therefore, the right solution is to use Canvas.
')
In the very first minutes, I came across this JavaScript module , with the help of which you can at least be generated with similar indicators:
But this did not solve the problem, not from the technical side of course, but from the design side. The person dealing with these issues insisted that not circles, but sticks, run in a circle like this:
Initially, I stumbled upon this library , but it implemented many functions that I did not even plan to use. The search had to continue.
In the end, I came across one record that almost solved my problem.
Removing too much, adding the necessary, I will be happy to share the decision with you.
An example of use. In the right place, put the canvas tag:
<canvas id="loader"></canvas> And create an instance of the CanvasIndicator class:
new CanvasIndicator(document.getElementById("loader"),{ bars:11, innerRadius:4, size:[2,5], rgb:[255,255,255], fps:10 }); As you can see, the CanvasIndicator constructor takes two parameters: the first is necessarily the canvas, where the action will take place. The second parameter is optional - this is an object whose properties are the configuration of the indicator.
Read more about the properties:
bars - the number of blocks
innerRadius - inner radius
size is an array, where the first element is the width of the block, and the second is its height
rgb - indicator color, specified by an array of three elements, where Red, Green, Blue - respectively
fps - the number of frames per second, the larger the value, the faster the indicator is spinning
Well, directly the code of the library CanvasIndicator.js
function CanvasIndicator(el, opt) { this.ctx = el.getContext("2d"); this.currentOffset = 0; var defaults = { bars: 11, innerRadius: 4, size: [2, 5], rgb: [255, 255, 255], fps: 10 } if (typeof(opt) == 'object') { defaults.bars = opt.bars ? opt.bars : defaults.bars; defaults.innerRadius = opt.innerRadius ? opt.innerRadius : defaults.innerRadius; defaults.size = opt.size ? opt.size : defaults.size; defaults.rgb = opt.rgb ? opt.rgb : defaults.rgb; defaults.fps = opt.fps ? opt.fps : defaults.fps; } this.opt = defaults; this.w = this.opt.size[1] + this.opt.innerRadius; el.setAttribute("width", this.w * 2); el.setAttribute("height", this.w * 2); (function nextAnimation(obj) { obj.currentOffset = (obj.currentOffset + 1) % obj.opt.bars; obj.draw(obj.currentOffset); setTimeout(function () { nextAnimation(obj); }, 1000 / obj.opt.fps); })(this); } CanvasIndicator.prototype.makeRGBA = function () { return "rgba(" + [].slice.call(arguments, 0).join(",") + ")"; } CanvasIndicator.prototype.drawBlock = function (barNo) { this.ctx.fillStyle = this.makeRGBA(this.opt.rgb[0], this.opt.rgb[1], this.opt.rgb[2], (this.opt.bars + 1 - barNo) / (this.opt.bars + 1)); this.ctx.fillRect(-this.opt.size[0] / 2, 0, this.opt.size[0], this.opt.size[1]); } CanvasIndicator.prototype.calculatePosition = function (barNo) { angle = 2 * barNo * Math.PI / this.opt.bars; return { y: (this.opt.innerRadius * Math.cos(-angle)), x: (this.opt.innerRadius * Math.sin(-angle)), angle: angle }; } CanvasIndicator.prototype.draw = function (offset) { this.clearFrame(); this.ctx.save(); this.ctx.translate(this.w, this.w); for (var i = 0; i < this.opt.bars; i++) { var curbar = (offset + i) % this.opt.bars, pos = this.calculatePosition(curbar); this.ctx.save(); this.ctx.translate(pos.x, pos.y); this.ctx.rotate(pos.angle); this.drawBlock(i); this.ctx.restore(); } this.ctx.restore(); } CanvasIndicator.prototype.clearFrame = function () { this.ctx.clearRect(0, 0, this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight); } See an example here .
Download the library here
Source: https://habr.com/ru/post/114080/
All Articles