Warning: don't do this. Stop it! Just. Don't.
So there's this hack by Ben Foxall that shows how you can escape the browser window and draw outside the page. I had to try it myself. So here comes: the animated "progress" indicator mouse cursor.
Wait what?
There exists the ability for your web page to use a custom cursor by providing a URL to an image. But animated GIFs, etc are not allowed. Seems the browser vendors don't want us to get too crazy, 90s-style. And rightfully so.
But turns out you can use canvas, instead of URI to a static image. And you can animate the thing in the canvas.
How
I grabbed an animation example from MDN. It's a clock. But you can use anything, e.g. something related to what your app is doing.
I only made two changes to the example.
First, the canvas is not static, but created in memory:
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext('2d');
128 appears to be the limit of how large the cursor can be.
The second change is to convert the canvas image to data URI and make the cursor be that URI.
document.documentElement.style.cursor =
'url(' + canvas.toDataURL() + ') 64 64, auto';
The 64 64 coordinates are so that the image can be centered.
And voila - an animated custom mouse cursor that even extends beyond the browser window.
And the demo once again
Moral dilemma
Should browsers disallow this? Maybe, probably. Should you abuse this and party like it's 1995? You better not.
