Spinner

Om elementen aan te duiden als ‘bezig met laden’ kan een preloader/spinner worden ingezet. Deze toont een subtiele animatie tijdens het laden. Wanneer de preloader class wordt verwijderd functioneert en ziet het element er uit als standaard.

Met behulp van de .spinner class kunnen elementen voorzien worden van een laad animatie. Door aria-live="assertive" toe te voegen forceer je een screenreader de 'aan het laden' tekst voor te lezen. Er is een modifier .spinner--page voor het inladen van volledige pagina's.

Aan het laden

Zoals bijvoorbeeld deze tekst die nog geladen moet worden. Het element waar de spinner op verschijnt krijgt ook een lichtere opacity.

Aan het laden

Deze spinner alleen gebruiken bij een interface die in zijn geheel binnen de main wordt geladen (Exclusief logo & navigatie).

Benodigde stylesheets

  • /uno/components/spinner/spinner.css
  • /uno/core/animations.css