用css和html构建一个简单的加载器

The nice thing to do when your website isn’t fully loaded is to play a little animation.

当您的网站未完全加载时，最好的做法是播放一些动画。

It lets the user know: “We’re working on it.”

它让用户知道：“我们正在努力。”

“We know if it takes more than 2 seconds, you’ll leave forever.”

“我们知道如果花费超过2秒的时间，您将永远离开。”

“My liege, we graciously offer you ~three blinking dots~.”

“我的主人，我们很乐意为您提供〜三个闪烁的点〜。”

Animations act like a mantra. Like staring into a campfire. It hits your brain jingling keys hit a baby. Something primitive is opened inside, and we’re transported to a place outside of time. And while we’re there, no one notices the load…

动画就像咒语一样。 就像凝视篝火一样。 它敲打您的大脑，叮当声的钥匙敲打了婴儿。 内部有一些原始的东西被打开，我们被转移到时间以外的地方。 当我们在那里的时候，没人注意到负载...

讲解 (Tutorial)

In this blog, I try my hand at recreating various loaders I’ve seen on the web. In doing so, I attempt to make them as simple as possible, so they can easily be imported into your project or you can use the ideas to create your own.

在这个博客中，我会尝试重新创建各种我在网络上看到的装载程序。 为此，我尝试使它们尽可能简单，以便可以轻松地将它们导入到您的项目中，或者您可以使用这些想法来创建自己的想法。

The code on Github

Github上的代码

初步垃圾 (Preliminary Junk)

I set up a file structure that is an HTML file, index.html and a CSS file, index.css. The HTML looks like this:

我设置了一个文件结构，它是一个HTML文件index.html和一个CSS文件index.css 。 HTML看起来像这样：

I’ll explain each example in more detail when it’s relevant.

当相关时，我将更详细地说明每个示例。

I set up some CSS variables for colors (from Coolors.co), flexbox, and margins for the general layout of the demo.

我为演示的一般布局设置了一些CSS变量，用于颜色(来自Coolors.co )， flexbox和margin 。

例子1 (Example 1)

Example 1 has the HTML of one div, set up like this:

示例1HTML为一格，设置如下：

Design: I give it the same size width and height and a border-radius: 50%;. By adding a border, you can see that this creates a circle.

设计：我给它相同的大小width和height ， border-radius: 50%; 。 通过添加border ，您可以看到它创建了一个圆。

I style the border-top-color with my accent color, var(--loader-acc-color). This overwrites the initial color in border for just the top of the border.

我用重音颜色var(--loader-acc-color)设置border-top-color样式。 这将覆盖border的初始颜色，仅用于border的顶部。

Animation: I set up @keyframes example-one so an element with this animation will rotate from 0 to 360 degrees.

动画：我设置了@keyframes example-one因此带有此动画的元素将从0旋转到360度。

I give the #example-1 element an animation property. Using the shorthand, I set the duration to 2s, iteration count to infinite, and name as example-one.

我给#example-1元素一个animation属性。 使用速记，我将持续时间设置为2s ，将迭代计数设置为infinite ，并将其命名为example-one 。

例子2 (Example 2)

For Example 2, the HTML is a div container for three more divs. Each will be a “bar”.

对于示例2，HTML是另外三个div的div容器。 每个都将是一个“栏”。

Design: #example-2 is given some width, height and flexbox properties to center the bars within.

设计： #example-2具有一些width ， height和flexbox属性，以使条形居中。

Each bar is given a margin, width, and starting height. I give them a background-color and some fancy border stuff for accent.

每个条都有一个margin ， width和起始height 。 我给他们提供了background-color和一些精美的border装饰。

Animation: There are four parts to the example-two animation, divided into 0%, 25%, 50%, and 100%.

动画： example-two动画分为四个部分，分为0％，25％，50％和100％。

At 0%, the height is set to 2.5em, the same as the initial height of each bar. From 0% to 25%, the height grows to 5em. From 25% to 50%, it shrinks back to 2.5em where it will sustain until 100% when the animation restarts.

值为0％时， height设置为2.5em ，与每个小节的初始高度相同。 从0％到25％， height增加到5em 。 从25％到50％，它会缩小到2.5em ，直到动画重新开始时，它将持续到100％。

I give each bar an animation property with a duration of 1.5s, iteration count of infinite, and connect it to @keyframes by name, example-two.

我给每个酒吧一个animation属性，其持续时间为1.5s ，迭代次数为infinite ， @keyframes名称将其连接到@keyframes ， example-two 。

Finally, in order to stagger the play, I grab the individual bars by their IDs. bar-1 gets a delay of 0.25s and bar-2 gets a delay of 0.5s.

最后，为了交错播放，我按ID来抓取各个小节。 bar-1获得0.25s的延迟，而bar-2获得0.5s的延迟。

例子3 (Example 3)

Example 3 is one div.

示例3是一格。

Design: I give #example-3 a width: 5em; and height: 1em; to make it a long rectangle. I give it a background-color and some fancy border stuff for an accent.

设计：我给#example-3 width: 5em; height: 1em; 使它成为一个长矩形。 我给它加上background-color和一些花哨的border ，以增加口音。

Animation: I use the transform property again, but this time I flip the div from 0 to 180 degrees over its y axis using rotateY(). Then I flip it to 360 degrees, back to its starting position.

动画：我再次使用transform属性，但是这次我使用rotateY()将div在其y轴上从0翻转到180度。 然后我将其翻转至360度，回到初始位置。

例子4 (Example 4)

Example 4, most complex loader, has HTML of a container div with three children divs. Each child is also a container div for a single div that will be shaped like a ball.

示例4，最复杂的加载器，具有带有三个子div的容器divHTML。 每个孩子也是单个div的容器div，其形状类似于球。

Design: The outer most container, #example-4 contains flexbox properties to center the loader within.

设计：最外面的容器#example-4包含flexbox属性，以使加载程序居中。

Each .ball-container gets the same width as height to make it a square and a margin-right to put some space in between.

每个.ball-container都具有与height相同的width ，以使其成为正方形，并在其之间留出一定的width以.ball-container margin-right 。

Then, .ball-container gets flexbox properties to center the “ball” inside. This is important because as the ball changes sizes, I want it to remain centered.

然后， .ball-container获取flexbox属性以将“ ball”内部居中。 这很重要，因为随着球大小的变化，我希望它保持居中。

Each .ball gets an initial width and height of 0. A border-radius of 50% turns them into circles, and a background-color makes them visible.

每个.ball的初始width和height .ball ％的border-radius将其变成圆形，而background-color则使其可见。

Animation: The animation follows the same logic as example-2 except I am manipulating each ball’s height and width.

动画：动画遵循与example-2相同的逻辑，只是我要操纵每个球的height 和 width 。

From 0% to 20%, they grow from 0 x 0 to 1.5em x 1.5em. I keep them at this size from 20% to 40%. From 40% to 90% they shrink down to 0 x 0, and remain there from 90% to 100%.

从0％到20％，它们从0 x 0增长到1.5em x 1.5em 。 我将它们的大小保持在20％到40％之间。 从40％到90％，它们缩小到0 x 0 ，并从90％到100％保持在那里。

I set each ball to have an animation property with a duration of 1.2s, iteration count of infinite, and name example-four.

我将每个球设置为具有1.2s持续时间的动画属性，迭代计数为infinite ，名称为example-four 。

Finally, I grab each ball by their individual ID so I can add an animation-delay to #ball-2 and #ball-3. This staggers the animation.

最后，我通过每个球的ID来抓取每个球，以便可以向#ball-2和#ball-3添加animation-delay 。 这使动画错开了。

结论 (Conclusion)

Thanks for reading the blog. I hope you found some of it useful.

感谢您阅读博客。 我希望您发现其中一些有用的东西。

At minimum, I hope one of my loaders transported you to that timeless place where — just for a moment — you felt the balance of the universe, tasted a slice of nirvana, inner peace. Best, Jason.

至少，我希望我的装载机能将您运送到那个永恒的地方，在那里-片刻-您感到宇宙的平衡，品尝了一片必杀技，内心的平静。 最好，杰森。

翻译自: https://medium.com/swlh/build-a-simple-loader-with-css-and-html-8eaa25183246