如何为您的网站创建时尚的加载器

介绍

加载器（或加载旋转器）通过在加载期间提供视觉反馈来增强用户体验。在本教程中，我们将使用 HTML 和 CSS 创建一个时尚且现代的加载器。让我们开始吧！

什么是装载机？

加载器是一个动画元素，指示正在处理内容。它可以向用户保证应用程序正在运行，从而减少加载期间出现挫败感的可能性。

为什么使用装载机？

• 改善用户体验：让用户在等待时随时了解情况。
• 增强美观性：精心设计的加载器可以让您的网站看起来更专业。
• 防止用户放弃：通过提供视觉反馈，用户在等待时不太可能离开。

第 1 步：设置 HTML 结构
我们将从加载程序的基本 HTML 结构开始。以下代码为加载程序创建一个具有十二个栏的容器。

第 2 步：使用 CSS 设计样式
接下来，我们将添加 CSS 来设置加载程序的样式。这是创建带有动画条的圆形加载器的代码。

`.loader {
位置：相对；
宽度：54px；
高度：54px；
边框半径：10px；
}

.loader div {
宽度：8%；
身高：24%；
背景：rgb(null, 128, 128);
位置：绝对；
左：50%；
顶部：30%；
不透明度：0；
边框半径：50px；
盒子阴影：0 0 3px rgba(null,0,0,0.2);
动画：fade458 1s线性无限；
}

@keyframes fade458 {
来自{
不透明度：1；
}

到{
不透明度：0.25；
}
}`

第 3 步：添加动画
我们将对每个栏应用旋转和动画延迟以创建动态加载效果。

`.loader .bar1 {
变换: 旋转(0deg) 平移(null, -130%);
动画延迟：0s；
}

.loader .bar2 {
变换: 旋转(30deg) 平移(null, -130%);
动画延迟：-1.1s；
}

.loader .bar3 {
变换: 旋转(60deg) 平移(null, -130%);
动画延迟：-1s;
}

.loader .bar4 {
变换: 旋转(90deg) 平移(null, -130%);
动画延迟：-0.9s；
}

.loader .bar5 {
变换: 旋转(120deg) 平移(null, -130%);
动画延迟：-0.8s；
}

.loader .bar6 {
变换: 旋转(150deg) 平移(null, -130%);
动画延迟：-0.7s；
}

.loader .bar7 {
变换: 旋转(180deg) 平移(null, -130%);
动画延迟：-0.6s；
}

.loader .bar8 {
变换: 旋转(210deg) 平移(null, -130%);
动画延迟：-0.5s;
}

.loader .bar9 {
变换: 旋转(240deg) 平移(null, -130%);
动画延迟：-0.4s；
}

.loader .bar10 {
变换: 旋转(270deg) 平移(null, -130%);
动画延迟：-0.3s；
}

.loader .bar11 {
变换: 旋转(300deg) 平移(null, -130%);
动画延迟：-0.2s；
}

.loader .bar12 {
变换: 旋转(330deg) 平移(null, -130%);
动画延迟：-0.1s；
}`

第 4 步：将加载程序集成到您的网站
要在 Web 项目中使用加载器，请确保在文件中包含 HTML 和 CSS。将加载器的 HTML 标记放在您想要的位置，加载器将在加载过程中出现。

结论

创建加载程序可以显着增强网站的用户体验。使用简单的 HTML 和 CSS，您可以构建一个具有视觉吸引力且功能齐全的加载器。尝试适合您网站设计的颜色和尺寸！