How to change the default Flex busy/loading cursor with CSS or code

Flex provides a default busy cursor style which looks like a small clock. It can be shown easily, by calling CursorManager.setBusyCursor() and removed just as easily by calling CursorManager.removeBusyCursor(). I’m not a big fan of it, but fortunately it is easy enough to change through CSS or AS3.

The first option is probably the most common, and is using CSS. Just add the following into a css file, replacing the source path with the path to your loading asset. This will apply this cursor style anytime you call the CursorManager.setBusyCursor() method.


CursorManager
{
busy-cursor: Embed(source='/assets/loading/loading.swf');
}


The second method still essentially uses CSS, but it creates the style dynamically using ActionScript. Just use the following anywhere in your code:


[ Embed(source="/assets/loading/loading.swf") ]
private const customLoadingCursor:Class;StyleManager.getStyleDeclaration("CursorManager").setStyle("busy-cursor", customLoadingCursor);