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

HTML5 加载动画（Loading Animation）

news 2025/11/11 23:58:54

加载动画（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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/10/18 13:49:11

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/11/7 10:17:31

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/11/7 10:17:34

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/11/7 13:59:49

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/11/7 20:30:28

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/11/7 15:45:31

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/11/8 2:29:54

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/11/10 21:34:18