Custom Loading Cursor - html

Question

I want to know if there is a way to change the "progress" cursor's loading animation. Like changing the cursor like in this CSS-Trick post.

Answer 1

Two ways to achieve what you want.
The CSS way
If you want to completely customize the cursor, you can use cursor which accept images (in your case, a .gif !)
._show-loader:hover {
cursor: url('http://i117.photobucket.com/albums/o72/redfenderstrat/Debian_Rotate.gif');
}
I like this approach since I prefer keeping JS out of my pure design things as much as possible.
The jQuery way
If you need to add an animation after user's cursor (to make this more natural since people does not have the same cursor), this jQuery alternative will make the image stick to the cursor.
var $showLoader = $('._show-loader');
$showLoader.on('mousemove', function(e) {
var cursorPos = {
left: e.pageX + 20,
top: e.pageY + 20,
}
$("._cursor-onLoad").css({
left: cursorPos.left,
top: cursorPos.top
});
});
$showLoader.on('mouseenter', function() {
$('._cursor-onLoad').css({
display: 'block',
})
});
$showLoader.on('mouseleave', function() {
$('._cursor-onLoad').css({
display: 'none',
})
});
JSFiddle here
I doesn't really like this alternative since it does this 2002-sluggish effect.