커스텀로드 커서

Question

"진행중"커서의 로딩 애니메이션을 변경하는 방법이 있는지 알고 싶습니다. 이 CSS-Trick 게시물에서와 같이 커서를 변경하는 것과 같습니다.

Answer 1

원하는 것을 얻기위한 두 가지 방법.

완전히 커서를 사용자 정의 할 경우, 이미지 동의 cursor 사용할 수 있습니다

CSS의 방법 (귀하의 경우를, .gif 인을!)

._show-loader:hover { 
    cursor: url('http://i117.photobucket.com/albums/o72/redfenderstrat/Debian_Rotate.gif'); 
} 

나는이 방법을 좋아한다 나는 JS를 가능한 한 순수한 디자인으로 유지하는 것을 선호하기 때문에.

당신이 사용자의 커서 후 애니메이션을 추가해야하는 경우 (사람이 같은 커서를 가지고 있지 않기 때문에이 자연을 만드는)

JQuery와 방법이 jQuery를 대체 커서로 이미지 스틱을 만들 것입니다 .

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

내가하지 않습니다 정말이 2002 둔화 효과를 않기 때문에이 대안이있다.