HTML实现进度条/加载框模版

HTML加载

  • 一、环形加载 1
  • 二、环形加载 2
  • 三、波形加载
  • 四、百分比环形
  • 五、进度条

一、环形加载 1

<div class="loader"></div>
.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;
}@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }
}@keyframes spin {0% { transform: rotate(0deg);}100% {transform: rotate(360deg); }
}

二、环形加载 2

<div class="loader"></div>
.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid blue;border-bottom: 16px solid blue;width: 120px;height: 120px;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;
}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);}100% { -webkit-transform: rotate(360deg); }
}@keyframes spin {0% {transform: rotate(0deg);}100% { transform: rotate(360deg);}
}

三、波形加载

<div class="placeholder"><div class="loading"><span></span><span></span><span></span><span></span><span></span></div></div>
.placeholder {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;
}
.loading {width: 80px;height: 40px;margin: 0 auto;margin-top: 100px;
}
.loading span {display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load {0%, 100% {height: 40px;background: lightgreen;}50% {height: 70px;margin: -15px 0;background: lightblue;}
}
.loading span:nth-child(2) {-webkit-animation-delay: 0.2s;
}
.loading span:nth-child(3) {-webkit-animation-delay: 0.4s;
}
.loading span:nth-child(4) {-webkit-animation-delay: 0.6s;
}
.loading span:nth-child(5) {-webkit-animation-delay: 0.8s;
}

四、百分比环形

<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
window.onload = function() {var canvas = document.getElementById('canvas'),  // 获取canvas元素context = canvas.getContext('2d'),  // 获取画图环境,指明为2dcenterX = canvas.width/2,   // Canvas中心点x轴坐标centerY = canvas.height/2,  // Canvas中心点y轴坐标rad = Math.PI*2/100, // 将360度分成100份speed = 0.1; // 加载的快慢 // 绘制5像素宽的运动外圈function blueCircle(n) {context.save();context.strokeStyle = "#fff"; // 设置描边样式context.lineWidth = 5; // 设置线宽context.beginPath(); // 路径开始context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); // 用于绘制圆弧context.stroke(); // 绘制context.closePath(); // 路径结束context.restore();}// 绘制白色外圈function whiteCircle() {context.save();context.beginPath();context.lineWidth = 2; // 设置线宽context.strokeStyle = "red";context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);context.stroke();context.closePath();context.restore();}  // 百分比文字绘制function text(n) {context.save(); // 保证样式属性只运用于该段 canvas 元素context.strokeStyle = "#fff"; // 设置描边样式context.font = "40px Arial"; // 设置字体大小和字体// 字context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);context.stroke(); // 绘制context.restore();} // 动画循环(function drawFrame() {window.requestAnimationFrame(drawFrame);context.clearRect(0, 0, canvas.width, canvas.height);whiteCircle();text(speed);blueCircle(speed);if(speed > 100) speed = 0;speed += 0.1;}());
}

五、进度条

<!-- 打开弹窗按钮 -->
<button id="myBtn">装载</button><!-- 弹窗 -->
<div id="myModal" class="modal"><!-- 弹窗内容 --><div class="modal-content"><span class="close">&times;</span><div id="myProgress"><div id="myBar">10%</div>
</div>
/* 弹窗 (background) */
.modal {display: none; /* 默认隐藏 */position: fixed; /* 固定定位 */z-index: 1; /* 设置在顶层 */left: 0;top: 0;width: 100%; height: 100%;overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); 
}
#myProgress {width: 100%;background-color: #ddd;
}#myBar {width: 10%;height: 30px;background-color: #4CAF50;text-align: center;line-height: 30px;color: white;
}
/* 弹窗内容 */
.modal-content {background-color: #fefefe;margin: 15% auto; padding: 20px;border: 1px solid #888;width: 80%; 
}/* 关闭按钮 */
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;margin:-6% -4%; 
}.close:hover,
.close:focus {color: black;text-decoration: none;cursor: pointer;
}
// 获取弹窗
var modal = document.getElementById('myModal');// 打开弹窗的按钮对象
var btn = document.getElementById("myBtn");// 获取 <span> 元素,用于关闭弹窗
var span = document.querySelector('.close');// 点击按钮打开弹窗
btn.onclick = function() {modal.style.display = "block";move();
}
function move() {var elem = document.getElementById("myBar");   var width = 10;var id = setInterval(frame, 10);//frame是要执行的代码,10是10毫秒function frame() {if (width >= 100) {clearInterval(id);} else {width++; elem.style.width = width + '%'; elem.innerHTML = width * 1  + '%';}}
}
// 点击 <span> (x), 关闭弹窗
span.onclick = function() {modal.style.display = "none";
}// 在用户点击其他地方时,关闭弹窗
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}
}

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

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

相关文章

JavaScript 在浏览器和 Node.js 里的运行流程

浏览器中的 JavaScript 运行流程 加载与解析 HTML&#xff1a;浏览器首先加载 HTML 文档&#xff0c;并开始解析构建 DOM 树。这一步骤包括下载并解析所有的 HTML 标记。 发现 JavaScript 资源&#xff1a;当浏览器遇到 <script> 标签时&#xff0c;解析过程会暂停并开始…

docker被封禁,怎么拉取镜像,打包所有镜像

因为docker被国内封禁了&#xff0c;所以我把电脑上之前的镜像全部打包出来了 你们也可以打包&#xff0c;我提供一个脚本&#xff0c;你运行即可 export_docker.sh #!/bin/bash# 导出目录 EXPORT_DIR"docker_images_backup" mkdir -p "$EXPORT_DIR"# 获…

Calibre版图验证工具调用_笔记

Siemens EDA Calibre版图验证工具调用 采用Cadence Virtuoso Layout Editor直接调用Siemens EDA Calibre工具需要进行文件设置&#xff0c; 在用户的根目录下&#xff0c;找到.cdsinit文件&#xff0c; 在文件的结尾处添加以下语句即可&#xff0c;其中&#xff0c;calibre.skl…

vue3 computed 返回计算内容

const ItemPercent computed(() > {return (item: any) > {const num item.polishTaskList.filter((row: any) > row.carryOutState 1).lengthreturn (num / item.polishTaskList.length) * 100}}) 我现在有一个列表 列表中有每一项 根据每一项的数据 计算 或显…

Java 中常校验时间格式的方法

前言&#xff1a; 在实际项目开发中&#xff0c;跟时间参数打交道是必不可少的&#xff0c;为了保证程序的安全性、健壮性&#xff0c;一般都会对参数进行校验&#xff0c;其他类型的参数校验很好实现&#xff0c;那你知道时间参数的是怎么校验的吗&#xff1f;估计部分朋友在…

电表抄表软件是什么?

一、电表抄表软件的概念和作用 电表抄表软件&#xff0c;是一种致力于电力企业定制的数字化工具&#xff0c;用以远程控制搜集、管理方法与分析电表数据信息。它取代了传统人工抄表方法&#xff0c;大大提高了工作效率&#xff0c;降低了人为失误&#xff0c;并且能实时监控系…

【html】简单网页模板源码

大家每一次在写网页的时候会不会因为布局而困扰今天就给大家带来一个我自己亲自编写的网页的基本的模板大家可以直接去利用&#xff0c;大家也可以利用自己的想法去做空间的美化和完善。 源码&#xff1a; html: <!DOCTYPE html> <html lang"zh"><…

flask基础3-蓝图-cookie-钩函数-flask上下文-异常处理

目录 一&#xff1a;蓝图 1.蓝图介绍 2.使用步骤 3.蓝图中的静态资源和模板 二.cookie和session 1.cookie 2.flask中操作cookie 3.session 4.session操作步骤 三.请求钩子 四.flask上下文 1.介绍 2.请求上下文&#xff1a; 3.应用上下文 3.g对象 五&#xff1a;…

【Linux】进程控制2——进程等待(waitwaitpid)

1. 进程等待必要性 我们知道&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成"僵尸进程”的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为…

香港户口需要什么条件?有学历要求吗?最新香港落户途径详解!

香港户口需要什么条件&#xff1f;有学历要求吗&#xff1f;最新香港落户途径详解&#xff01; 由于香港放开“落户”窗口&#xff0c;想去香港发展或者想拿香港身份的朋友都想抓住这个机会赶紧申请。 只是&#xff0c;香港户口办理是有条件的&#xff0c;而且有学历要求&…

2024年上海高考作文题目(ChatGPT版)

一、2024年6月7日上海高考作文题目 生活中&#xff0c;人们常用认可度判别事物&#xff0c;区分高下。请写一篇文章&#xff0c;谈谈你对“认可度”的认识和思考。 要求&#xff1a;&#xff08;1&#xff09;自拟题目&#xff1b;&#xff08;2&#xff09;不少于800字。 二、…

Judging LLM-as-a-Judge with MT-Bench and Chatbot Arena阅读笔记

使用 MT-Bench 和 Chatbot Arena 评估 LLM 作为评审的效果 Lianmin Zheng1∗ Wei-Lin Chiang1∗ Ying Sheng4∗ Siyuan Zhuang1 Zhanghao Wu1 Yonghao Zhuang3 Zi Lin2 Zhuohan Li1 Dacheng Li13 Eric P. Xing35 Hao Zhang12 Joseph E. Gonzalez1 Ion Stoica1 1 UC Berkele…

VScode中连接并使用docker容器

前提条件&#xff1a; 1.在windows下安装Docker Desktop(方法可见下面的教程) Docker Desktop 安装使用教程-CSDN博客 2.在vscode安装3个必备的插件 3.先在ubuntu中把docker构建然后运行 4.打开vscode&#xff0c;按下图顺序操作 调试好之后上传到git上&#xff0c;然后后面…

《人人都是产品经理》笔记1:什么是产品?怎么入行?

《人人都是产品经理》笔记1&#xff1a;什么是产品&#xff1f;怎么入行&#xff1f; 产品是什么&#xff1f;产品经理、产品管理&#xff1f;真的想做产品经理吗&#xff1f;全书结构示意图 从写这篇文章开始&#xff0c;是个人第二次对该书进行阅读&#xff0c;在此进行个人的…

[Python学习篇] Python输入

关键字 input 语法&#xff1a;input("提示信息") 特点 当程序执行到input&#xff0c;等待用户输入&#xff0c;输入完成之后才能继续向下执行。input接收用户输入后&#xff0c;一般存储到变量中&#xff0c;方便使用。input会把接收到的任意用户输入的数据都当做…

老杨说运维 | 基于数据驱动的智观能力建设(文末附现场视频)

本期回顾来自擎创科技创始人兼CEO杨辰的现场演讲 青城山脚下的滔滔江水奔涌而过&#xff0c;承载着擎创一往无前的势头&#xff0c;共同去向未来。2024年6月&#xff0c;双态IT成都用户大会擎创科技“数智化可观测赋能双态运维”专场迎来了完满的收尾。 “没有2200年前李冰率众…

Java集合自测题

文章目录 一、说说 List , Set , Map 三者的区别&#xff1f;二、List , Set , Map 在 Java 中分别由哪些对应的实现类&#xff1f;底层的数据结构&#xff1f;三、有哪些集合是线程不安全的&#xff1f;怎么解决呢&#xff1f;四、HashMap 查询&#xff0c;删除的时间复杂度五…

word怎么单页横向设置(页码不连续版)

打开word&#xff0c;将光标放在第一页的最后位置。 然后点击布局下的分隔符&#xff0c;选择下一页。 将光标放在第二页的开头&#xff0c;点击布局下的纸张方向&#xff0c;选择横向即可。 效果展示。 PS&#xff1a;如果那一页夹在两页中间&#xff0c;那么在…

Python发送Outlook邮件的步骤流程有哪些?

Python发送Outlook邮件的技巧&#xff1f;如何使用Python发信&#xff1f; 在Python中使用SMTP协议发送邮件到Outlook邮箱是一项常见的任务。AokSend将介绍如何通过Python编程语言实现这一过程&#xff0c;从准备工作到实际发送邮件的具体步骤。 Python发送Outlook邮件&#…

构建汛期智慧水利新生态:EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…