JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.1.3/circle-progress.js"></script>
JavaScript
$ = jQuery;
var test = function() {
this.icons = {
attack_order: $('<img src="http://lorempixel.com/100/100/" class="status_icon">'),
attack: $('<img src="http://lorempixel.com/101/100/" class="status_icon icon_damage">'),
hit: $('<img src="http://lorempixel.com/102/100/" class="status_icon icon_hit">'),
};
};
test.prototype.leak = function() {
var marker = {};
var options = {};
var $icon = $(marker._icon); // marker._icon is undefined because of the clustering
$icon.html('');
$icon.append($('<img class="markerIcon" src="' + options.iconUrl + '" />'));
var iconX = 10;
var iconY = -10;
var iconOffset = 0;
for(var v in this.icons) {
this.icons[v].css('z-index', + $icon.css('z-index') + 1);
this.icons[v].css('transform', 'translate3d(' + iconX + 'px,'
+ (iconY + iconOffset) + 'px,' + '0px)');
iconOffset += 20;
this.icons[v].appendTo($icon);
}
// Fire rate icons
this.attackRateCircle = $('<div class="circle"></div>');
this.attackRateCircle.circleProgress({
value: 0,
size: 16,
fill: { color: "#b5deff" },
emptyFill: 'rgba(0, 0, 0, 0.5)',
startAngle: -Math.PI / 2,
thickness: 4,
animation: false,
});
this.attackRateCircle.hide();
// Create and display the healthbar
this.healthBar = $('<div>').addClass('healthBar ');
this.healthBar.css('z-index', $icon.css('z-index'));
this.healthBarFill = $('<span class="fill">');
this.healthBar.append(this.healthBarFill);
$icon.append(this.healthBar);
$icon.append(this.attackRateCircle);
// $('body').append($icon);
};
var COUNT = 1000;
var items = [];
for(var i = 0; i < COUNT; ++i)
items.push(new test());
function rec(){
for(var i = 0; i < COUNT; ++i)
items[i].leak();
setTimeout(rec, 300);
}
rec();