Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Composant Flex – Loading Spinner Type Web 2.0

Loading Spinner est un composant Flex Open Source écrit par Jake Hawkes qui reproduit les GIF de chargement que l'on peut souvent voir dans les sites types web 2.0. C'est aussi le genre d'animation de chargement que l'on peut voir lorsqu'un onglet de Firefox est en train de charger.

Ce composant peut remplacer une ProgressBar en mode indeterminate, c'est-à-dire quand on ne peut pas donner un pourcentage d'avancement du chargement.

Voici quelques exemples crées rapidement avec le composant Loading Spinner:

Flex Source Code Download: Télécharger le code source complet de l'application

Cet exemple a été produit simplement avec ce code MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="controls.*"
	backgroundGradientColors="[0x000000, 0x000000]" viewSourceURL="srcview/index.html">
	<mx:HBox width="100%" height="100%" horizontalGap="60">
		<controls:Spinner tickColor="#66aaff"/>
		<controls:Spinner tickColor="red" size="45"/>
		<controls:Spinner numTicks="25" tickColor="green" size="35"/>
		<controls:Spinner tickColor="#66FFFF" speed="3000" fadeSpeed="600" tickWidth="5"/>
	</mx:HBox>
</mx:Application>

Comme vous le constatez, on peut modifier plusieurs propriétés directement en MXML (tickColor, size, numTicks, speed, fadeSpeed) ce qui permet de customiser votre loader comme vous le souhaitez.

Voilà une mini-application permettant de tester l'apparence de votre Loading Spinner directement:

Flex Source Code Download: Télécharger le code source complet de l'application

Télécharger Loading Spinner sur Adobe Exchange

Le Loading Spinner sur la page de l'auteur