HTML实现加载进度条的10中效果

最新推荐文章于 2024-06-09 09:49:42 发布
最新推荐文章于 2024-06-09 09:49:42 发布
阅读量989 收藏 3
点赞数
文章标签： css3 html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyhcczz/article/details/105714256
版权

首先10种效果图如下：
在这里插入图片描述
接下来简单分析一下进度条最重要的两个属性控制：
1.@keyframes
语法规则：@keyframes turn{ 0%{ transform: rotate(0deg); border-color: lightgreen; } 50%{ transform: rotate(180deg); border-color: lightyellow; } } 2.@keyframes displear{ 0%{ transform: translateX(0); opacity: 1; } 50%{ transform: translate(80px,-100%); opacity: 0; } 100%{ opacity: 1; } }
2.animation
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>进度条</title>
	<meta charset="utf-8"/>
	<style type="text/css">
background-color : grey;

div{
	margin : 25px;
}
#caseVerte,#blue,#border,#yuan,#loader,#loading1,.loading4,.load1,.load2,.load3{
 float:left;
margin-right: 25px;
margin-top: 20px;
}
#caseVerte {

background-color : #30bf82 ;
height : 140px ;
width : 150px;
padding-top : 10px ;
}

#caseVerte #load {

color : #fbfbfb ;

font- family : calibri ;

text-align : center ;
}

#caseVerte #case1 
{
height : 10px;

width : 100px;

background-color : #fbfbfb;
animation : case1 2.25s infinite infinite ;
}

@keyframes case1 {

0% {width : 0%; }

50% {width : 90px; }

100% {width : 0%;}
}
#caseVerte #case2{

height : 10px;

width : 10px;

background-color : #fbfbfb;

animation : case2 2s infinite ;
}

@keyframes case2 {
0% {width : 0%; }

50% {width : 100px; }

100% {width : 0%;}

}
#caseVerte #case3{

height : 10px;

width : 10px;

background-color : #fbfbfb;

animation : case3 1.75s infinite ;

}

@keyframes case3{
0% {width : 0%; }

50% {width : 95px; }

100% {width : 0%;}

}
#caseVerte #case4{

height : 10px;

width : 10px;

background-color : #fbfbfb;

animation : case4 2.5s infinite ;

}
@keyframes case4{
0% {width : 0%; }

50% {width : 80px; }

100% {width : 0%;}

}
#caseVerte #case5{

height : 10px;

width : 10px;

background-color : #fbfbfb;

animation : case5 1.5s infinite ;

}
@keyframes case5{
0% {width : 0%; }

50% {width : 105px; }

100% {width : 0%;}

}

#blue{

background-color : blue;height : 140px ;

width : 150px;

padding-top : 10px ;
}

#blue #load {

color : blue ;

font- family : calibri ;

text-align : center ;
}

#blue #list1 {
height : 10px;

width : 100px;

background-color :  yellow;
animation : list1 2.25s infinite infinite ;
}

@keyframes list1 {

0% {width : 0%; }

50% {width : 90px; }

100% {width : 0%;}
}
#blue #list2{

height : 10px;

width : 10px;

background-color :yellow;

animation : list2 2s infinite ;
}

@keyframes list2 {
0% {width : 0%; }

50% {width : 100px; }

100% {width : 0%;}

}
#blue #list3{

height : 10px;

width : 10px;

background-color : yellow;

animation : list3 1.75s infinite ;

}

@keyframes list3{
0% {width : 0%; }

50% {width : 95px; }

100% {width : 0%;}

}
#blue #list4{
height : 10px;
width : 10px;
background-color :yellow;
animation :list4 2.5s infinite ;

}
@keyframes list4{
0% {width : 0%; }

50% {width : 80px; }

100% {width : 0%;}

}
#blue #list5{

height : 10px;
width : 10px;
background-color :  yellow;
animation : list5 1.5s infinite ;
}
@keyframes list5{
0% {width : 0%; }

50% {width : 105px; }

100% {width : 0%;}

}
#border{
	background-color : black;
	height : 140px ;
width : 150px;
padding-top : 10px ;
}/*四边不同颜色色*/

#border  #load {

color : black ;

font- family : calibri ;

text-align : center ;
}

#border .lst1{
height : 10px;
width : 10px;
background-color :yellow;
margin: 40px 10px 40px  0px;
border-radius:20px;
animation : lst1  2s infinite ;
animation-delay: 2s;
}
@keyframes lst1 {
0% {width : 0%; }
25% {width : 50px;}
50%{width : 100px;}
100% {width : 0%;}
}
#yuan{
background-color :#752e0e;
height : 140px ;
width : 150px;
padding-top : 10px ;
}
#yuan  #load {
color : white ;
font- family : calibri ;
text-align : center ;
}
#yuan #circle{
width: 30px;
height: 30px;
border-radius: 100%;
margin: 40px 10px 40px  0px;
background-color :yellow;
animation-name: around;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes around{
0%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translate(80px,-50%);
opacity: 0;
  }
}  
#loader #load{
color :red;
font- family : calibri ;
text-align : right;
}
#loader{
background-color :red;
height : 140px ;
width : 150px;
padding-top : 10px ;
}
#loader #first1{
	margin: 30px;
}

#loader #first2{
	margin:40px 40px 0 20px;
}
#loader #first3{
position:relative;
left:100px;
}
#loader #first1,#loader #first2,#loader #first3{
width: 10px;
height: 10px;
border-radius: 100%;
background-color :white;
animation-name: displear;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes displear{
	0%{
		transform: translateX(0);
		opacity: 1;
	}
	50%{
		transform: translate(80px,-100%);
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
 #loading1{
            width:150px;
            height:140px;
            padding-top: 10px;
            text-align:center;
            background-color: green;
        }
        #loading1 span{
            width:5px;
            height:100%;
            display:inline-block;
            background:#67CF22;;
            animation: mymove 1.2s infinite ease-in-out;
            -webkit-animation:mymove 1.2s infinite ease-in-out;
             /*  
                mymove代表动画名字
                1.2s代表执行时间
                infinite表示一直循环执行
                ease-in-out表示先慢后快的缓动
            */
        }
        #loading1 >span:nth-child(2){
            -webkit-animation-delay:-1.0s;
            animation-delay:-1.0s;
        }
        #loading1 >span:nth-child(3){
            -webkit-animation-delay:-0.9s;
            animation-delay:-0.9s;
        }
        #loading1 >span:nth-child(4){
            -webkit-animation-delay:-0.8s;
            animation-delay:-0.8s;
        }
        
    #loading1 >span:nth-child(5){
            -webkit-animation-delay:-0.7s;
            animation-delay:-0.7s;
        }
        @keyframes mymove{
            0%{transform:scaleY(0.4);}
            25%{transform:scaleY(1.0);}
            50%{transform:scaleY(0.4);}
            75%{transform:scaleY(0.4);}
            100%{transform:scaleY(0.4);}
        }
        @-webkit-keyframes mymove{
            0%{transform:scaleY(0.4);}
            25%{transform:scaleY(1.0);}
            50%{transform:scaleY(0.4);}
            75%{transform:scaleY(0.4);}
            100%{transform:scaleY(0.4);}
        }
         .loading4{
            width:150px;
            height:140px;
            /*margin:50px auto;*/
            background-color: #000000;
            padding-top: 10px;
            text-align: center;
        }
        .loading4 >div{
          width: 18px;
          height: 18px;
          border-radius: 100%;
          display:inline-block;
          background-color: red;
          -webkit-animation: three 1.4s infinite ease-in-out;
          animation: three 1.4s infinite ease-in-out;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
        .loading4 .three1{
          -webkit-animation-delay: -0.30s;
          animation-delay: -0.30s;
        }
        .loading4 .three2{
          -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
        }
        @-webkit-keyframes three {
          0%, 80%, 100% {-webkit-transform: scale(0.0) }
          40% { -webkit-transform: scale(1.0) }
        }
        @keyframes three {
          0%, 80%, 100% {-webkit-transform: scale(0.0) }
          40% { -webkit-transform: scale(1.0) }
        }
        .loading5{
	width:100px;
	height:100px;
	border-radius: 50%;
	margin-top: 100px
	margin:0 auto;
	position:relative；
	padding-top:10px;
border:5px solid lightgreen;
animation: turn 2s linear infinite;
}
.loading5 span{
	display:inline-block;
	width:30px;
	height:30px;
	border-radius: 100%;
	background-color: lightgreen;
	position:absolute;
	left:50%；
	margin-top:-15px;
	margin-left:-15px;
	animation: changeColor 1.5s linear infinite;
}
@keyframes changeColor{
0%{
	background-color: lightgreen;
}
100%{
	background-color: lightyellow;
 }
}
@keyframes turn{
	0%{
		transform: rotate(0deg);
		border-color: lightgreen;
	}
	50%{
		transform: rotate(180deg);
		border-color: lightyellow;
	}
	}
	.load1{
	width:150px;
	height:140px;
	padding-top: 10px;
	background-color: #752e0e;
}	
.load2{
	width:150px;
	height:140px;
	padding-top: 10px;
	background-color: lightblue;
}	
.loading6{
            width: 150px;
            height: 4px;
            border-radius: 2px;
           position: relative;
            background: green;
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
        }
        .loading6 span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            margin-top: -7px;
            margin-left:-8px;
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: green;
            }
            100%{
                background:blue;
            }
        }
        @-webkit-keyframes changePosition{
            0%{
                background: green;
            }
            100%{
                margin-left: 142px;
                background: blue;
            }
        }
        .load3{
	width:150px;
	height:140px;
	padding-top:10px;
	background-color:#9093f8;
}
.loading10{
position: relative;
width: 80px;
height: 80px;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
border-radius: 50px;
background-color: rgba(231, 76, 60, 0.1);
border-width: 40px;
border-style: double;
border-color:transparent white;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50% ;
-webkit-animation: turn 2s linear infinite;
animation: turn 2s linear infinite;
}
@keyframes turn{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

</style>
</head>
<body>	
<div id= "caseVerte">
<div id= "case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="load"></div>
<p> loading...</p>
</div>
<div id= "blue">
<div id= "list1"></div>
<div id="list2"></div>
<div id="list3"></div>
<div id="list4"></div>
<div id="list5"></div>
<div id="load"></div>
<p> loading...</p>
</div>
<div id="border">
	<div class="lst1"></div>
	<div id="load"></div>
	<p>loading..</p>
</div>
<div id="yuan">
	<div id="circle"></div>
	<div id="load"></div>
	<p>loading..</p>
</div>
 <div id="loader">
	<div id="first1"></div>
	<div id="first2"></div>
	<div id="first3"></div>
	<div id="load"></div>
	<p>loading..</p>
</div> 

<div id="loading1">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <p>loading..</p>
 </div>
 <div class="loading4">
    <div class="three1"></div>
    <div class="three2"></div>
    <div class="three3"></div>
    <p>loading..</p>
 </div>
 <div class="load1">
<div class="loading5">
		<span></span></div>
		<p>loading..</p>
   </div>
   <div class=load2>
   <div class="loading6"><span></span></div>
 <p>loading..</p>
   </div>
     <div id="inner">
<div id="spiner"></div>

<div id= "iller"></div>

<div id="masker"></div>
</div>
<div class="load3">
<div class="loading10"></div>
<p>loading..</p>
</div>
</body>
</html>


在这里插入代码片
wyhcczz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 实现页面加载进度,网页加载进度条实现方案
weixin_33416900的博客
06-03 3724
原标题：网页加载进度条实现方案这次源码时代H5学科老师跟大家一起来总结下在web应用中常见的加载进度条实现方案。随着html5的普及，各种css3动画及js特效在网页中也是层出不穷，PC端加载数据的速度还是比较快的，但是对于移动端设备而言则相对要慢不少，如果图片或者脚本没有加载完，用户在操作中就可能发生各种问题，因此我们需要对数据加载进行侦测，以更加人性化的方法将网页程序内容展现给用户，实现更佳的...
HTML5加载进度条百分比特效
06-12
效果描述： jquery.progress.js插件，支持html5 SVG loading动画加载效果 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
简洁大气带进度条的URL跳转页面HTML源码
01-02 452
简介： 简洁大气带进度条的URL跳转页面HTML源码可用于网站内链接跳转,或者广告链接跳转 下载地址： 图片：
HTML实现进度条/加载框模版
最新发布
joe_g12345的博客
06-09 870
【代码】HTML实现进度条/加载框模版。
HTML实现进度条
alpha105的博客
01-06 3178
HTML实现进度条
页面实现加载进度条
小雪的博客
09-29 3131
页面实现进度条的完整代码实现
单页html进度条跳转,直接拿来用的页面跳转进度条JS实现
weixin_39944542的博客
06-04 726
本文实例介绍了基于javascript实现的页面跳转进度条，分享给大家供大家参考，具体内容如下效果图：具体代码：open代码style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #99ccff; BORDER-LEFT: medium none; WIDTH: 400px; BORDER...
html5实现进度条效果
04-03
这个"html5实现进度条效果"项目提供了一个简单且美观的解决方案，适合开发者们学习和应用到自己的项目中。 在HTML5中，我们可以使用`<progress>`元素来创建进度条。这个元素允许我们展示任何任务或过程的进度，如...
HTML5实现自带进度条和滑块滑杆效果
09-27
在本文中，我们将深入探讨如何使用HTML5的`<progress>`标签和`<input type="range">`来实现自带进度条和滑块滑杆效果。 ### 一、HTML5 自带进度条 HTML5 的 `<progress>` 标签用于表示一个任务的进度，它提供了一...
用CSS+JS实现的进度条效果效果
10-30
"用CSS+JS实现的进度条效果效果" 本文将详细讲解如何使用CSS和JS实现进度条效果，包括HTML、CSS和JS代码的编写。 首先，我们需要编写HTML代码来创建进度条的基本结构，代码如下： ``` <div id="loading"> ...
bootstrap实现动态进度条效果
12-30
Bootstrap的动态进度条： html: 创建一个modal 这里使用fade先将modal隐藏起来，然后modal里面嵌入progress 代码很简单 <!--窗口声明：--> <!-- 内容声明 -->
jquery实现加载进度条提示效果
12-28
本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <...
html 显示状态条,网页加载时页面显示进度条加载完成之后显示网页内容
weixin_36081187的博客
05-30 579
现在网上有很多网页加载进度条 ，但大多都是时间固定的。下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。Dim Bar, SPBar = 0SP = 100Function Window_onLoad()Bar = 95SP = 10End FunctionFunction Count()if Bar < 100 The...
【HTML】- 网页加载进度条
baidu_hxl的博客
07-10 6061
通过定时器以及加载状态事件制作进度条
html进度条实现原理,HTML5效果：进度条的实现
weixin_39835991的博客
05-30 911
为了演示方便，在第一个例子中，我们通过Javascript去控制时间从而不断地更新进度，并且允许用户通过点击按钮开始进度条的更新，一旦进度条开始更新，则按钮变得不可点击。如果进度条完成的话，则又可以点击按钮。下面我们开始一步步实做这个效果：1)创建HTML5 页首先创建基本的HTML 5基本框架页2) 增加进度条标签首先，在body部分，添加如下的进度条的标签：Task progress:HTML...
如何用HTML语言设计进度条,html5代码如何实现进度条功能？（示例）
weixin_36011546的博客
06-02 1104
本篇文章主要介绍html5代码如何实现进度条功能，希望对大家有所帮助。html5代码实现进度条功能具体代码示例如下：/*实现进度条的功能*/下载进度：/*js代码*/var pg=document.getElementById('pg');setInterval(function(e){if(pg.value!=100) pg.value++;else pg.value=0;},100);注： 标...
html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码
weixin_33676046的博客
05-31 635
特效描述：html5 css3 圆形进度条 倒计时 页面跳转代码。html5 css3进度条倒计时动画特效代码结构1. HTML代码html5+css3进度条倒计时动画特效body {margin: 0;padding: 0;background: #E6EAEB;font-family: Arial, '微软雅黑', '宋体', sans-serif}.alert-box {display: n...
html怎么控制进度条,HTML如何实现进度条？附源码
weixin_32240065的博客
06-23 3557
进度条在网页开发中还是很常见的，比如当我们下载某个文件时，会显示下载进度。那么这篇文章 w3cschool 小编来教你 HTML 如何实现进度条。progress 标签在 HTML5 中，有专门的特性来实现进度条，那就是​​标签。但是在使用进度条特性时，我们必须为它设定交互才能实现动态进度条。那么我们一起来看下如何使用 progress 吧。HTML实现进度条 - 编程狮(w3cschool.cn...
html动态进度条代码_进度条滚动效果Css3
weixin_30277297的博客
01-20 1902
效果：Css3实现进度条展示效果https://www.zhihu.com/video/1184507155678535680关键字：linear-gradient第一步：需要给一个div的框框<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
html加载页面完成进度条效果
05-25
可以通过以下步骤实现HTML页面加载完成进度条效果： 1. 创建一个具有进度条样式的HTML元素，例如： ``` <div id="progress"></div> ``` 2. 在CSS中定义进度条样式： ``` #progress-bar { width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值