• How to Build a Delightful Loading Screen in 5 Minutes
  • By Ohans Emmanuel
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: whuzxq
  • Proofreader: luochen1992, ALVINYEH

First, let’s have a look at the renderings.

So that’s the DEMO we’re going to implement.

Does it look familiar?

If it looks familiar, you’ve probably seen it on Slack!

Let’s implement this loading page using only CSS and HTML.

If you want to experiment, you can create a pen on Codepen and write tutorial code.

Now, let’s get started!

1. Add class as a tag

The HTML part is simple, as shown in the following code:

<section class="loading">

For new sidebar colors, click your workspace name, then     Preferences > Sidebar > Theme

<span class="loading__author"> - Your friends at Slack</span>
    <span class="loading__anim"></span>

</section>
Copy the code

Isn’t that easy?

If you’re not sure why dashes appear in class names, I’ve explained the reasons behind them in this article.

Now we have some text, and a SPAN tag of class loading_anim.

The renderings are as follows:

Not bad, right?

2. Center your content

The session tag with class.loading will be centered on the page.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
Copy the code

Center now!

Does it look any better?

3. Style the loaded text

Now, let’s set the text style of class to.loading to make it look nice.

.loading { max-width: 50%; The line - height: 1.4; The font - size: 1.2 rem; font-weight: bold; text-align: center; }Copy the code

4. Set the following parameters.loading_authorThe style of the

.loading__author { font-weight: normal; The font - size: 0.9 rem; Color: rgba (189189189, 1); Margin: 0.6rem 0 2rem 0; display: block; }Copy the code

Look at the effect!

5. Create loading animations

This is the one we’ve been waiting for. This is the longest step, but I’ll take a moment to make sure you understand how it works.

If you run into difficulties, please leave a comment and I’ll be happy to help.

Review the effects of loading again.

We can see that the loading ring is half blue and half gray. By default, HTML elements are not shred. All HTML elements can be thought of as boxes. The first real challenge is how to make an element with class.loading__anim contain two border colors.

If you don’t quite get it by now, don’t worry. We’ll talk more about that later.

First, let’s define the size of loading.

.loading__anim {
  width: 35px;
  height: 35px;
 }
Copy the code

The loading component is now on the same line as the text because the SPAN tag is an inline element in the HTML.

We now modify the style so that it is displayed on a separate line.

.loading__anim {
   width: 35px;
   height: 35px;
   display: inline-block;
  }
Copy the code

Finally, let’s set the border property for it.

.loading__anim { width: 35px; height: 35px; display: inline-block; Border: 5px solid rgba(189,189,189,0.25); }Copy the code

A grey border with a width of 5px is formed around the element.

Below are the renderings.

A gray border is displayed.

Let’s keep refining it.

An element has four sides: top, bottom, left and right.

The border we set up earlier does the same rendering for all four edges.

We now need to set a different color for the border of the loading component.

Whichever side you choose is fine. Use top and left as examples in the code below.

.loading__anim { width: 35px; height: 35px; display: inline-block; Border: 5px solid rgba(189,189,189,0.25); Border - left - color: rgba (3155229, 1); Border - top - color: rgba (3155229, 1); }Copy the code

Now, the left and top boundaries will be blue. The renderings are as follows:

It looks ok.

We’re almost there!

The loading component is circular, not square. Let’s change the shape of the.loader__anim component by setting the border-radius property to 50%.

The renderings are as follows:

Not too bad, is it?

The last step is animation.

@keyframes rotate {
 to {
  transform: rotate(1turn)
 }
}
Copy the code

Hopefully you have some familiarity with CSS animation. 1 turn is equal to 360 deg, which means a complete 360 degree turn.

And use it as follows:

animation: rotate 600ms infinite linear;
Copy the code

Hey! We did it!

Please look at the final effect.

lo hicimos! (Spanish)

Isn’t that cool?

If any steps confuse you, please leave a comment and I’ll be happy to help.

Want to learn more?

I’ve created a free CSS guide so you can learn CSS skills right away. Get an ebook.

Seven CSS secrets you didn’t know.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.