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

news2025/3/19 2:27:24

【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>

效果图

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2317525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Feedback-Guided Autonomous Driving

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

图解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. 硬件…

大数据学习(65)- Hue详解

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

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[…

深入理解蒸馏、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 一、什么是蒸馏…

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

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

qt介绍图表 charts 一

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

Transformer:GPT背后的造脑工程全解析(含手搓过程)

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

S32K144入门笔记(十):TRGMUX的初始化

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

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

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

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…

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

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

【Linux系列】文件压缩

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

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

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

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

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

机器学习之距离度量方法

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

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…

AI:Machine Learning Data Science

机器学习与数据科学 左侧 机器学习 Machine Learning 机器学习是一门多领域交叉学科&#xff0c;涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为&#xff0c;以获取新的知识或技能&#xff0c;重新组织已有的知…

软件需求分类、需求获取(高软46)

系列文章目录 软件需求分类&#xff0c;需求获取 文章目录 系列文章目录前言一、软件需求二、获取需求三、真题总结 前言 本节讲明软件需求分类、需求获取的相关知识。 一、软件需求 二、获取需求 三、真题 总结 就是高软笔记&#xff0c;大佬请略过&#xff01;

嵌入式Linux | 什么是 BootLoader、Linux 内核(kernel)、和文件系统?

01 什么是 BootLoader 呢&#xff1f; 它是个引导程序&#xff0c;也就是硬件复位以后第一个要执行的程序&#xff0c;它主要工作就是初始化操作系统运行的环境&#xff0c;比如说内存、定时器、缓冲器等&#xff0c;当这个工作做完以后&#xff0c;再把操作系统的代码加载…