In-depth WordPress preview loading animations

WordPress introduced a block editor (aka Gutenberg) in version 5.0, and with it comes a nice new post preview screen that shows the WordPress logo draws itself when the preview loads.

This is the picture you see when you save the draft article and click the "Preview" button in the editor. How did they achieve it? I have a hard time viewing the source code of the page because the preview loads very quickly, but I do see that SVG is used for WordPress logos. This is exactly what I need, as I immediately recalled an article written by Chris in 2014 that used stroke-dasharray and stroke-dashoffset properties to create the same effect.

Here is an example Chris shared in that post:

[CodePen link](See the Pen bGyoz by Chris Coyier (@chriscoyier) on CodePen.)

After that, I've been able to get the CSS code to confirm that WordPress drawing does use the same technique, but I'll share how I break down the problem when trying to reverse engineering.

We are using inline SVG

One clever thing about the WordPress version is that we use two SVG paths instead of one. This means we have two parts that seem to be drawn at the same time. Here is the SVG inlined in HTML. We also have the "Generating Preview" text, which can be located outside of the SVG.

<svg aria-hidden="true" focusable="false" role="img" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none"></path><path d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none"></path></svg><p> Generating preview...</p>

The first path is an ellipse that serves as the boundary of the second path, the second path is the shape of the WordPress logo. It's better to give each path a class - especially if this is not the only element on the page - but I decided not to use the class because it's the only element in the demo. In this case, we can select these two paths using CSS, or select them separately using a pseudo selector (e.g. path:nth-child(2) ).

There are some other auxiliary operations. For example, SVG gets attributes to make it more accessible, such as identifying it as an image, hiding it outside of the screen reader, and preventing it from being focused.

We need to set the SVG style a little

Very, very simple style. We need a stroke because there is no fill color on the path. Otherwise we will see a lot of blank spaces. Well, it's an invisible shape, but essentially nothing.

 svg {
  stroke: #555;
  stroke-width: 0.5;
  width: 250px;
}

This gives us the outline of the two paths. The advantage of stroke-width attribute is that it accepts decimal values, so we can make the lines a little thinner. Drawing this way looks like it was drawn in a pencil.

The width here is quite arbitrary, but it is important because stroke-dasharray and stroke-dashoffset properties we will use depend on it. If these attribute values ??are less than the SVG size, the drawing will stop completing. If it is too large, the drawing speed will be too fast.

Now that we know the width and can see the path stroke, we can set stroke-dasharray and stroke-dashoffset accordingly.

 svg path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

It's slightly larger than SVG and there's a lot of room between dashes, which should be almost the right fit. These values ??can be adjusted to adjust the animation to your preferences.

The rest is just using Chris' technology

Drawing is a CSS animation using a keyframe. If we start from stroke-dashoffset , the path will be invisible at initial load and grow to the 300 value we set earlier when the animation reaches 100%. Again, we set the offset to 300 so that the stroke dash and the space between them will be expanded outside the SVG to cover the entire content.

All magic is just five elements code:

 @keyframes draw {
  0% {
    stroke-dashoffset: 0;
  }
}

Name the animation any name you like. We can define animations only at 0%, because 100% is implicit.

oh! We also have to attach the animation to the path, so:

 svg path {
  animation: draw 2s ease-out infinite alter;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

You can also adjust these values ??to speed up or slow down. The easing effect gives the animation a slight pulse effect, where the start and end speed is a little slower than the middle part of the movement.

Now put it all together!

I mentioned it before, but I was eventually able to get the source code from the actual implementation, it was very close and used the same principle.

The above is the detailed content of Digging Into the Preview Loading Animation in WordPress. For more information, please follow other related articles on the PHP Chinese website!