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

HTML5 加载动画（Loading Animation）

news 2025/6/8 4:22:49

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

初识结构体，整型提升及操作符的属性

目录 一、结构体成员访问操作符1.1 结构体二、操作符的属性&#xff1a;优先级、结合性2.1 优先级2.2 结合性C 运算符优先级 三、表达式求值3.1 整型提升3.2 算数转化 总结 一、结构体成员访问操作符 1.1 结构体 C语言已经提供了内置类型&#xff0c;如&#xff1a;char,shor…...

编程新知 2025/6/7 22:10:55

Github 2025-06-04 C开源项目日报 Top7

根据Github Trendings的统计，今日(2025-06-04统计)共有7个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量C项目7C++项目1Assembly项目1jq：轻量灵活的命令行JSON处理器 创建周期：4207 天开发语言：C协议类型：OtherStar数量：27698 个Fork数量：1538 …...

编程新知 2025/6/7 17:42:29

3步布局关键词让流量更精准

其实流量不精准&#xff0c;90% 是关键词没布局好&#xff01; 掌握这 3 个超实用技巧&#xff0c;让你的内容精准推给目标人群&#xff01; 第一步&#xff1a;深挖高潜力关键词 别再一股脑用 “好看”“好用” 这些泛词啦&#xff01;打开平台搜索框&#xff0c;输入核心词…...

编程新知 2025/6/7 16:45:47

1panel面板中部署SpringBoot和Vue前后端分离系统 【图文教程】

1panel面板中部署SpringBoot和Vue前后端分离系统 一&#xff0c;1panel面板部署二&#xff0c;安装OpenResty三&#xff0c;安装MySQL&#xff0c;Redis等Spring boot 运行依赖环境四&#xff0c;SpringBoot 应用配置及打包部署配置打包部署 五 &#xff0c;前端VUE应用配置打包…...

编程新知 2025/6/7 16:00:36

使用glide 同步获取图片

在 Glide 中&#xff0c;可以使用asBitmap()方法来获取图片的Bitmap对象&#xff0c;进而同步地加载图片。以下是具体示例&#xff1a; String imageUrl "https://example.com/image.jpg"; Bitmap bitmap Glide.with(context).asBitmap().load(imageUrl).apply(ne…...

编程新知 2025/6/7 15:06:03

NoSQL之redis哨兵

一、哨兵的核心功能 监控&#xff08;Monitoring&#xff09; 持续检查主节点和从节点的运行状态&#xff08;是否存活、延迟等&#xff09;。 自动故障转移&#xff08;Automatic Failover&#xff09; 当主节点不可用时&#xff0c;自动选举一个从节点升级为主节点。 更新…...

编程新知 2025/6/7 14:38:30

宝塔think PHP8 安装使用FFmpeg 视频上传

宝塔think PHP8 安装使用FFmpeg 一、 安装think PHP8二、安装 FFmpeg1&#xff0c;登录到宝塔面板。2&#xff0c;进入“软件商店”。3&#xff0c;搜索“FFmpeg”。4&#xff0c;选择版本点击安装。5&#xff0c;检查 FFmpeg 是否安装成功6&#xff0c; 在 ThinkPHP 8 中使用 …...

编程新知 2025/6/7 13:21:11

在NLP文本处理中，将字符映射到阿拉伯数字（构建词汇表vocab）的核心目的和意义

一、词汇表的核心作用 ‌数值化表示‌ 将离散的文本字符转换为连续的数值索引&#xff0c;使计算机能够处理非结构化的语言数据57。例如&#xff1a; "中国" → 2"a" → 5 ‌统一输入格式‌ 不同长度的文本通过填充/截断转换为固定长度的数字序列&#xf…...

编程新知 2025/6/7 11:58:43

Visual Studio问题记录

程序"xxx dotnet.exe"已退出&#xff0c;返回值为-2147450730 问deepseek&#xff1a;visual studio输出程序dotnet.exe已退出&#xff0c;返回值为-2147450730 dotnet.exe 编译时退出并返回错误代码 **-2147450730**&#xff08;十六进制 0x80008076&#xff09;&…...

编程新知 2025/6/7 9:56:53

在Docker里面运行Docker

Docker 凭借其轻量级和可移植的容器，无疑改变了软件开发和部署的世界。但如果我告诉你 Docker 本身可以在另一个 Docker 容器中运行，你会怎么想？没错！这个概念通常被称为“Docker Inside Docker”或“DinD”，它为开发人员和系统管理员开辟了一个全新的可能性领域。在这篇博…...

编程新知 2025/6/7 7:21:09