HTML+CSS的一个进度条demo

最新推荐文章于 2022-08-08 10:10:09 发布
最新推荐文章于 2022-08-08 10:10:09 发布
阅读量590 收藏
点赞数
分类专栏： HTML+CSS+JS 文章标签： html css 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqr801225/article/details/4015532
版权

今天一个朋友问我一个问题，效果如图：

实现代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div style=" position:relative; border:1px #CCC solid; height:28px; width:500px; margin:0 auto; padding:1px">  
  10.   <div style=" background:#3F9; height:28px; width:200px"></div>  
  11.   <strong style=" position:absolute; width:500px; top:7px; text-align:center; overflow:hidden">你的经验是1000，下级是2000</strong>  
  12. </div>  
  13. </body>  
  14. </html>  

期待大家有更好的解决方案。

刘秋荣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 进度条demo.html
09-18
window.onload = function () { window.setInterval("ajaxpage('dummy/top.txt','top',{color:'blue',opacity:0.25})", 3000); window.setInterval("ajaxpage('dummy/left.txt','left',{color:'black', opacity:0.5, text:'loading', style:'text-decoration:blink;font-weight:bold;font-size:12px;color:white'},{color:'#fff', size:128, type:'o'})", 7500); window.setInterval("ajaxpage('dummy/right.txt','right',{color:'white', opacity:0.5},{color:'#00f', size:32, type:'c', iradius:10, weight:6})", 5500); window.setInterval("ajaxpage('dummy/bottom.txt','bottom',{color:'green',opacity:0.25})", 500); }
Javascript+CSS3实现进度条效果
10-21
在Web开发中，进度条是一个常见的用户界面元素，用于显示某个操作或过程的完成度。本文将详细介绍使用JavaScript结合CSS3技术实现网页进度条效果，包括了对clip属性的基础介绍和进度条效果的实现。 首先，我们了解...
进度条（html+css）
qq_46109465的博客
08-08 112
进度条（html+css）
进度条DEMO
W1948730080的博客
09-22 302
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta name=
html + css + jquery实现简单的进度条实例
weixin_30478923的博客
10-23 69
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title> ...
【HTML+CSS+JavaScript】实现进度条功能
weixin_30624825的博客
08-13 296
需求：实现进度条功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <style type="text/css"> .outter { ...
使用CSS3制作一个简单的进度条(demo)
01-21
这里只是一个小demo,一个用CSS3写的进度条。 如图所示： 具体代码如下： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <title> ...
13种创意html5+css3加载动画loading效果进度条
12-13
这个html5 loading效果中共有13种不同风格效果的加载动画loading效果进度条,支持ajax loading。第一款是youtube风格loading效果，完成这个demo用到了html5 svg和css3技术。
JS网页顶部进度条demo
weixin_30237281的博客
02-28 106
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面加载进度条</title> <script src="/Scripts/jquery-1.10.2.min.js...
html页面使用进度条
10-16
纯js和css的进度条, 可以匹配不带进度条的播放器使用, 可以用提供的js函数控制进度条
无尽的进度条3.0
11-26
无尽的进度条 无尽 喜欢的可以研究研究
进度条设计实例
03-01
该进度条设计新鲜，值得初学者学习和交流探讨，适用于初学者研究代码问题
CSS3绿色条纹loading进度条代码.zip
07-04
CSS3绿色条纹loading进度条代码，适合做响应式页面的加载过度页。
Android 水平无限进度条：SmoothProgressBar
08-13
NULL 博文链接：https://274137570-qq-com.iteye.com/blog/2300007
进度条实现简易demo
weixin_34232744的博客
05-25 205
直接上效果图： 浏览网站的时候看到的小demo，记下笔记。一个很简单的进度条，原代码处理较为全面，这里我改了一下便于新手查看。 html代码如下： <!--很简单的一个容器--> <div class="container"> <p>loading</p> <h1>0% &...
HTML5+CSS+JQuery 实现简单的进度条功能
weixin_30668887的博客
07-30 151
样式： <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2C; height:25px; border-radius: 10px; box-shadow: 5px...
无尽进度条android,无尽的进度条
weixin_35832025的博客
06-01 583
无尽的进度条是一款角色扮演冒险游戏，游戏中玩家可以设定自己的角色的一些属性，然后不需要你来操作了，游戏自己本身“玩”了起来，看着主角去进行各种冒险，击杀BOSS，各种没节操的游戏剧情，还有有趣的吐槽。无尽的进度条游戏特色：1、这是我见过最不正经的一款游戏，完全就是没有玩家发挥的余地，选完种族和职业，完全就是让“游戏”自己玩自己;2、刚开始刷怪比较慢，因为开始是没有任何装备和技能的，需要后面凭运气爆...
用html怎么制作进度条,使用CSS3制作一个简单的进度条(demo)
weixin_33514140的博客
06-05 1249
这里只是一个小demo,一个用CSS3写的进度条。如图所示：具体代码如下： new document .process-bar{width:100px;display:inline-block;*zoom:1;}.pb-wrapper{border:1px solid #cfd0d2;position:relative;background:#cfd0d2;border-radius: 8px;}...
xlsxwriter进度条+layui+PHP导出Excel数据导出，前端进度条实现方式
最新发布
06-07
1. 在前端页面中引入layui库，并添加一个进度条组件。 2. 在后端PHP代码中，使用xlsxwriter库生成Excel文件。 3. 在生成Excel文件的过程中，通过进度条的方式实时更新进度条的值。 4. 将生成的Excel文件返回给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值