使用font awesome作为游标

Question

我想在等待时使用下面的代码更改光标图标：

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 110;
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "20px FontAwesome";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("\uf245", 35, 25);
ctx.font = "35px FontAwesome";
ctx.fillText("\uf013", 55, 15);

var dataURL = canvas.toDataURL('image/png')
$('body').css('cursor', 'url(' + dataURL + '), auto');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

有人知道我是否可以让齿轮转动？

Answer 1

只需使用CSS cursor:wait即可。这使用了用户自己的光标设置，这是您应该使用的设置，因为这有助于用户更容易地理解该过程正在运行。一致性非常重要。

html,body {height:100%}
body {cursor:wait}

对我来说似乎很好。