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

【css酷炫效果】纯CSS实现进度条加载动画

article 2026/3/5 15:24:36

【css酷炫效果】纯CSS实现进度条加载动画

  • 缘
  • 创作背景
  • html结构
  • css样式
  • 完整代码
    • 基础版
    • 进阶版
  • 效果图

通过CSS渐变与背景位移动画，无需JavaScript即可创建流体动态进度条。
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490485

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

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

css样式

.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 100%;animation: flow 2s linear infinite;transform-origin: left;/* transform: scaleX(0.7); 设置当前进度70% */
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}

完整代码

基础版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>

进阶版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;background: repeating-linear-gradient(-45deg,#3498db,#3498db 10px,#2980b9 10px,#2980b9 20px);background-size: 200% 100%;box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);border-right: 3px solid rgba(255,255,255,0.3);transition: transform 0.3s ease-out;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>

效果图

在这里插入图片描述
在这里插入图片描述

相关文章：

【css酷炫效果】纯CSS实现进度条加载动画

【css酷炫效果】纯CSS实现进度条加载动画 缘创作背景html结构css样式完整代码基础版进阶版 效果图 通过CSS渐变与背景位移动画&#xff0c;无需JavaScript即可创建流体动态进度条。 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u…...

编程日记 2026/3/5 15:24:36

Feedback-Guided Autonomous Driving

Feedback-Guided Autonomous Driving idea 问题设定&#xff1a;基于 CARLA 的目标驱动导航任务&#xff0c;通过知识蒸馏&#xff0c;利用特权智能体的丰富监督信息训练学生传感器运动策略函数 基于 LLM 的端到端驱动模型&#xff1a;采用 LLaVA 架构并添加航点预测头&#…...

编程日记 2026/3/5 11:19:54

图解AUTOSAR_CP_WatchdogDriver

AUTOSAR WatchdogDriver模块详解 AUTOSAR MCAL层看门狗驱动模块详细解析 目录 1. 模块概述2. 架构位置 2.1. 组件架构 3. 主要功能4. API接口5. 配置参数 5.1. 配置模型 6. 错误代码7. 状态管理 7.1. 状态机 8. 处理流程 8.1. 活动流程 9. 操作序列 9.1. 典型操作序列 10. 硬件…...

编程日记 2026/3/5 6:56:13

大数据学习（65）- Hue详解

&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一…...

编程日记 2026/2/24 16:31:22

Maven 的核心包

由于前端项目不是核心&#xff0c;阅读 nexus-public 源代码似乎绕远路了。nexus-oss 社区版主要就是集成 maven 的上传包、认证、包解析、包存储这几个核心功能&#xff0c;前端实现重新可以使用新的现代前端工具来提高生产力。故重新疏理一下 maven 的核心机制&#xff0c;即…...

编程日记 2026/2/22 8:42:57

C语言学习笔记(第三部份)

说明&#xff1a;由于所有内容放在一个md文件中会非常卡顿&#xff0c;本文件将接续C_1.md文件的第三部分 整型存储和大小端 引例&#xff1a; int main(void) {// printf("%d\n", SnAdda(2, 5));// PrintDaffodilNum(10000);// PrintRhombus(3);int i 0;int arr[…...

编程日记 2026/3/5 14:42:59

C语言经典代码题

1.输入一个4位数&#xff1a;输出这个输的个位 十位 百位 千位 #include <stdio.h> int main(int argc, char const *argv[]) {int a;printf("输入一个&#xff14;位数&#xff1a;");scanf("%d",&a);printf("个位&#xff1a;%d\n"…...

编程日记 2026/2/22 6:27:54

深入理解蒸馏、Function Call、React、Prompt 与 Agent

AI基础概念与实操 一、什么是蒸馏二、如何理解Function Call、React、Prompt与Agent&#xff08;一&#xff09;Function Call与Agent&#xff08;二&#xff09;Agent中的React概念&#xff08;三&#xff09;Prompt与Agent的关联 实操演练function callprompt 一、什么是蒸馏…...

编程日记 2026/3/5 20:35:03

CVPR2025自动驾驶端到端前沿论文汇总

自动驾驶 文章目录 自动驾驶前言自动驾驶的轨迹预测论文端到端自动驾驶论文 前言 汇总CVPR2025自动驾驶前沿论文 自动驾驶的轨迹预测论文 Leveraging SD Map to Augment HD Map-based Trajectory PredictionModeSeq: Taming Sparse Multimodal Motion Prediction with Seque…...

编程日记 2026/3/4 20:05:44

Qt6.8实现麦克风音频输入音频采集保存wav文件

一.本文目的 实现在Qt中接收麦克风数据并保存为WAV文件，使用QAudioInput来录音，并使用QFile来保存数据到WAV文件。 开发环境：QT6.8 本文用极简代码实现，核心代码只需不到100行。 二.代码实现...

编程日记 2026/2/27 11:30:07

记录一个SQL自动执行的html页面

在实际工作场景中&#xff0c;需要运用到大量SQL语句更新业务逻辑&#xff0c;对程序员本身&#xff0c;写好的sql语句执行没有多大问题&#xff08;图1&#xff09;&#xff0c;但是对于普通用户来说还是有操作难度的。因此我们需要构建一个HTML页面&#xff08;图2&#xff0…...

编程日记 2026/3/6 7:12:26

分布式唯一ID

微服务 分布式唯一主键ID生成方案_微服务主键生成-CSDN博客 uid-generator-spring-boot-starter 教程-CSDN博客 https://github.com/baidu/uid-generator/blob/master/README.zh_cn.md GitCode - 全球开发者的开源社区,开源代码托管平台...

编程日记 2026/3/6 6:47:46

在图像/视频中裁剪出人脸区域

1. 在图像中裁剪人脸区域 import face_alignment import skimage.io import numpy from argparse import ArgumentParser from skimage import img_as_ubyte from skimage.transform import resize from tqdm import tqdm import os import numpy as np import warnings warni…...

编程日记 2026/3/5 14:54:01

LuaJIT 学习（5）—— string.buffer 库

文章目录 Using the String Buffer LibraryBuffer ObjectsBuffer Method Overview Buffer Creation and Managementlocal buf buffer.new([size [,options]]) local buf buffer.new([options])buf buf:reset()buf buf:free() Buffer Writersbuf buf:put([str|num|obj] [,……...

编程日记 2026/3/3 2:25:41

qt介绍图表 charts 一

qt chartsj基于Q的Graphics View框架&#xff0c;其核心组件是QChartView和QChart.QChartView是一个显示图表的独立部件&#xff0c;基类为QGraphicsView.QChar类管理图表的序列&#xff0c;图例和轴示意图。 绘制一个cos和sin曲线图&#xff0c;效果如下 实现代码 #include…...

编程日记 2026/3/2 6:10:12

Transformer：GPT背后的造脑工程全解析（含手搓过程）

Transformer&#xff1a;GPT背后的"造脑工程"全解析&#xff08;含手搓过程&#xff09; Transformer 是人工智能领域的革命性架构&#xff0c;通过自注意力机制让模型像人类一样"全局理解"上下文关系。它摒弃传统循环结构&#xff0c;采用并行计算实现高…...

编程日记 2026/3/5 17:13:54

S32K144入门笔记（十）：TRGMUX的初始化

目录 1. 概述 2. 代码配置 1. 概述 书接上回&#xff0c;TRGMUX本质上是一个多路选择开关&#xff0c;根据用户手册中的描述&#xff0c;它可以实现多个输入的选择输出&#xff0c;本篇文章将验证如何通过配置工具来生成初始化配置代码。 2. 代码配置 笔者通过配置TRGMUX实现…...

编程日记 2026/3/3 15:07:35

有了大模型为何还需要Agent智能体

一、什么是Agent&#xff1f; Agent&#xff08;智能体&#xff09; 是一种能感知环境、自主决策、执行动作的智能实体&#xff0c;当它与大语言模型&#xff08;如通义千问QWen、GPT&#xff09;结合时&#xff0c;形成一种**“增强型AI系统”**。其核心架构如下&#xff1a;…...

编程日记 2026/3/1 6:38:33

DNS主从服务器

1.1环境准备 作用系统IP主机名web 服务器redhat9.5192.168.33.8webDNS 主服务器redhat9.5192.168.33.18dns1DNS 从服务器redhat9.5192.168.33.28dns2客户端redhat9.5192.168.33.7client 1.2修改主机名和IP地址 web服务器 [rootweb-8 ~]# hostnamectl hostname web [rootweb-8…...

编程日记 2026/3/3 10:23:44

Flume详解——介绍、部署与使用

1. Flume 简介 Apache Flume 是一个专门用于高效地 收集、聚合、传输 大量日志数据的 分布式、可靠 的系统。它特别擅长将数据从各种数据源&#xff08;如日志文件、消息队列等&#xff09;传输到 HDFS、HBase、Kafka 等大数据存储系统。 特点&#xff1a; 可扩展&#xff1…...

编程日记 2026/3/3 18:02:22

一个简单的 **猜数字游戏** 的 C 语言例程

一个简单的 猜数字游戏 的 C 语言例程&#xff0c;代码包含详细注释&#xff0c;适合学习和练习基础语法&#xff1a; #include <stdio.h> #include <stdlib.h> #include <time.h> // 用于生成随机数种子int main() {int target, guess, attempts 0;srand…...

编程日记 2026/1/26 23:35:17

解决diffusers加载stablediffusion模型，输入prompt总是报错token数超出clip最大长度限制

1. StableDiffusion1.5 在加载huggingface中的扩散模型时&#xff0c;输入prompt总是会被报错超过clip的最大长度限制。 解决方案&#xff1a;使用compel库 from diffusers import AutoPipelineForText2Image import torch import pdb from compel import Compeldevice torc…...

编程日记 2025/12/25 8:16:47

mysql-查看binlog日志

mysql目前binlog_format默认是row格式&#xff0c; 找到binlog日志文件&#xff0c;通过命令查看 >mysqlbinlog binlog日志路径内容大致如下&#xff1a; /*!*/; # at 1163 #250317 14:13:43 server id 1 end_log_pos 1194 CRC32 0x09c8bcfd Xid 14 COMMIT/*!*…...

编程日记 2026/2/27 9:54:30

【Linux系列】文件压缩

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2026/3/2 2:42:20

微服务架构中10个常用的设计模式

​在当今的微服务架构中&#xff0c;常见的十种设计模式&#xff0c;分别是服务发现模式、API网关模式、断路器模式、边车模式、负载均衡模式、Saga事务模式、CQRS模式、分片模式、分布式日志跟踪模式、熔断与降级模式 。其中&#xff0c;服务发现模式十分关键&#xff0c;通过…...

编程日记 2026/3/2 10:24:37

Vue3组件+leaflet，实现重叠marker的Popup切换显示

一、前言 GIS开发过程中&#xff0c;经常需要绘制marker&#xff0c;这些marker很大概率会有坐标相同导致的叠加问题&#xff0c;这种情况下会降低使用体验感。所以我们可以将叠加的marker的popup做一个分页效果&#xff0c;可以切换显示的marker。 二、技术要点 我们以leaf…...

编程日记 2026/3/6 2:39:07

将COCO格式的物体检测数据集划分训练集、验证集和测试集

目录 导入所需库 定义数据集路径 创建输出目录 读取JSON注释文件 随机打乱图像列表 计算划分大小 复制图像到相应文件夹 完整代码 导入所需库 我们需要以下Python库&#xff1a; os&#xff1a;处理文件路径。 json&#xff1a;读取和写入JSON文件。 numpy&#xff…...

编程日记 2026/2/22 1:19:14

机器学习之距离度量方法

常见的距离度量方法及相关函数、图示如下： 1. 欧几里得距离（Euclidean Distance） 函数公式：对于两个 ( n ) 维向量 ( x = ( x 1 , x 2 , ⋯   ,...

编程日记 2026/2/16 2:47:28

3.1 在VisionPro脚本中添加CogGraphicLabel

本案例需要实现如下功能&#xff1a; 1.加载toolBlock 2.加载图片&#xff0c; 3.运行Block 4.VisionPro中添加脚本显示数值。 见下图&#xff1a;详细代码&#xff08;C#以及visionPro&#xff09;见下面链接&#xff1a; https://download.csdn.net/download/qq_340474…...

编程日记 2026/2/14 18:29:56

自动化APP测试APPium的元素等待

在使用Appium进行移动应用自动化测试时&#xff0c;有三种等待。 隐式等待driver.implicitly_wait() 显式等待&#xff08;常用&#xff09; time.sleep() 隐式等待&#xff08;Implicit Wait&#xff09; 应用场景&#xff1a; 当你希望对所有元素定位操作设置统一的超时…...

编程日记 2026/2/15 20:37:11