51个Loading等待GIF图标素材：提升用户体验-CSDN博客

本文链接：https://blog.csdn.net/weixin_35750953/article/details/141616301

简介：Loading图标是用户体验中至关重要的元素，本素材集合提供51个丰富多样的GIF图标，遵循设计原则、动画效果、适应性、色彩选择、交互反馈和使用场景的最佳实践。这些图标可用于优化网页和应用程序，分散用户注意力，减轻等待不耐烦感，提升整体用户体验。

1. Loading图标设计原则

Loading图标是用户界面中必不可少的元素，它在页面或应用程序加载过程中向用户提供视觉反馈。为了设计出有效且令人愉悦的Loading图标，需要遵循以下原则：

简洁明了： Loading图标应简单易懂，避免使用复杂的图形或动画。
相关性： 图标应与正在加载的内容或操作相关联，例如旋转的齿轮表示正在加载页面。
视觉吸引力： 图标应具有吸引力，同时又不分散注意力。避免使用刺眼或令人反感的设计。

2. Loading图标动画效果

2.1 动画类型

Loading图标动画效果丰富多样，可以根据不同的需求和场景进行选择。常见的动画类型包括：

2.1.1 旋转

旋转动画是常见的Loading图标类型，简单易懂，适用于各种场景。旋转动画可以是顺时针或逆时针，速度和角度可以根据需要进行调整。

<div class="loading-icon">
  <div class="loading-icon-inner"></div>
</div>

<style>
.loading-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  animation: spin 1s infinite linear;
}

.loading-icon-inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  animation: spin 1s infinite linear reverse;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

代码逻辑分析：

创建一个 <div> 元素作为Loading图标的外容器，并设置其样式，包括宽度、高度、边框和动画。
在外容器内创建一个 <div> 元素作为Loading图标的内容器，并设置其样式，包括宽度、高度、背景色和动画。
定义一个名为 spin 的CSS动画，它将内容器旋转360度，并无限重复。
通过 animation 属性将 spin 动画应用到内容器上，并指定动画持续时间、重复次数和播放方向。

2.1.2 进度条

进度条动画可以直观地显示加载进度，适用于需要较长时间加载数据的场景。进度条动画可以是水平或垂直的，并且可以根据需要进行自定义。

<div class="loading-icon">
  <div class="loading-icon-progress"></div>
</div>

<style>
.loading-icon {
  width: 200px;
  height: 20px;
  background-color: #ccc;
  border-radius: 5px;
}

.loading-icon-progress {
  width: 0%;
  height: 100%;
  background-color: #000;
  animation: progress 1s infinite linear;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>

代码逻辑分析：

创建一个 <div> 元素作为Loading图标的外容器，并设置其样式，包括宽度、高度、背景色和边框。
在外容器内创建一个 <div> 元素作为Loading图标的进度条，并设置其样式，包括宽度、高度、背景色和动画。
定义一个名为 progress 的CSS动画，它将进度条的宽度从0%增长到100%，并无限重复。
通过 animation 属性将 progress 动画应用到进度条上，并指定动画持续时间、重复次数和播放方向。

2.1.3 波浪

波浪动画具有流动感和美观性，适用于需要营造轻盈、活泼氛围的场景。波浪动画可以是单波浪或多波浪，并且可以根据需要进行自定义。

<div class="loading-icon">
  <div class="loading-icon-wave"></div>
</div>

<style>
.loading-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
  animation: wave 1s infinite linear;
}

.loading-icon-wave {
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: wave 1s infinite linear reverse;
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>

代码逻辑分析：

创建一个 <div> 元素作为Loading图标的外容器，并设置其样式，包括宽度、高度、背景色和动画。
在外容器内创建一个 <div> 元素作为Loading图标的波浪，并设置其样式，包括宽度、高度、背景色和动画。
定义一个名为 wave 的CSS动画，它将波浪从左向右移动100%，并无限重复。
通过 animation 属性将 wave 动画应用到波浪上，并指定动画持续时间、重复次数和播放方向。

2.1.4 跳动

跳动动画具有活泼性和吸引力，适用于需要营造趣味性或互动性的场景。跳动动画可以是上下跳动或左右跳动，并且可以根据需要进行自定义。

<div class="loading-icon">
  <div class="loading-icon-bounce"></div>
</div>

<style>
.loading-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  animation: bounce 1s infinite linear;
}

.loading-icon-bounce {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
  animation: bounce 1s infinite linear reverse;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

代码逻辑分析：

创建一个 <div> 元素作为Loading图标的外容器，并设置其样式，包括宽度、高度、背景色和动画。
在外容器内创建一个 <div> 元素作为Loading图标的跳动元素，并设置其样式，包括宽度、高度、背景色和动画。
定义一个名为 bounce 的CSS动画，它将跳动元素上下移动20px，并无限重复。
通过 animation 属性将 bounce 动画应用到跳动元素上，并指定动画持续时间、重复次数和播放方向。

3. Loading图标适应性

3.1 不同设备

Loading图标应在各种设备上保持一致的外观和行为，包括：

3.1.1 桌面电脑

尺寸： 通常较大，以确保在高分辨率屏幕上清晰可见。
动画： 可以更复杂和流畅，利用较大的屏幕空间。
交互： 可能支持点击或悬停反馈，以提供额外信息或控制。

3.1.2 笔记本电脑

尺寸： 比桌面电脑小，但仍应保持清晰可见。
动画： 应针对较小的屏幕进行优化，避免过于复杂或分散注意力。
交互： 与桌面电脑类似，但可能受到屏幕空间限制。

3.1.3 平板电脑

尺寸： 介于笔记本电脑和智能手机之间，需要适应不同的屏幕方向。
动画： 应简化并针对触摸交互进行优化。
交互： 通常支持触摸手势，例如点击、拖动和捏合。

3.1.4 智能手机

尺寸： 最小，需要在有限的空间内保持可见性。
动画： 应极其简单，避免干扰用户体验。
交互： 通常仅支持基本点击反馈，例如改变颜色或触发其他操作。

3.2 不同分辨率

Loading图标还应适应不同的屏幕分辨率，包括：

3.2.1 低分辨率

尺寸： 较小，以适应较小的屏幕面积。
动画： 应简单且易于识别，避免过于复杂或混乱。
交互： 可能受到限制，仅支持基本点击反馈。

3.2.2 中分辨率

尺寸： 介于低分辨率和高分辨率之间，提供平衡的清晰度和可见性。
动画： 可以更复杂一些，但仍应保持流畅和高效。
交互： 通常支持点击和悬停反馈，提供额外的信息或控制。

3.2.3 高分辨率

尺寸： 较大，以利用更大的屏幕空间。
动画： 可以非常复杂和流畅，提供引人注目的视觉效果。
交互： 支持广泛的点击和悬停反馈，增强用户体验。

4. Loading图标色彩选择

Loading图标的色彩选择对于传达信息和建立品牌形象至关重要。不同的颜色会引起不同的情绪和联想，因此选择合适的颜色对于设计有效的Loading图标至关重要。

4.1 单色

单色Loading图标使用一种颜色，通常是黑色、白色或灰色。

4.1.1 黑色

黑色Loading图标是经典且多功能的，它可以与任何背景颜色搭配，并传达出一种专业和严肃的感觉。然而，在浅色背景上，黑色Loading图标可能缺乏对比度，难以辨认。

.loading-icon {
  color: black;
}

4.1.2 白色

白色Loading图标在深色背景上效果很好，它可以传达出一种干净和现代的感觉。然而，在浅色背景上，白色Loading图标可能缺乏对比度，难以辨认。

.loading-icon {
  color: white;
}

4.1.3 灰色

灰色Loading图标是一种折衷的选择，它可以在浅色和深色背景上提供良好的对比度。灰色Loading图标可以传达出一种中立和专业的印象。

.loading-icon {
  color: gray;
}

4.2 多色

多色Loading图标使用多种颜色，可以创建更具视觉吸引力的效果。

4.2.1 蓝色

蓝色Loading图标通常与平静、信任和可靠性相关联。它适用于需要传达这些品质的场景，例如网站加载或数据加载。

.loading-icon {
  color: blue;
}

4.2.2 绿色

绿色Loading图标通常与增长、繁荣和更新相关联。它适用于需要传达这些品质的场景，例如操作处理或数据加载。

.loading-icon {
  color: green;
}

4.2.3 红色

红色Loading图标通常与危险、紧急和重要性相关联。它适用于需要传达这些品质的场景，例如错误信息或操作处理。

.loading-icon {
  color: red;
}

4.3 配色方案

除了单色和多色之外，Loading图标还可以使用配色方案，其中包含两种或多种颜色。

4.3.1 互补色

互补色是色轮上相对的颜色，例如蓝色和橙色、红色和绿色。互补色配色方案可以创建高对比度的效果，从而使Loading图标更加醒目。

.loading-icon {
  color: blue;
  background-color: orange;
}

4.3.2 相似色

相似色是色轮上相邻的颜色，例如蓝色和绿色、红色和橙色。相似色配色方案可以创建和谐的效果，从而使Loading图标更加美观。

.loading-icon {
  color: blue;
  background-color: green;
}

4.3.3 三色搭配

三色搭配使用三种颜色，通常是互补色或相似色。三色搭配配色方案可以创建更复杂的效果，从而使Loading图标更加引人注目。

.loading-icon {
  color: blue;
  background-color: orange;
  border-color: green;
}

5. Loading图标交互反馈

Loading图标除了提供视觉反馈外，还可以通过交互反馈增强用户体验。交互反馈允许用户与图标进行交互，从而获得更多信息或控制加载过程。

5.1 点击反馈

点击Loading图标可以触发各种反馈，例如：

5.1.1 改变颜色

点击Loading图标可以改变其颜色，以指示不同的状态。例如：

.loading-icon {
  color: #000;
}

.loading-icon:hover {
  color: #f00;
}

5.1.2 改变动画

点击Loading图标可以改变其动画，以提供更丰富的视觉反馈。例如：

.loading-icon {
  animation: spin 1s infinite linear;
}

.loading-icon:hover {
  animation: pulse 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

5.1.3 触发其他操作

点击Loading图标可以触发其他操作，例如：

打开一个对话框，显示加载进度。
刷新页面，重新加载内容。
停止加载过程。

document.querySelector('.loading-icon').addEventListener('click', () => {
  // 触发其他操作
});

5.2 悬停反馈

悬停在Loading图标上也可以触发各种反馈，例如：

5.2.1 显示提示信息

悬停在Loading图标上可以显示一个提示信息，提供有关加载过程的更多信息。

<div class="loading-icon" title="正在加载数据..."></div>

5.2.2 改变动画速度

悬停在Loading图标上可以改变其动画速度，以指示加载过程的不同阶段。例如：

.loading-icon {
  animation: spin 1s infinite linear;
}

.loading-icon:hover {
  animation: spin 0.5s infinite linear;
}

5.2.3 触发其他操作

悬停在Loading图标上可以触发其他操作，例如：

显示一个进度条，指示加载进度。
暂停加载过程。
取消加载过程。

document.querySelector('.loading-icon').addEventListener('mouseover', () => {
  // 触发其他操作
});

通过提供交互反馈，Loading图标可以增强用户体验，让用户更清楚地了解加载过程，并与之进行交互。

6. Loading图标使用场景

Loading图标的使用场景十分广泛，在不同的场景下，Loading图标的具体表现形式和交互方式也会有所不同。本章节将介绍Loading图标在不同使用场景中的应用，并分析其设计原则和最佳实践。

6.1 页面加载

页面加载是Loading图标最常见的应用场景。当用户访问一个网站或应用程序时，Loading图标通常会出现在页面加载过程中，以提示用户系统正在加载页面内容。

6.1.1 网站加载

网站加载时，Loading图标通常会出现在浏览器窗口的中心或顶部。图标的动画效果可以是旋转、进度条或波浪等，以吸引用户的注意力并缓解他们的等待焦虑。

6.1.2 应用加载

应用程序加载时，Loading图标通常会出现在应用程序启动画面或主界面。图标的动画效果可以是旋转、跳动或进度条等，以提示用户应用程序正在启动或加载数据。

6.2 数据加载

Loading图标也可以用于提示数据加载过程。当用户在网站或应用程序中执行操作时，例如查询数据库或下载文件，Loading图标可以出现在操作按钮旁边或页面中央，以提示用户系统正在加载数据。

6.2.1 数据库查询

当用户在网站或应用程序中执行数据库查询时，Loading图标通常会出现在查询按钮旁边或页面中央。图标的动画效果可以是旋转、进度条或波浪等，以提示用户系统正在查询数据。

6.2.2 文件下载

当用户在网站或应用程序中下载文件时，Loading图标通常会出现在下载按钮旁边或文件下载进度条中。图标的动画效果可以是旋转、进度条或波浪等，以提示用户系统正在下载文件。

6.3 操作处理

Loading图标还可以用于提示操作处理过程。当用户在网站或应用程序中执行操作时，例如提交表单或保存数据，Loading图标可以出现在操作按钮旁边或页面中央，以提示用户系统正在处理操作。

6.3.1 提交表单

当用户在网站或应用程序中提交表单时，Loading图标通常会出现在提交按钮旁边或页面中央。图标的动画效果可以是旋转、进度条或波浪等，以提示用户系统正在处理表单数据。

6.3.2 保存数据

当用户在网站或应用程序中保存数据时，Loading图标通常会出现在保存按钮旁边或页面中央。图标的动画效果可以是旋转、进度条或波浪等，以提示用户系统正在保存数据。

7. Loading图标自定义和扩展

7.1 自定义动画

7.1.1 使用CSS

使用CSS自定义Loading图标动画，可以实现更精细的控制和更丰富的效果。以下是一个使用CSS旋转动画的示例：

.loading-icon {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

7.1.2 使用JavaScript

使用JavaScript自定义Loading图标动画，可以实现更复杂的动画效果，例如暂停、加速或改变方向。以下是一个使用JavaScript实现跳动动画的示例：

const loadingIcon = document.querySelector('.loading-icon');

let animationInterval;

const startAnimation = () => {
  animationInterval = setInterval(() => {
    loadingIcon.classList.toggle('bounce');
  }, 500);
};

const stopAnimation = () => {
  clearInterval(animationInterval);
};

7.2 扩展功能

7.2.1 添加进度条

在Loading图标中添加进度条，可以更直观地显示加载进度。以下是一个使用HTML和CSS实现进度条的示例：

<div class="loading-icon">
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

.loading-icon {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #000;
}

7.2.2 显示错误信息

在Loading图标中显示错误信息，可以帮助用户及时了解加载失败的原因。以下是一个使用JavaScript实现错误信息显示的示例：

const loadingIcon = document.querySelector('.loading-icon');
const errorMessage = document.querySelector('.error-message');

const showErrorMessage = (error) => {
  loadingIcon.classList.add('error');
  errorMessage.textContent = error;
  errorMessage.style.display = 'block';
};

7.2.3 提供交互选项

在Loading图标中提供交互选项，例如暂停或取消加载，可以提升用户体验。以下是一个使用JavaScript实现暂停加载的示例：

const loadingIcon = document.querySelector('.loading-icon');
const pauseButton = document.querySelector('.pause-button');

let animationInterval;

const startAnimation = () => {
  animationInterval = setInterval(() => {
    loadingIcon.classList.toggle('bounce');
  }, 500);
};

const stopAnimation = () => {
  clearInterval(animationInterval);
};

pauseButton.addEventListener('click', () => {
  if (animationInterval) {
    stopAnimation();
  } else {
    startAnimation();
  }
});

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif