当前位置： 首页 > news >正文

HTML5 加载动画（Loading Animation）

news 2026/2/9 23:30:20

加载动画（Loading Animation）详解

概述

加载动画是指在数据加载过程中，向用户展示的一种视觉效果，旨在提升用户体验，告知用户系统正在处理请求。它可以减少用户的等待焦虑感，提高界面的互动性。

常见的加载动画类型

  1. 旋转动画

    • 常见的加载指示器，通常以圆形图案旋转。

  2. 进度条

    • 显示数据加载的进度，通常是一个水平或垂直的条形。

  3. 跳动效果

    • 使用多个小圆点或其他图形，呈现出跳动的效果。

  4. 淡入淡出

    • 元素在加载时逐渐显现或消失的效果。

  5. 闪烁效果

    • 元素周期性地改变透明度，给人一种闪烁的感觉。

示例代码

以下是一个简单的加载动画示例，使用 CSS 制作一个旋转的加载指示器：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加载动画示例</title><style>.loader {border: 8px solid #f3f3f3; /* 外部边框颜色 */border-top: 8px solid #3498db; /* 顶部边框颜色 */border-radius: 50%; /* 圆形 */width: 60px; /* 宽度 */height: 60px; /* 高度 */animation: spin 1s linear infinite; /* 动画效果 */margin: 100px auto; /* 居中 */}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style>
</head>
<body><div class="loader"></div>
</body>
</html>

说明

  • CSS 属性：

    • border：设置加载指示器的边框样式。
    • border-radius：使元素呈现圆形。
    • animation：定义旋转动画的持续时间和效果。

  • 用户体验：

    • 加载动画能够有效地告知用户数据正在加载，减少等待时的焦虑感。

总结

加载动画是提升用户体验的重要工具，通过简单的 CSS 和 HTML，可以实现多种形式的加载效果。如果你有其他问题或需要更多示例，请告诉我！

相关文章：

HTML5 加载动画（Loading Animation）

加载动画&#xff08;Loading Animation&#xff09;详解 概述 加载动画是指在数据加载过程中&#xff0c;向用户展示的一种视觉效果&#xff0c;旨在提升用户体验&#xff0c;告知用户系统正在处理请求。它可以减少用户的等待焦虑感&#xff0c;提高界面的互动性。 常见的加…...

编程日记 2025/1/16 3:00:16

C语言进阶-2指针（一）

目录 1. 字符指针1.1 一般用法&#xff1a;字符指针指向单字符1.2 第二种用法&#xff0c;字符串首地址给指针变量1.3 习题,下面代码的输出结果是什么&#xff1f;为什么&#xff1f; 2. 指针数组2.1实例—— 字符指针数组2.2实例——整形指针数组2.3 例子&#xff0c;识别下下…...

编程日记 2025/1/16 2:57:12

【人工智能】用Python进行对象检测：从OpenCV到YOLO的全面指南

对象检测是计算机视觉领域的核心任务之一&#xff0c;广泛应用于视频监控、自动驾驶、智能安防等多个场景。随着深度学习技术的发展&#xff0c;基于传统方法的对象检测逐渐被基于神经网络的先进模型所取代。本文将系统地介绍如何使用Python进行对象检测&#xff0c;重点探讨了…...

编程日记 2025/1/16 2:53:08

《深度剖析算法优化：提升效率与精度的秘诀》

想象一下&#xff0c;你面前有一堆杂乱无章的数据&#xff0c;你需要从中找到特定的信息&#xff0c;或者按照一定的规则对这些数据进行排序。又或者&#xff0c;你要为一个物流公司规划最佳的配送路线&#xff0c;以降低成本和提高效率。这些问题看似复杂&#xff0c;但都可以…...

编程日记 2025/1/16 2:50:05

Mysql--重点篇--索引（索引分类，Hash和B-tree索引，聚簇和非聚簇索引，回表查询，覆盖索引，索引工作原理，索引失效，索引创建原则等）

索引是数据库中用于加速查询操作的重要机制。通过索引&#xff0c;MySQL可以快速定位到满足查询条件的数据行&#xff0c;而不需要扫描整个表。合理的索引设计可以显著提高查询性能&#xff0c;但不合理的索引可能会导致性能下降和磁盘空间浪费。因此&#xff0c;理解索引的工作…...

编程日记 2025/1/16 2:40:55

matlab使用 BP 神经网络进行数据预测的完整流程，包括数据读取、数据预处理等等

%% 初始化程序 warning off % 关闭报警信息 close all % 关闭所有图窗 clear % 清空变量 clc % 清空命令行 setdemorandstream(172) %设置随机种子为1%% 读取数据 data xlsread(Y.xlsx); %% 划分训练集…...

编程日记 2025/1/16 2:39:54

systemd-networkd NetworkManager 介绍

systemd-networkd 和 NetworkManager 的详细介绍 systemd-networkd 和 NetworkManager 都是 Linux 系统中常用的网络管理工具&#xff0c;但它们的设计目标和使用场景不同。以下是它们的详细介绍、功能、使用场景和差异。 1. systemd-networkd systemd-networkd 是一个由 syst…...

编程日记 2025/1/16 2:35:50

本地部署项目管理工具 Leantime 并实现外部访问

Leantime 是一款开源 AI 项目。它可以在本地直接运行大语言模型 LLM、生成图像、音频等。直接降低了用户使用AI的门褴。本文将详细的介绍如何利用 Docker 在本地部署 Leantime 并结合路由侠实现外网访问本地部署的 Leantime 。 第一步&#xff0c;本地部署安装 Leantime 1&am…...

编程日记 2025/1/16 2:32:47

PHP cURL 函数初学者完全指南

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/1/16 2:31:46

C#中的Array数组,List集合和ArrayList集合--07

目录 一.Array数组概念的简单理解 1.数组的初始化 2.数组的长度 3.数组的克隆和复制 4.数组的清空 5.数组的查找 6.数组的逆转 7.数组的拓展和缩减 8.数组的比较 9.数组的合并 10.使用Array类中的静态方法,如Array.Sort,Array.BinarySearch 等 二.Array数组进阶 1.二…...

编程日记 2025/1/16 2:30:45

基于深度学习的视觉检测小项目（十三） 资源文件的生成和调用

在使用 PySide6 进行开发时&#xff0c;管理应用程序的资源&#xff08;如图标、图片、字体、样式表、音视频等&#xff09;是一个常见的任务。PySide6 提供了一个工具 pyside6-rcc&#xff0c;它能够将资源文件&#xff08;.qrc&#xff09;编译成 Python 模块&#xff0c;然后…...

编程日记 2025/1/16 2:28:43

硬件实用技巧：TPS54331DR横杠标识识别1引脚

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/145116969 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

编程日记 2025/1/16 2:18:34

《C++11》nullptr介绍：从NULL说起

在C11之前&#xff0c;我们通常使用NULL来表示空指针。然而&#xff0c;NULL在C中有一些问题和限制&#xff0c;这就是C11引入nullptr的原因。本文将详细介绍nullptr的定义、用法和优点。 1. NULL的问题 在C中&#xff0c;NULL实际上是一个整数0&#xff0c;而不是一个真正的…...

编程日记 2025/1/16 2:16:32

自然语言处理基础：全面概述

自然语言处理基础&#xff1a;全面概述 什么是NLP及其重要性、NLP的核心组件、NLU与NLG、NLU与NLG的集成、NLP的挑战以及NLP的未来 自然语言处理&#xff08;NLP&#xff09;是人工智能&#xff08;AI&#xff09;中最引人入胜且具有影响力的领域之一。它驱动着我们日常使用的…...

编程日记 2025/1/16 2:15:31

网络安全的几种攻击方法

攻击方法 挂马: 就是在别人的网站文件里面放入网页木马或者是将代码潜入到对方正常的网页文件里&#xff0c;以使浏览者中马。 挖洞: 指漏洞挖掘。 加壳: 就是利用特殊的算法&#xff0c;将EXE可执行程序或者DLL动态连接库文件的编码进行改变&#xff08;比如实现压缩、加密&a…...

编程日记 2025/1/16 2:13:28

国内源快速在线安装qt5.15以上版本。（10min安装好）（图文教程）

参考文章&#xff1a;Qt6安装教程——国内源-CSDN博客 1、在国内源上下载qt在线安装工具 NJU Mirror 2、 将下载好的在线安装工具&#xff0c;放到C盘根目录&#xff0c; 2.1 打开windows Powershell&#xff08;WinX&#xff09;&#xff0c;下边那个最好。 输入两条指令&a…...

编程日记 2025/1/16 2:09:24

【pycharm发现找不到python打包工具,且无法下载】

发现找不到python打包工具,且无法下载 解决方法&#xff1a; 第一步&#xff1a;安装distutils&#xff0c;在CMD命令行输入&#xff1a; python -m ensurepip --default-pip第二步&#xff1a;检查和安装setuptools和wheel&#xff1a; python -m pip install --upgrade …...

编程日记 2025/1/16 2:02:17

C++ QT 自绘表盘

文章目录 效果图代码 效果图 代码 代码没什么好说的&#xff0c;直接上源码.h #pragma once#include <QWidget> #include <QPainter> #include <QResizeEvent> #include <QtMath> #include <QCoreApplication>class DialPlateWidget : public …...

编程日记 2025/1/16 2:01:16

数据科学与数据工程：两者的区别与交集

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…...

编程日记 2025/1/16 2:00:12

MAC AndroidStudio模拟器无网络

先确认PC端是正常访问网络的&#xff1b; 模拟器端修改Wifi设置&#xff1a;设置 - 网络和互联网 - WALN设置 按照上图修改&#xff1b; IP设置&#xff1a;从DHCP修改为静态&#xff0c;IP地址&#xff1a;10.0.2.16 &#xff0c;网关&#xff1a;10.0.2.2 &#xff0c; DNS…...

编程日记 2025/1/16 1:57:07

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33