HTML5制作Loading加载效果

最新推荐文章于 2024-05-16 16:54:07 发布
最新推荐文章于 2024-05-16 16:54:07 发布
阅读量1k 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013365312/article/details/17792977
版权

HTML5制作Loading加载效果，预览可以show and stop，制作一个Loading动画，未使用任何第三方素材，纯HTML和CSS3实现

 

<!doctype html> 
    <html> 
      <head> 
        <meta http-equiv="content-type" content="GBK"/> 
        <title>HTML5-loading</title> 
        <script type="text/javascript"> 
        function loading(canvas,options){  
          this.canvas = canvas;  
          if(options){  
            this.radius = options.radius||12;  
            this.circleLineWidth = options.circleLineWidth||4;  
            this.circleColor = options.circleColor||'lightgray';  
            this.dotColor = options.dotColor||'gray';  
          }else{        
            this.radius = 12;  
            this.circelLineWidth = 4;  
            this.circleColor = 'lightgray';  
            this.dotColor = 'gray';  
          }  
        }  
        loading.prototype = {  
          show:function (){  
            var canvas = this.canvas;  
            if(!canvas.getContext)return;  
            if(canvas.__loading)return;  
            canvas.__loading = this;  
            var ctx = canvas.getContext('2d');  
            var radius = this.radius;        
            var rotators = [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}];        
            var me = this;  
            canvas.loadingInterval = setInterval(function(){  
              ctx.clearRect(0,0,canvas.width,canvas.height);           
              var lineWidth = me.circleLineWidth;  
              var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};            
              ctx.beginPath();  
              ctx.lineWidth = lineWidth;  
              ctx.strokeStyle = me.circleColor;  
              ctx.arc(center.x,center.y,radius,0,Math.PI*2);  
              ctx.closePath();  
              ctx.stroke();  
              for(var i=0;i<rotators.length;i++){          
                var rotatorAngle = rotators[i].currentAngle||rotators[i].angle;              
                //在圆圈上面画小圆  
       var rotatorCenter = {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)};              
                var rotatorRadius = rotators[i].radius;  
                ctx.beginPath();  
                ctx.fillStyle = me.dotColor;  
                ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2);  
                ctx.closePath();  
                ctx.fill();  
                rotators[i].currentAngle = rotatorAngle+4/radius;  
              }  
            },50);  
          },  
          hide:function(){  
            var canvas = this.canvas;  
            canvas.__loading = false;  
            if(canvas.loadingInterval){  
              window.clearInterval(canvas.loadingInterval);  
            }  
            var ctx = canvas.getContext('2d');  
            if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);  
          }  
        };  
        </script> 
      </head> 
      <body> 
        <canvas id="canvas" width="300" height="100" style="border:1px solid #69c"></canvas> 
        <p> 
        <input type="button" οnclick="loadingObj.hide()" value="HideLoading"/> 
        <input type="button" οnclick="loadingObj.show()" value="showLoading"/> 
        </p> 
        <script> 
        var loadingObj = new loading(document.getElementByIdx_x('canvas'),{radius:8,circleLineWidth:3});  
        loadingObj.show();  
        </script> 
      </body> 
    </html>

smalltree_it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css实现Loading动画
Y_one的博客
06-16 988
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .Loading{ width: 150px; height: 150px; position: absolute;
H5多种加载效果loading，H5页面加载中动画
03-07
H5多种加载效果loading，H5页面加载中动画，炫酷的加载中动画
H5非常炫酷的加载特效loading
12-08
H5非常炫酷的加载特效loading,简单实用
欢迎使用CSDN-markdown编辑器
aiwodejiulai的专栏
07-30 248
CSS3 animation（1） 平面旋转rotatetransform：rotate()：指定对象的2D rotation（2D旋转） transform:(180deg) 就是转180度的意思，当然这是静态的。如何要让它旋转起来呢，那就需要和animation配合。 比如从0度 5秒内转到360度div { ... animation:myfirst 5s linear infinite;
H5端加载中状态的统一管理，避免反复出现loading状态
最新发布
u013699971的专栏
05-16 267
1、在统一封装请求前面添加一个全局变量loadingCount=0，用来计算并发请求的数量，每发一个请求loadingCount++。3、当第一个请求开始是，打开loading状态。当loadingCount=0的时候关闭loading状态。2、在每个请求回来之后loadingCount--。
h5-loading预加载图片
weixin_58375506的博客
02-07 555
自看
HTML5 图片加载特效
weixin_34290000的博客
08-12 252
总共3种， 1、从左到右 2、从中间到两边 3。百叶窗 只要知道了原理，剩下的就是绘制了 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <...
h5canvas绘制loading页面
weixin_34186950的博客
09-02 363
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百分比加载</title></head><body> <canvas id="canvas" width="500" height="500" sty...
H5 文字loading动画
04-24
NULL 博文链接：https://onestopweb.iteye.com/blog/2379098
h5居中loading_HUI - loading 动画
weixin_39850167的博客
12-20 187
HUI Loadinghui.loading(msg)功能：展示一个居中的Loading效果，使用hui.closeLoading()函数可以关闭它。参数：1、msg 加载提示文本2、是否关闭返回：无huibase.closeLoading()功能：关闭loading动画参数：无返回：无完整代码，包含h5+ 原生loadinghtml>HUI-LoadingHUI-LoadingLo...
html5制作loading图
divi
08-24 353
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;
使用HTML5制作loading图
weixin_30808253的博客
04-10 106
昨天发了一篇使用HTML5 canvas写的时钟的文章，今天发一篇关于使用HTML5制作loading图的文章。 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id = "canvas...
CSS3 H5液体形态Loading加载动画特效.zip
07-11
代码片段： <body>[removed][removed]   <div class="loading">   <div></div>   <div></div>   <div></div>   <div></div> </div>
12种炫酷html5 svg加载loading动画特效
08-15
12种炫酷html5 svg加载loading动画特效 包括 audio、ball-triangle、bars等
7款 HTML5 Loading动画特效
10-17
7款HTML5 Loading动画特效，主要实现方式是通过Canvas+Css实现，纯代码实现
酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖
01-04
用法非常简单，基于原生 JS CSS 开箱即用 在head中引入css，在body第一行引入js 即可失效酷炫的页面加载特效 详细介绍参考 https://zzzmh.cn/single?id=53
html页面LOADING
weixin_33747129的博客
03-04 266
first: &lt;form name=loading&gt;&lt;p&gt;&lt;font color="7285CF"&gt;正在载入，请稍候.......&lt;/font&gt;&lt;/p&gt;&lt;p&gt; &lt;input type=text name=chart size=46 style="font-family:Arial; font-we
html5制作loading效果,使用html5制作loading图的示例
weixin_42097533的博客
06-04 387
复制代码代码如下:var loading = function (canvas, options) {this.canvas = document.getelementbyid(canvas);this.options = options;}; loading.prototype = {constructor: loading,show: function () {var canva...
H5页面点击按钮时的loading图
a527749703的专栏
02-10 6510
今天一个H5页面要求发送数据请求时增加一个loading的图层，于是就自己写了一个。 实现的原理很简单，两个div，z-index设置的大一些，一个div是loading的背景，另外一个自然是旋转的菊花图。 html如下： css样式也比较简单： .modal-bg{ display: none; position: a
html5 酷炫 loading
01-09
HTML5酷炫的加载动画是一种通过使用HTML5和CSS3技术制作的具有视觉冲击力的网页加载动画。这些动画可以用来吸引用户的注意并增加页面的交互性和用户体验。HTML5可以实现更复杂、更吸引人的加载动画，比如旋转、缩放、淡入淡出等效果。而CSS3可以用来实现更加绚丽多彩的样式和过渡效果，比如渐变色、阴影、变形等。这些特效不仅可以为网站增添一些时尚和个性化的元素，还可以有效提高用户体验。 HTML5酷炫的加载动画不仅可以展示网页的专业性和创意性，还可以让用户在等待页面加载过程中有一些有趣的东西去看，从而减少用户的等待焦虑感。这些动画也能够吸引用户的眼球，增加用户对网站的留存时间，从而提高网站的页面停留时间和浏览深度，促进用户的互动并提高用户对网页的满意度。 综上所述，HTML5酷炫的加载动画通过使用前沿的技术和炫酷的效果，为网站增添一些时尚和个性化的元素，提高用户体验，减少用户等待焦虑感，促进用户互动，对网站的发展和用户体验有着积极的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值