A set of loading experience Super Comfortable website design appreciation

Source: Internet
Author: User

Editor's note: Excellent designers are the people who can make every painful place interesting, especially for slow speed students, today this group of websites can simply make people happy, even loading interface is so interesting, this is the real micro-experience! Feel it!

To create a good user experience has become a prerequisite, micro-experience is ranked highest--this article explores the preload animation. For a long time, only a few people pay attention to this part, now everything is different, almost every site can be one or two of pleasing to the user to impress the effect of a pose.

The micro-experience is often related to thoughtful pieces of the group, they can bridge the user and content, the visit to the site into a pleasant and memorable journey. This area contains a variety of friendly effects, and today we are going to talk about loading status indicators.

Although they will only last for a few seconds (most of the cases), they deserve special attention. We are accustomed to believe that the home shoulder to create a significant first impression of responsibility, anyway, if you are a non-static site webmaster, the first page is the loading page, you have to consider the loading process. Dynamic counters that are pleasing, eye-catching, and enjoyable are irreplaceable; they delight the user and silently force the user to stay for a little while--that's what you want.

Stylish counters are as original as the design of the subject, and it is interesting and inspiring to appreciate the ideas that designers have come up with. So, let's explore some interesting preload animations.

  Little Big Room

Explore this organization's portfolio, starting with this cartoon-style loading bar. It's not just about entertaining the people who are waiting, but also laying the tone and making a little hint about what's going to happen next.

  Subskill Digital

The team adds vitality to the preload page through a beautiful dynamic logo that subtly applies the branding logo to the website design. This effect has a pleasing digital atmosphere, with the whole theme perfect match.

  The Erasable Wall

Although the site is designed to emphasize very serious topics, its design is slightly playful, thanks to hand-painted wind pictures, pencil drawings and animated elements. This preloaded page shows the same style intelligently and blends well with the entire project.


This loaded animation has an elegant and exquisite appearance, completely unified with the overall appearance of the online portfolio. The team cleverly used the logo to use the animation in an astonishing way.


This loaded page is so imaginative that the vivid vector painting is designed with a clear and unambiguous reflection that you will get quite an interesting and memorable user experience. Loading page has a strong artistic atmosphere, with the overall design feel close.

  Though Brancott Estate

Although Brancott estate used a fairly simple solution-the basic rotating icon-the smart combination of background textures, chalk-style fonts, and compelling wording is enough to force you to stay for a while.


Sometimes to make your pages charming, you don't need to reinvent the wheel, Sixzero explains how to use the simple monochrome background to create a series of continuous solid colors for the load page.

  Tu Corte

Tu Corte specializes in the area of meat, so there is no doubt that the loading indicator shows the image of beef, pork and poultry.

  New Jumo Concept

This preload page ends with a small animation with a logo shape. Open the home page through a pleasant and charming way.

  Letters, Inc.

And the design of the site is very similar to the load page also has a subtle and elegant contour appearance. The animation effect outlines the center of the first photocopy page, slowly revealing the whole composition.

  At Work

There is no special loading page, everything happens on the homepage. It contains a mysterious vortex-like animation that attracts you into a metaphor of energy.


Relio is a pocket-sized, square-shaped professional device that can provide you with lighting. The load page contains a concise contour graphic that represents the gadget. The team also made it move, adding a bit of dynamic to the page.

  Fulvio Luparia

There's nothing supernatural here, a standard circular indicator with a counter that makes up this page. However, designers will be concise for the advantage, in sharp graphics, sharp color contrast and with a light slogan of the clean background, showing an outstanding fusion.

  Scotch and Soda

(self-owned ladder)

Here you will see a decorative basic loading bar, with a primitive hand-drawn way to perform. It is naturally echoed with the hand-drawn elements scattered around the home page.


Engage is famous for its artistic hand-painted wind web site design, and every detail is so planned from beginning to end. Even a regular loading bar that indicates upload status has a pleasing hand-painted wind appeal, and it also uses the brand's color.

  All About medical Training

The team explains how to maximize the use of whitespace. The feature of the load page is an intuitive medical icon that immediately reflects and vividly supports the idea behind the design. A dynamic shadow plays the role of a status indicator.


Mikado the logo based graphics as a simple flat style of the rotation icon. The first few seconds of visiting the site branded the brand identity.


Like the previous example, Designova also animated its logo, only by bouncing round flags to load the page. Although the solution is elegant and easy to implement, it loses its allure over time.

  Zipper Galeria

The team transforms its logo into a text-based add-in that gradually fills the brand color.


Kommigraphics used a classic circular loading indicator. It presents a flat style, soft two-color color, and the site's design theme perfect match.


While it's not new to incorporate load indicators into your site, remember those sites based on Flash, which generally use these stylish little indicators. Now they have an updated, more advanced, more stylish and more exquisite interpretation. The designer begins to treat it like other essential elements, striving for perfection, matching the overall theme and maintaining its own style, so I hope that in the near future, each dynamic design will have an original and interesting load indicator.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.