Shulou(Shulou.com)06/03 Report--

The main content of this article is "how to achieve a full-screen loading animation effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to achieve a full-screen loading animation effect"!

The core of this effect is to animate a shape in the page window with an indication of activity. When the new content is loaded, the shape is animated to return to the displayed page. We will use the Snap.svg animation library to implement this, because this library allows us to create complex shapes and interesting transformation effects.

Online demonstration

It is important to note that the example here only provides an idea, and dynamic content loading is simulated. In addition, without demotion, animations and pseudo elements may not work properly in some browsers.

Warm Tip: to ensure the best results, please browse in modern browsers such as IE10+, Chrome, Firefox and Safari.

The way we display the mask is to define an SVG path animation:

The initial path we defined is not visible on the page, and the start and result paths are defined in the data-opening and data-closing properties, respectively. As you can see, we use a small viewBox, but we stretch the width and height of the drawing window to 100% instead of maintaining the aspect ratio. If we do not define a closed path, we return the animation to the original path.

Note that we can also add multiple paths (separated by semicolons), which allows SVG to draw sensible animations of the steps you will see in the first demo. We set the overlay to be divided into a fixed location, covering the entire page, and achieve the load prompt effect by adding styles to:: before and:: after pseudo elements.

JavaScript Code copies content to the clipboard

. pageload-overlay {

Position: fixed

Width: 100%

Height: 100%

Top: 0

Left: 0

Visibility: hidden

}

. pageload-overlay.show {

Visibility: visible

}

. pageload-overlay svg {

Position: absolute

Top: 0

Left: 0

}

. pageload-overlay svg path {

Fill: # fff

}

We use visibility here, because using these fixed style positioning and pointers and SVG events may have some problems on the mobile side, so we locate and manipulate the parent DIV instead. You may have noticed that circle animation is also implemented by transforming from one path to another (of course, there are other ways, such as scaling), but we use the following values to determine that the circle is Rseponsive:

XML/HTML Code copies content to the clipboard

Width= "100%" height= "100%" viewBox= "00 80 60" preserveAspectRatio= "xMidYMid slice"

At this point, I believe you have a deeper understanding of "how to achieve a full-screen loading animation effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.