Эффект анимации перезарядки навыков, похожий на такие игры, как WoW, в css/js? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект, при котором при нажатии на значок навыка происходит «перезарядка», аналогично тому, как навык перезаряжается в типичной MMO, такой как WoW.
Я нашел приведенный ниже код для достижения такого эффекта, но он не задокументирован, и я не очень в нем разбираюсь, но хочу внести в него изменения.
html:

Код: Выделить всё

css:

Код: Выделить всё

.skill {
margin: 0px;
padding: 0px;
position: relative;
border: 1px solid #36393E;
border-radius: 5%;
width: 44px;
height: 44px;
overflow: hidden;
background-color: transparent;
background-image: url("skill.png");
background-repeat: no-repeat;
background-size: 100%;
}

.cooldown {
position: absolute;
opacity: 0.8;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}

js:

Код: Выделить всё

function cooldown(container, percent) {
var div = $(container);
div.empty();

var total = 100;
if(percent < total) {
var data = [percent, total - percent];
var width = div.width();
var height = div.height();
var cx = width / 2;
var cy = height / 2;
var r = cx * Math.SQRT2;
var colors = [null, '#AAA'];
var svgns = "http://www.w3.org/2000/svg";
var chart = document.createElementNS(svgns, "svg:svg");
chart.setAttribute("width", width);
chart.setAttribute("height", height);
chart.setAttribute("viewBox", "0 0 " + width + " " + height);

var angles = []
for(var i = 0; i < data.length; i++) angles[i] = data[i] / total * Math.PI * 2;
startangle = 0;
for(var i = 0; i < data.length; i++) {
var endangle = startangle + angles[i];

var x1 = cx + r * Math.sin(startangle);
var y1 = cy - r * Math.cos(startangle);
var x2 = cx + r * Math.sin(endangle);
var y2 = cy - r * Math.cos(endangle);

var big = 0;
if (endangle - startangle > Math.PI) big = 1;

var path = document.createElementNS(svgns, "path");

var d = "M " + cx + "," + cy + " L " + x1 + "," + y1 +
" A " + r + "," + r + " 0 " + big + " 1 " +
x2 + "," + y2 + " Z";

path.setAttribute("d", d);
if(colors[i]) {
path.setAttribute("fill", colors[i]);
} else {
path.setAttribute("opacity", 0);
}
chart.appendChild(path);
startangle = endangle;
}

chart.setAttribute('overflow', 'hidden');
div.append(chart);
}
}

$(window).ready(function() {
$('.skill').each(function() {
var skill = $(this);
var div = $('').appendTo(skill).addClass('cooldown');
var radius = div.parent().width() / 2;

skill.click(function() {
$({pct: 0}).animate({pct: 100}, {
duration: 5000,
step: function (curLeft) { cooldown(div, curLeft);  }
});
});
});
});

Мне удалось внести в него одно изменение, которое я хотел, а именно добавить текст со временем восстановления, вот так: (еще не обновлял его в js, но думаю, что это кое-что я могу сделать сам)

Код: Выделить всё

5

.skill .text {
font-size: 14px;
color: #E1E5EB;
text-shadow: 1px 1px 1px #000000;
line-height: 44px;
text-align: center;
background-color: transparent;
}

Другие изменения, с которыми мне нужна помощь:

• Заполнение против часовой стрелки, а не по часовой стрелке.
• Измените непрозрачность заполненных/незаполненных частей (в настоящее время
  заполненная часть темная, а незаполненная — светлая, но я хочу противоположного )

Подробнее здесь: https://stackoverflow.com/questions/672 ... -in-css-js