Loader

Sub Menu

USER INTERFACE ELEMENTS

Loader

met-life-des-foundations-standards-user-interface-elements-asset-01

Overview

Messaging and animation appears when a web page or its content takes too long to load.

Specifications

Loader Specifications

With Hint Text (Alternate Variation)

Animation Loader (General)
Loading animation consists of three (3) dots. Sequence repeats Animation 1-3.

loader-specifications-animation-loader-general
  • Dot Color 1: #2B99E3
  • Dot Color 2: #0061A0
  • Dot Color 3: #A4CE4E
  • Text Color: #333333
  • Text: Noto Sans 13px Normal
loader-specifications-animation-loader-general-default
loader-specifications-animation-loader-general-default-1
loader-specifications-animation-loader-general-default-2
loader-specifications-animation-loader-general-default-3
loader-specifications-animation-loader-general-default-4
Default
Animation 1
Animation 2
Animation 3
Animation 4
of
Error Message
Default
Animation 1
Animation 2
Animation 3
Animation 4

Animation Loader (On Dark)

loader-animation-loader-on-dark
  • Dot Colors: #FFFFFF
  • Text Color: #FFFFFF
  • Text: Noto Sans 13px Normal

Usage Guidelines

Alignment

loader-usage-guidelines-alignment

Desktop: Centered-aligned inside a parent container.
Mobile: Center-aligned inside a parent container.