BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Loading

Variations

MetLife Apps can use third party databases which may not consistently load quickly or at the same time as MetLife’s data. Therefore there are multiple loading animations to lighten the experience in such cases.

1. Page

Page level loading is used when the whole page is loading. If multiple loading animations are used, this will always be the first.

Page level loading beings with a white 90% opaque overlay covering the primary content of the screen (it does not cover the navigation at the top or bottom).

A title and icon or illustration relevant to what is loading scales and fades in together. This is followed by a small piece of content such as a fun fact. Last is the three dot loader, where each dot bounces one after the other repeating until the page has loaded.

Once the page has loaded, the title, icon, fact and three dot loader scale and fade out together. Followed by the white overlay.

2. Component

Component loaders are used when specific parts of a page load after the rest of the page.

The component loader is the same height as the component that will load. In place of the component is a 100% solid white cover, with the three dot loader bouncing until the component loads.

Once the component has loaded, the dots scale and fade out followed by the component fading in.

3. Refresh

Refresh happens when a user pulls down on the primary content of the screen (not the top or bottom navigation) to initiate a page level refresh.

As the user pulls the content down, all of the primary page content fades to 30% opacity. Simultaneously the three dot loader scales and fades in between the top nav and the top content of the page. The three dot loader bounces until the content has been refreshed.

When the new content loads in, the three dot loader scales and fades out. The old content fades out, followed by the new content fading in and moving vertically up.

4. Submission

The submission loader is a series of animations connecting a button, loading screen and confirmation page. It is used on the last step of transactions such as paying a bill and submitting a claim.

It begins with a user pressing a button. The button scales down vertically and horizontally, while the button text fades out, while the whole button moves to the vertical center of the screen. The button transitions into a dot in a page level loader.

The page loader animations as normal, described above in the Page loader variation.

When the confirmation screens has loaded, the center dot of the Page loader moves vertically up, while scaling up to become the circle with a checkmark. As the checkmark circle transitions, the top navigation bar expands downward to become the rounded header. The checkmark circle bounces into it’s final position as the header text fades in and moves vertically up. The page content (such as a table and button) loads slight after the checkmark and header, sliding in from the bottom of the screen, overlaying the header.

5. Welcome loader

The welcome loader is a branded opening animation that the user sees upon launching the app.

It begins with a user entering the app. A gradient moves across the screen, and the logo animates in with the tagline "Navigating life together.". The logo transitions into the logo that appears in the homescreen, and the rest of the homescreen content fades in.