介绍
加载器（或加载旋转器）通过在加载期间提供视觉反馈来增强用户体验。在本教程中，我们将使用 HTML 和 CSS 创建一个时尚且现代的加载器。让我们开始吧！
什么是装载机？
加载器是一个动画元素，指示正在处理内容。它可以向用户保证应用程序正在运行，从而减少加载期间出现挫败感的可能性。
为什么使用装载机？
- 改善用户体验：让用户在等待时随时了解情况。
- 增强美观性：精心设计的加载器可以让您的网站看起来更专业。
- 防止用户放弃：通过提供视觉反馈，用户在等待时不太可能离开。
第 1 步：设置 HTML 结构
我们将从加载程序的基本 HTML 结构开始。以下代码为加载程序创建一个具有十二个栏的容器。
本程序源码为asp与acc编写，并没有花哨的界面与繁琐的功能，维护简单方便，只要你有一些点点asp的基础，二次开发易如反掌。 1.功能包括产品，新闻，留言簿，招聘，下载，...是大部分中小型的企业建站的首选。本程序是免费开源，只为大家学习之用。如果用于商业，版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器，ie6+，Ch
第 2 步：使用 CSS 设计样式
接下来，我们将添加 CSS 来设置加载程序的样式。这是创建带有动画条的圆形加载器的代码。
`.loader {
位置：相对；
宽度：54px；
高度：54px；
边框半径：10px；
}
.loader div {
宽度：8%；
身高：24%；
背景：rgb(128, 128, 128);
位置：绝对；
左：50%；
顶部：30%；
不透明度：0；
边框半径：50px；
盒子阴影：0 0 3px rgba(0,0,0,0.2);
动画：fade458 1s线性无限；
}
@keyframes fade458 {
来自{
不透明度：1；
}
到{
不透明度：0.25；
}
}`
第 3 步：添加动画
我们将对每个栏应用旋转和动画延迟以创建动态加载效果。
`.loader .bar1 {
变换: 旋转(0deg) 平移(0, -130%);
动画延迟：0s；
}
.loader .bar2 {
变换: 旋转(30deg) 平移(0, -130%);
动画延迟：-1.1s；
}
.loader .bar3 {
变换: 旋转(60deg) 平移(0, -130%);
动画延迟：-1s;
}
.loader .bar4 {
变换: 旋转(90deg) 平移(0, -130%);
动画延迟：-0.9s；
}
.loader .bar5 {
变换: 旋转(120deg) 平移(0, -130%);
动画延迟：-0.8s；
}
.loader .bar6 {
变换: 旋转(150deg) 平移(0, -130%);
动画延迟：-0.7s；
}
.loader .bar7 {
变换: 旋转(180deg) 平移(0, -130%);
动画延迟：-0.6s；
}
.loader .bar8 {
变换: 旋转(210deg) 平移(0, -130%);
动画延迟：-0.5s;
}
.loader .bar9 {
变换: 旋转(240deg) 平移(0, -130%);
动画延迟：-0.4s；
}
.loader .bar10 {
变换: 旋转(270deg) 平移(0, -130%);
动画延迟：-0.3s；
}
.loader .bar11 {
变换: 旋转(300deg) 平移(0, -130%);
动画延迟：-0.2s；
}
.loader .bar12 {
变换: 旋转(330deg) 平移(0, -130%);
动画延迟：-0.1s；
}`
第 4 步：将加载程序集成到您的网站
要在 Web 项目中使用加载器，请确保在文件中包含 HTML 和 CSS。将加载器的 HTML 标记放在您想要的位置，加载器将在加载过程中出现。
结论
创建加载程序可以显着增强网站的用户体验。使用简单的 HTML 和 CSS，您可以构建一个具有视觉吸引力且功能齐全的加载器。尝试适合您网站设计的颜色和尺寸！
