Многие, вероятно, используют индикаторы процесса , например, при передаче/получении каких-либо данных через AJAX. Однажды я был озадачен тем, что когда я нажимал на кнопку, отправляющую данные формы на сервер, внутри нее появлялся этот самый индикатор.
Изначально фон был однотонным, но в любой момент дизайнеры могли заменить его другим или даже создать градиент. Делать специальную гифку для каждой ситуации — довольно глупо.
Поэтому правильное решение — использовать Canvas.
В первые минуты я наткнулся этот модуль JavaScript , с помощью которого можно как минимум генерировать подобные индикаторы: 
Но проблему это не решило, не с технической стороны, конечно, а с конструктивной.
Человек, занимающийся этими вопросами, утверждал, что это не круги, а палки бегают по кругу, вот так: 
Я изначально наткнулся эта библиотека , но в нем есть много функций, которые я даже не планировал использовать.
Поиски пришлось продолжить.
В конце концов я наткнулся одна запись , что почти решило мою проблему.
Удалив лишнее и добавив необходимое, я с удовольствием поделюсь с вами решением.
Пример использования.
В нужном месте поместите тег Canvas:
И создайте экземпляр класса CanvasIndicator:<canvas id="loader"></canvas>
new CanvasIndicator(document.getElementById("loader"),{
bars:11,
innerRadius:4,
size:[2,5],
rgb:[255,255,255],
fps:10
});Как видите, конструктор CanvasIndicator принимает два параметра: первый — это обязательно холст, на котором собственно и будет происходить действие.
Второй параметр необязательный — это объект, свойствами которого является конфигурация индикатора.
Более подробная информация о недвижимости: бары — количество блоков внутреннийРадиус - внутренний радиус размер — массив, где первый элемент — ширина блока, а второй — его высота RGB — цвет индикатора, задается массивом из трех элементов, где Red, Green, Blue соответственно кадр/с — количество кадров в секунду, чем выше значение, тем быстрее вращается индикатор
Ну и непосредственно код библиотеки 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);
}
Вы можете увидеть пример Здесь .
Вы можете скачать библиотеку здесь Теги: #JavaScript #canvas #indicator #ajaxload #разработка сайтов #JavaScript #canvas
-
День, Когда Учетные Записи Wow Остановились
19 Oct, 24 -
Linux Для Домашних Пользователей
19 Oct, 24 -
Бессмертный Компьютер
19 Oct, 24 -
Отчеты Microsoft Dynamics Gp Frx С Полей
19 Oct, 24 -
В Codepen Добавлена Поддержка Flutter.
19 Oct, 24 -
Модальности В Ит И За Его Пределами
19 Oct, 24
