当前位置：极客教程 > CSS > CSS 问答 > CSS加载器

CSS加载器

CSS加载器

在网页开发中，CSS加载器是一种用来展示页面加载状态或者提供动画效果的工具。通过使用不同的CSS加载器，可以为用户提供更好的加载体验，增加页面的交互性和吸引力。本文将介绍一些常见的CSS加载器样式，并提供相应的示例代码。

1. 旋转加载器

旋转加载器是一种常见的加载器样式，通过旋转动画来展示页面正在加载的状态。下面是一个简单的旋转加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转加载器示例</title>
<style>
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes来实现旋转效果。页面加载时，会显示一个旋转的加载器。

2. 跳动加载器

跳动加载器是另一种常见的加载器样式，通过跳动动画来展示页面加载状态。下面是一个简单的跳动加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动加载器示例</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes来实现跳动效果。页面加载时，会显示一个跳动的加载器。

3. 环形加载器

环形加载器是一种简洁而美观的加载器样式，通过环形动画来展示页面加载状态。下面是一个简单的环形加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形加载器示例</title>
<style>
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: circle 2s linear infinite;
}

@keyframes circle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes来实现环形效果。页面加载时，会显示一个环形的加载器。

4. 点阵加载器

点阵加载器是一种简单而有趣的加载器样式，通过点阵动画来展示页面加载状态。下面是一个简单的点阵加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点阵加载器示例</title>
<style>
.loader {
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  margin: 0 5px;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
</style>
</head>
<body>
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类和dot类，通过CSS动画@keyframes来实现点阵效果。页面加载时，会显示一个点阵的加载器。

5. 波纹加载器

波纹加载器是一种流畅而优雅的加载器样式，通过波纹动画来展示页面加载状态。下面是一个简单的波纹加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>波纹加载器示例</title>
<style>
.loader {
  position: relative;
  width: 50px;
  height: 50px;
}

.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid #3498db;
  border-radius: 50%;
  animation: ripple 2s infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style>
</head>
<body>
<div class="loader">
  <div class="circle"></div>
</div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类和circle类，通过CSS动画@keyframes来实现波纹效果。页面加载时，会显示一个波纹的加载器。

6. 渐变加载器

渐变加载器是一种色彩丰富而炫酷的加载器样式，通过渐变动画来展示页面加载状态。下面是一个简单的渐变加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变加载器示例</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #3498db, #f39c12, #e74c3c, #9b59b6);
  background-size: 400% 400%;
  animation: gradient 2s infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes和渐变背景来实现渐变效果。页面加载时，会显示一个渐变的加载器。

7. 方块加载器

方块加载器是一种简单而直观的加载器样式，通过方块动画来展示页面加载状态。下面是一个简单的方块加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方块加载器示例</title>
<style>
.loader {
  display: flex;
  justify-content: center;
}

.square {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  margin: 0 5px;
  animation: slide 1s infinite;
}

@keyframes slide {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
</head>
<body>
<div class="loader">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类和square类，通过CSS动画@keyframes来实现方块滑动效果。页面加载时，会显示一个方块的加载器。

8. 线条加载器

线条加载器是一种简洁而线条的加载器样式，通过线条动画来展示页面加载状态。下面是一个简单的线条加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线条加载器示例</title>
<style>
.loader {
  display: flex;
  justify-content: center;
}

.line {
  width: 20px;
  height: 50px;
  background-color: #3498db;
  margin: 0 5px;
  animation: grow 1s infinite;
}

@keyframes grow {
  0%, 100% {
    height: 50px;
  }
  50% {
    height: 20px;
  }
}
</style>
</head>
<body>
<div class="loader">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类和line类，通过CSS动画@keyframes来实现线条生长效果。页面加载时，会显示一个线条的加载器。

9. 文字加载器

文字加载器是一种简单而直观的加载器样式，通过文字动画来展示页面加载状态。下面是一个简单的文字加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字加载器示例</title>
<style>
.loader {
  font-size: 24px;
  color: #3498db;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>
</head>
<body>
<div class="loader">Loading...</div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes来实现文字闪烁效果。页面加载时，会显示一个文字的加载器。

10. 自定义加载器

除了以上常见的加载器样式，我们还可以根据需求自定义加载器样式。下面是一个简单的自定义加载器示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义加载器示例</title>
<style>
.loader {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: custom 2s infinite;
}

@keyframes custom {
  0% {
    transform: scale(1);
    background-color: #3498db;
  }
  50% {
    transform: scale(1.5);
    background-color: #f39c12;
  }
  100% {
    transform: scale(1);
    background-color: #e74c3c;
  }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Output:

CSS加载器

在上面的示例代码中，我们定义了一个loader类，通过CSS动画@keyframes和自定义样式来实现加载器效果。页面加载时，会显示一个自定义的加载器。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程