前端开发者一般用1，2个效果比较多，会根据H5主题不同做些微调，第3个用的网上的插件，鉴于有些安卓机对canvas渲染效果不好，不怎么用。
页面中的logo一开始用的图片，后来改成用CSS3绘制，但是CSS3绘制的logo有些偏差，被设计的同事吐槽（设计师的像素眼，你们懂的），后来改成了SVG，既保证了渲染速度又不会失真。
html 代码
页面中的logo一开始用的图片，后来改成用CSS3绘制，但是CSS3绘制的logo有些偏差，被设计的同事吐槽（设计师的像素眼，你们懂的），后来改成了SVG，既保证了渲染速度又不会失真。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>logo加载页</title>
<style>
.load{
width:320px;
height:586px;
background:#000;
margin:20px10px;
display:inline-block;
float:left;
position:relative;
}
/*loading1*/
.loading1{
background:#E1BA77;
}
.logo{
margin:52%auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
box-shadow:0px0px10px3pxrgb(243,243,243);
background:rgb(255,255,255);
border-radius:55%;
border:2pxsolid#fff;
width:3.6rem;
height:3.6rem;
display:block;
text-align:center;
}
.bar{
font-size:20px;
width:7.5rem;
height:0.3rem;
margin:81%auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
border-radius:.5em;
background:rgba(255,255,255,0.6);
box-shadow:000.05emrgba(100,100,100,0.075),000.2emrgba(0,0,0,0.1),inset0.1em.05emrgba(0,0,0,0.1),0.05emrgba(255,255,255,0.7);
}
.bar:after{
content:”加载中…”;
position:absolute;
left:29%;
top:323%;
font-family:’微软雅黑’,’Carrois Gothic’,sans-serif;
font-size:0.8rem;
color:#fff;
}
.bar.sphere{
border-radius:50%;
width:0.3rem;
height:100%;
background:-webkit-linear-gradient(#fff,#fff);
background:linear-gradient(#fff,#fff);
box-shadow:inset0.15em.1emrgba(255,255,255,0.3),inset0-.1em.15emrgba(0,0,0,0.15),00.25emrgba(0,0,0,0.3);
display:block;
-webkit-animation: sphere 1.75sease-in-outinfinitealternate;
animation: sphere 1.75sease-in-outinfinitealternate;
}
.loadingDiva{
position:absolute;
bottom:5%;
left:44%;
color:#505050;
}
-webkit-@keyframes sphere {
from {}
to {
margin-left:90%;
}
}
@keyframessphere{
from {}
to {
margin-left:90%;
}
}
/*loading2*/
.loading2{
background:#9c9c9c;
}
.loading2.logo{
box-shadow:0px0px10px3pxrgb(135,135,135);
}
.logo-cover{
width:3.6rem;
height:3.6rem;
display:block;
text-align:center;
background-color:#d6d6d6;
z-index:88;
opacity:0.8;
margin:52%auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
border-radius:55%;
border:2pxsolid#dadada;
animation: clipcover 1.5slinearinfinite;
-webkit-animation: clipcover 1.5slinearinfinite;
-o-animation: clipcover 1.5slinearinfinite;
-moz-animation: clipcover 1.5slinearinfinite;
clip:rect(0px4rem4rem0px);
}
@keyframesclipcover{
0% {
clip:rect(0px4rem4rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
50% {
clip:rect(0px4rem2rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
100% {
clip:rect(0px4rem0rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
}
@-webkit-keyframesclipcover{
0% {
clip:rect(0px4rem4rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
50% {
clip:rect(0px4rem2rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
100% {
clip:rect(0px4rem0rem0px);
-webkit-clip:rect(0px4rem2rem0px);
}
}
/*loading3*/
.loading3.logo{
width:3.3rem;
height:3.3rem;
border:0;
border-radius:0.8rem;
box-shadow:none;
}
canvas{
position:absolute;
top:39%;
left:22%;
z-index:500;
}
.loading3svg{
margin:-3%00-3%;
}
svg{
width:3.5rem;
height:3.5rem;
border-radius:70%;
margin-top:1%;
}
</style>
</head>
<body>
<divclass=”wrap”>
<divclass=”loading1 load”>
<divclass=”logo”>
<!–logo svg–>
<svgversion=”1.1″ id=”图层_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”130px” height=”129px” viewBox=”0 0 130 129″ style=”enable-background:new 0 0 130 129;” xml:space=”preserve”>
<g>
<g>
<pathstyle=”fill:#fff;stroke:#fff;stroke-width:0.5;stroke-miterlimit:22.9256;” d=”M120.93,97.106
c0,12.791-10.463,23.254-23.253,23.254H30.796c-12.789,0-23.252-10.463-23.252-23.254V30.226
c0-12.789,10.463-23.253,23.252-23.253h66.881c12.79,0,23.253,10.464,23.253,23.253V97.106z”
/>
<g>
<g>
<g>
<pathstyle=”fill:#FFD900;” d=”M72.717,92.214c-7.377,0-9.778-5.092-9.778-9.621l-17.69,0.004c0,13.41,0,12.178,0,12.178
c0,10.361,8.381,18.742,18.741,18.742c10.365,0,19.177-8.381,19.177-18.742c0-9.109,0-11.01,0-11.947
C82.94,86.771,79.31,92.214,72.717,92.214z” />
<pathstyle=”fill:#6FBA2C;” d=”M62.938,71.052h-0.717c-0.44,0-0.799-0.295-0.799-0.656v-2.281H60.73
c-0.281,0-0.514-0.232-0.514-0.516v-0.404c-0.003,0-0.005-0.002-0.005-0.002c-0.217-0.057-0.446-0.119-0.694-0.189
c-0.005-0.002-0.011-0.004-0.018-0.006c-0.117-0.033-0.241-0.068-0.367-0.105c-0.137-0.039-0.278-0.082-0.427-0.127
c-4.553-1.369-11.112-8.115-14.088-14.001c-1.445-2.856-2.054-5.729-1.169-7.466c0.113-0.226,0.245-0.428,0.379-0.622
c-4.642,0-11.014,0.006-11.145,0.009C22.506,44.892,14.33,53.405,14.33,63.638c0,10.363,8.382,18.959,18.745,18.959
c13.407,0,12.39,0,12.39,0l17.474-0.004V71.052z” />
<pathstyle=”fill:#20AEE5;” d=”M45.058,46.388c-0.332,0.655,0,1.748,0.42,2.988c0.053,0.157,0.112,0.319,0.173,0.484
c0.024,0.053,0.047,0.108,0.069,0.163c0.044,0.112,0.09,0.224,0.139,0.34c0.029,0.068,0.064,0.141,0.094,0.211
c0.046,0.103,0.09,0.203,0.139,0.308c0.037,0.077,0.075,0.155,0.113,0.232c0.049,0.101,0.097,0.201,0.148,0.304
c0.041,0.08,0.086,0.163,0.126,0.245c0.053,0.1,0.104,0.199,0.159,0.301c0.044,0.086,0.095,0.173,0.142,0.259
c0.058,0.101,0.11,0.2,0.168,0.302c0.051,0.087,0.104,0.176,0.157,0.266c0.059,0.1,0.115,0.199,0.177,0.301
c0.056,0.092,0.113,0.185,0.168,0.277c0.063,0.099,0.122,0.198,0.187,0.298c0.06,0.095,0.12,0.189,0.181,0.282
c0.064,0.1,0.126,0.199,0.192,0.298c0.064,0.097,0.129,0.192,0.195,0.289c0.066,0.098,0.13,0.196,0.199,0.295
c0.066,0.098,0.135,0.195,0.203,0.293c0.068,0.097,0.137,0.193,0.204,0.291c0.07,0.101,0.146,0.2,0.217,0.299
c0.07,0.096,0.139,0.19,0.21,0.285c0.076,0.102,0.152,0.202,0.227,0.303c0.072,0.093,0.143,0.186,0.213,0.277
c0.08,0.103,0.157,0.206,0.239,0.309c0.071,0.09,0.142,0.18,0.213,0.27c0.083,0.103,0.167,0.204,0.248,0.307
c0.072,0.088,0.146,0.177,0.217,0.266c0.086,0.102,0.172,0.204,0.259,0.307c0.072,0.085,0.144,0.169,0.217,0.254
c0.088,0.104,0.177,0.207,0.268,0.309c0.072,0.081,0.144,0.163,0.214,0.243c0.091,0.104,0.185,0.205,0.277,0.308
c0.07,0.078,0.144,0.156,0.214,0.234c0.096,0.102,0.188,0.202,0.285,0.303c0.071,0.075,0.14,0.148,0.213,0.223
c0.098,0.101,0.195,0.202,0.292,0.301c0.071,0.07,0.142,0.142,0.212,0.211c0.098,0.1,0.195,0.198,0.297,0.294
c0.068,0.067,0.138,0.134,0.207,0.2c0.103,0.097,0.202,0.193,0.305,0.288c0.066,0.063,0.135,0.122,0.201,0.184
c0.104,0.096,0.208,0.191,0.313,0.283c0.063,0.057,0.126,0.111,0.19,0.167c0.108,0.094,0.215,0.188,0.323,0.278
c0.06,0.05,0.119,0.098,0.181,0.147c0.111,0.092,0.22,0.184,0.332,0.271c0.054,0.045,0.112,0.087,0.168,0.13
c0.113,0.089,0.229,0.178,0.342,0.263c0.051,0.038,0.103,0.073,0.152,0.11c0.117,0.087,0.234,0.174,0.354,0.255
c0.04,0.029,0.082,0.055,0.122,0.083c0.128,0.086,0.255,0.173,0.38,0.253c0.021,0.014,0.043,0.026,0.064,0.039
c0.633,0.401,1.248,0.726,1.835,0.952c0.015,0.005,0.029,0.01,0.037,0.016c0.152,0.058,0.306,0.109,0.453,0.154
c0.177,0.053,0.345,0.102,0.503,0.148c0.157,0.047,0.308,0.09,0.453,0.131c0.075-0.189,0.261-0.322,0.474-0.322h6.513
c0.25,0,0.449,0.182,0.496,0.418c0.379-0.102,0.805-0.223,1.305-0.375c0.151-0.045,0.304-0.099,0.459-0.157
c0.014-0.005,0.027-0.011,0.041-0.016v-0.001c0.598-0.231,1.23-0.565,1.875-0.978c0.021-0.014,0.041-0.024,0.06-0.038
c0.13-0.082,0.257-0.171,0.387-0.26c0.042-0.028,0.082-0.055,0.124-0.084c0.119-0.084,0.24-0.173,0.36-0.262
c0.051-0.037,0.104-0.074,0.156-0.112c0.114-0.087,0.229-0.178,0.342-0.269c0.062-0.046,0.117-0.089,0.177-0.136
c0.108-0.089,0.222-0.182,0.332-0.274c0.064-0.053,0.126-0.104,0.188-0.156c0.108-0.092,0.216-0.187,0.322-0.28
c0.066-0.06,0.136-0.116,0.199-0.176c0.106-0.094,0.212-0.19,0.316-0.287c0.069-0.063,0.14-0.126,0.208-0.191
c0.102-0.097,0.205-0.195,0.306-0.294c0.07-0.068,0.144-0.136,0.214-0.205c0.102-0.1,0.199-0.2,0.302-0.301
c0.07-0.072,0.144-0.145,0.214-0.218c0.098-0.099,0.195-0.202,0.295-0.305c0.072-0.077,0.144-0.153,0.219-0.231
c0.093-0.102,0.189-0.203,0.283-0.306c0.073-0.082,0.15-0.164,0.224-0.246c0.093-0.102,0.182-0.205,0.274-0.308
c0.074-0.085,0.148-0.169,0.221-0.254c0.094-0.104,0.182-0.207,0.27-0.313c0.074-0.087,0.146-0.175,0.225-0.264
c0.084-0.103,0.168-0.205,0.254-0.308c0.074-0.093,0.148-0.185,0.224-0.276c0.082-0.103,0.165-0.205,0.243-0.307
c0.075-0.095,0.149-0.188,0.224-0.283c0.079-0.103,0.157-0.204,0.234-0.308c0.073-0.095,0.146-0.19,0.217-0.286
c0.075-0.103,0.152-0.204,0.228-0.306c0.071-0.098,0.142-0.195,0.213-0.293c0.07-0.101,0.142-0.2,0.212-0.3
c0.072-0.102,0.142-0.201,0.21-0.301c0.067-0.099,0.137-0.196,0.2-0.295c0.07-0.102,0.136-0.201,0.204-0.302
c0.061-0.096,0.127-0.194,0.189-0.29c0.066-0.102,0.131-0.203,0.192-0.304c0.062-0.096,0.121-0.191,0.183-0.285
c0.063-0.102,0.123-0.202,0.182-0.303c0.056-0.094,0.115-0.187,0.168-0.28c0.061-0.1,0.117-0.202,0.174-0.302
c0.053-0.091,0.105-0.182,0.152-0.271c0.056-0.103,0.112-0.202,0.168-0.303c0.047-0.088,0.093-0.175,0.139-0.261
c0.052-0.103,0.103-0.202,0.153-0.303c0.042-0.083,0.084-0.167,0.126-0.248c0.049-0.103,0.093-0.201,0.142-0.302
c0.035-0.078,0.075-0.158,0.11-0.234c0.045-0.104,0.088-0.206,0.131-0.308c0.029-0.069,0.063-0.143,0.09-0.213
c0.045-0.109,0.083-0.217,0.127-0.323c0.021-0.06,0.047-0.12,0.066-0.179c0.058-0.163,0.115-0.323,0.162-0.479
c0.346-1.125,0.663-2.057,0.354-2.665c-0.035-0.072-0.068-0.132-0.104-0.194l-0.036-13.757
c0-10.362-8.595-18.743-18.958-18.743c-10.36,0-18.958,8.381-18.958,18.743c0,3.193-0.002,13.566-0.002,13.566
C45.182,46.166,45.118,46.271,45.058,46.388z” />
<pathstyle=”fill:#ED6D46;” d=”M95.745,44.687c-0.135-0.003-9.316-0.002-11.28-0.002c0.159,0.281,0.316,0.604,0.432,0.833
c0.883,1.736,0.278,4.39-1.167,7.246c-2.979,5.886-9.537,12.632-14.09,14.001c-0.724,0.217-1.297,0.377-1.8,0.504
c-0.026,0.008-0.054,0.014-0.079,0.021v0.309c0,0.283-0.233,0.516-0.518,0.516h-0.664v2.281c0,0.361-0.362,0.656-0.798,0.656
h-0.775v11.33v0.01c0,3.75,2.081,7.758,7.928,7.758c5.961,0,7.97-5.334,7.97-7.768l0,0V70.394
c0.09-5.502,2.189-8.299,6.217-8.299c2.646,0,4.544,1.28,5.493,3.703c0.399,1.018,0.568,2.092,0.648,3.041
c2.036,0.338,3.593,2.094,3.593,4.225c0,2.373-1.925,4.297-4.297,4.297c-2.371,0-4.296-1.924-4.296-4.297
c0-1.895,1.236-3.484,2.94-4.055c-0.069-0.795-0.202-1.67-0.512-2.459c-0.637-1.631-1.774-2.392-3.57-2.392
c-3.164,0-3.954,3.343-3.954,6.614v11.824c6.479,0,12.179,0,12.179,0c10.361,0,18.742-8.596,18.742-18.959
C114.087,53.411,105.919,44.899,95.745,44.687z” />
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<divclass=”bar”>
<iclass=”sphere”></i>
</div>
</div>
<divclass=”loading2 load”>
<divclass=”logo-cover”></div>
<divclass=”logo”>
<!–logo svg–>
<svgversion=”1.1″ id=”图层_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”130px” height=”129px” viewBox=”0 0 130 129″ style=”enable-background:new 0 0 130 129;” xml:space=”preserve”>
<g>
<g>
<pathstyle=”fill:#fff;stroke:#fff;stroke-width:0.5;stroke-miterlimit:22.9256;” d=”M120.93,97.106
c0,12.791-10.463,23.254-23.253,23.254H30.796c-12.789,0-23.252-10.463-23.252-23.254V30.226
c0-12.789,10.463-23.253,23.252-23.253h66.881c12.79,0,23.253,10.464,23.253,23.253V97.106z”
/>
<g>
<g>
<g>
<pathstyle=”fill:#FFD900;” d=”M72.717,92.214c-7.377,0-9.778-5.092-9.778-9.621l-17.69,0.004c0,13.41,0,12.178,0,12.178
c0,10.361,8.381,18.742,18.741,18.742c10.365,0,19.177-8.381,19.177-18.742c0-9.109,0-11.01,0-11.947
C82.94,86.771,79.31,92.214,72.717,92.214z” />
<pathstyle=”fill:#6FBA2C;” d=”M62.938,71.052h-0.717c-0.44,0-0.799-0.295-0.799-0.656v-2.281H60.73
c-0.281,0-0.514-0.232-0.514-0.516v-0.404c-0.003,0-0.005-0.002-0.005-0.002c-0.217-0.057-0.446-0.119-0.694-0.189
c-0.005-0.002-0.011-0.004-0.018-0.006c-0.117-0.033-0.241-0.068-0.367-0.105c-0.137-0.039-0.278-0.082-0.427-0.127
c-4.553-1.369-11.112-8.115-14.088-14.001c-1.445-2.856-2.054-5.729-1.169-7.466c0.113-0.226,0.245-0.428,0.379-0.622
c-4.642,0-11.014,0.006-11.145,0.009C22.506,44.892,14.33,53.405,14.33,63.638c0,10.363,8.382,18.959,18.745,18.959
c13.407,0,12.39,0,12.39,0l17.474-0.004V71.052z” />
<pathstyle=”fill:#20AEE5;” d=”M45.058,46.388c-0.332,0.655,0,1.748,0.42,2.988c0.053,0.157,0.112,0.319,0.173,0.484
c0.024,0.053,0.047,0.108,0.069,0.163c0.044,0.112,0.09,0.224,0.139,0.34c0.029,0.068,0.064,0.141,0.094,0.211
c0.046,0.103,0.09,0.203,0.139,0.308c0.037,0.077,0.075,0.155,0.113,0.232c0.049,0.101,0.097,0.201,0.148,0.304
c0.041,0.08,0.086,0.163,0.126,0.245c0.053,0.1,0.104,0.199,0.159,0.301c0.044,0.086,0.095,0.173,0.142,0.259
c0.058,0.101,0.11,0.2,0.168,0.302c0.051,0.087,0.104,0.176,0.157,0.266c0.059,0.1,0.115,0.199,0.177,0.301
c0.056,0.092,0.113,0.185,0.168,0.277c0.063,0.099,0.122,0.198,0.187,0.298c0.06,0.095,0.12,0.189,0.181,0.282
c0.064,0.1,0.126,0.199,0.192,0.298c0.064,0.097,0.129,0.192,0.195,0.289c0.066,0.098,0.13,0.196,0.199,0.295
c0.066,0.098,0.135,0.195,0.203,0.293c0.068,0.097,0.137,0.193,0.204,0.291c0.07,0.101,0.146,0.2,0.217,0.299
c0.07,0.096,0.139,0.19,0.21,0.285c0.076,0.102,0.152,0.202,0.227,0.303c0.072,0.093,0.143,0.186,0.213,0.277
c0.08,0.103,0.157,0.206,0.239,0.309c0.071,0.09,0.142,0.18,0.213,0.27c0.083,0.103,0.167,0.204,0.248,0.307
c0.072,0.088,0.146,0.177,0.217,0.266c0.086,0.102,0.172,0.204,0.259,0.307c0.072,0.085,0.144,0.169,0.217,0.254
c0.088,0.104,0.177,0.207,0.268,0.309c0.072,0.081,0.144,0.163,0.214,0.243c0.091,0.104,0.185,0.205,0.277,0.308
c0.07,0.078,0.144,0.156,0.214,0.234c0.096,0.102,0.188,0.202,0.285,0.303c0.071,0.075,0.14,0.148,0.213,0.223
c0.098,0.101,0.195,0.202,0.292,0.301c0.071,0.07,0.142,0.142,0.212,0.211c0.098,0.1,0.195,0.198,0.297,0.294
c0.068,0.067,0.138,0.134,0.207,0.2c0.103,0.097,0.202,0.193,0.305,0.288c0.066,0.063,0.135,0.122,0.201,0.184
c0.104,0.096,0.208,0.191,0.313,0.283c0.063,0.057,0.126,0.111,0.19,0.167c0.108,0.094,0.215,0.188,0.323,0.278
c0.06,0.05,0.119,0.098,0.181,0.147c0.111,0.092,0.22,0.184,0.332,0.271c0.054,0.045,0.112,0.087,0.168,0.13
c0.113,0.089,0.229,0.178,0.342,0.263c0.051,0.038,0.103,0.073,0.152,0.11c0.117,0.087,0.234,0.174,0.354,0.255
c0.04,0.029,0.082,0.055,0.122,0.083c0.128,0.086,0.255,0.173,0.38,0.253c0.021,0.014,0.043,0.026,0.064,0.039
c0.633,0.401,1.248,0.726,1.835,0.952c0.015,0.005,0.029,0.01,0.037,0.016c0.152,0.058,0.306,0.109,0.453,0.154
c0.177,0.053,0.345,0.102,0.503,0.148c0.157,0.047,0.308,0.09,0.453,0.131c0.075-0.189,0.261-0.322,0.474-0.322h6.513
c0.25,0,0.449,0.182,0.496,0.418c0.379-0.102,0.805-0.223,1.305-0.375c0.151-0.045,0.304-0.099,0.459-0.157
c0.014-0.005,0.027-0.011,0.041-0.016v-0.001c0.598-0.231,1.23-0.565,1.875-0.978c0.021-0.014,0.041-0.024,0.06-0.038
c0.13-0.082,0.257-0.171,0.387-0.26c0.042-0.028,0.082-0.055,0.124-0.084c0.119-0.084,0.24-0.173,0.36-0.262
c0.051-0.037,0.104-0.074,0.156-0.112c0.114-0.087,0.229-0.178,0.342-0.269c0.062-0.046,0.117-0.089,0.177-0.136
c0.108-0.089,0.222-0.182,0.332-0.274c0.064-0.053,0.126-0.104,0.188-0.156c0.108-0.092,0.216-0.187,0.322-0.28
c0.066-0.06,0.136-0.116,0.199-0.176c0.106-0.094,0.212-0.19,0.316-0.287c0.069-0.063,0.14-0.126,0.208-0.191
c0.102-0.097,0.205-0.195,0.306-0.294c0.07-0.068,0.144-0.136,0.214-0.205c0.102-0.1,0.199-0.2,0.302-0.301
c0.07-0.072,0.144-0.145,0.214-0.218c0.098-0.099,0.195-0.202,0.295-0.305c0.072-0.077,0.144-0.153,0.219-0.231
c0.093-0.102,0.189-0.203,0.283-0.306c0.073-0.082,0.15-0.164,0.224-0.246c0.093-0.102,0.182-0.205,0.274-0.308
c0.074-0.085,0.148-0.169,0.221-0.254c0.094-0.104,0.182-0.207,0.27-0.313c0.074-0.087,0.146-0.175,0.225-0.264
c0.084-0.103,0.168-0.205,0.254-0.308c0.074-0.093,0.148-0.185,0.224-0.276c0.082-0.103,0.165-0.205,0.243-0.307
c0.075-0.095,0.149-0.188,0.224-0.283c0.079-0.103,0.157-0.204,0.234-0.308c0.073-0.095,0.146-0.19,0.217-0.286
c0.075-0.103,0.152-0.204,0.228-0.306c0.071-0.098,0.142-0.195,0.213-0.293c0.07-0.101,0.142-0.2,0.212-0.3
c0.072-0.102,0.142-0.201,0.21-0.301c0.067-0.099,0.137-0.196,0.2-0.295c0.07-0.102,0.136-0.201,0.204-0.302
c0.061-0.096,0.127-0.194,0.189-0.29c0.066-0.102,0.131-0.203,0.192-0.304c0.062-0.096,0.121-0.191,0.183-0.285
c0.063-0.102,0.123-0.202,0.182-0.303c0.056-0.094,0.115-0.187,0.168-0.28c0.061-0.1,0.117-0.202,0.174-0.302
c0.053-0.091,0.105-0.182,0.152-0.271c0.056-0.103,0.112-0.202,0.168-0.303c0.047-0.088,0.093-0.175,0.139-0.261
c0.052-0.103,0.103-0.202,0.153-0.303c0.042-0.083,0.084-0.167,0.126-0.248c0.049-0.103,0.093-0.201,0.142-0.302
c0.035-0.078,0.075-0.158,0.11-0.234c0.045-0.104,0.088-0.206,0.131-0.308c0.029-0.069,0.063-0.143,0.09-0.213
c0.045-0.109,0.083-0.217,0.127-0.323c0.021-0.06,0.047-0.12,0.066-0.179c0.058-0.163,0.115-0.323,0.162-0.479
c0.346-1.125,0.663-2.057,0.354-2.665c-0.035-0.072-0.068-0.132-0.104-0.194l-0.036-13.757
c0-10.362-8.595-18.743-18.958-18.743c-10.36,0-18.958,8.381-18.958,18.743c0,3.193-0.002,13.566-0.002,13.566
C45.182,46.166,45.118,46.271,45.058,46.388z” />
<pathstyle=”fill:#ED6D46;” d=”M95.745,44.687c-0.135-0.003-9.316-0.002-11.28-0.002c0.159,0.281,0.316,0.604,0.432,0.833
c0.883,1.736,0.278,4.39-1.167,7.246c-2.979,5.886-9.537,12.632-14.09,14.001c-0.724,0.217-1.297,0.377-1.8,0.504
c-0.026,0.008-0.054,0.014-0.079,0.021v0.309c0,0.283-0.233,0.516-0.518,0.516h-0.664v2.281c0,0.361-0.362,0.656-0.798,0.656
h-0.775v11.33v0.01c0,3.75,2.081,7.758,7.928,7.758c5.961,0,7.97-5.334,7.97-7.768l0,0V70.394
c0.09-5.502,2.189-8.299,6.217-8.299c2.646,0,4.544,1.28,5.493,3.703c0.399,1.018,0.568,2.092,0.648,3.041
c2.036,0.338,3.593,2.094,3.593,4.225c0,2.373-1.925,4.297-4.297,4.297c-2.371,0-4.296-1.924-4.296-4.297
c0-1.895,1.236-3.484,2.94-4.055c-0.069-0.795-0.202-1.67-0.512-2.459c-0.637-1.631-1.774-2.392-3.57-2.392
c-3.164,0-3.954,3.343-3.954,6.614v11.824c6.479,0,12.179,0,12.179,0c10.361,0,18.742-8.596,18.742-18.959
C114.087,53.411,105.919,44.899,95.745,44.687z” />
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<pstyle=”position: absolute; top: 42%;left: 45%;color: #FFFFFF;”>100%</p>
</div>
<divclass=”loading3 load” id=”load3″>
<divclass=”logo”>
<!–logo svg–>
<svgversion=”1.1″ id=”图层_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”130px” height=”129px” viewBox=”0 0 130 129″ style=”enable-background:new 0 0 130 129;” xml:space=”preserve”>
<g>
<g>
<pathstyle=”fill:#fff;stroke:#fff;stroke-width:0.5;stroke-miterlimit:22.9256;” d=”M120.93,97.106
c0,12.791-10.463,23.254-23.253,23.254H30.796c-12.789,0-23.252-10.463-23.252-23.254V30.226
c0-12.789,10.463-23.253,23.252-23.253h66.881c12.79,0,23.253,10.464,23.253,23.253V97.106z”
/>
<g>
<g>
<g>
<pathstyle=”fill:#FFD900;” d=”M72.717,92.214c-7.377,0-9.778-5.092-9.778-9.621l-17.69,0.004c0,13.41,0,12.178,0,12.178
c0,10.361,8.381,18.742,18.741,18.742c10.365,0,19.177-8.381,19.177-18.742c0-9.109,0-11.01,0-11.947
C82.94,86.771,79.31,92.214,72.717,92.214z” />
<pathstyle=”fill:#6FBA2C;” d=”M62.938,71.052h-0.717c-0.44,0-0.799-0.295-0.799-0.656v-2.281H60.73
c-0.281,0-0.514-0.232-0.514-0.516v-0.404c-0.003,0-0.005-0.002-0.005-0.002c-0.217-0.057-0.446-0.119-0.694-0.189
c-0.005-0.002-0.011-0.004-0.018-0.006c-0.117-0.033-0.241-0.068-0.367-0.105c-0.137-0.039-0.278-0.082-0.427-0.127
c-4.553-1.369-11.112-8.115-14.088-14.001c-1.445-2.856-2.054-5.729-1.169-7.466c0.113-0.226,0.245-0.428,0.379-0.622
c-4.642,0-11.014,0.006-11.145,0.009C22.506,44.892,14.33,53.405,14.33,63.638c0,10.363,8.382,18.959,18.745,18.959
c13.407,0,12.39,0,12.39,0l17.474-0.004V71.052z” />
<pathstyle=”fill:#20AEE5;” d=”M45.058,46.388c-0.332,0.655,0,1.748,0.42,2.988c0.053,0.157,0.112,0.319,0.173,0.484
c0.024,0.053,0.047,0.108,0.069,0.163c0.044,0.112,0.09,0.224,0.139,0.34c0.029,0.068,0.064,0.141,0.094,0.211
c0.046,0.103,0.09,0.203,0.139,0.308c0.037,0.077,0.075,0.155,0.113,0.232c0.049,0.101,0.097,0.201,0.148,0.304
c0.041,0.08,0.086,0.163,0.126,0.245c0.053,0.1,0.104,0.199,0.159,0.301c0.044,0.086,0.095,0.173,0.142,0.259
c0.058,0.101,0.11,0.2,0.168,0.302c0.051,0.087,0.104,0.176,0.157,0.266c0.059,0.1,0.115,0.199,0.177,0.301
c0.056,0.092,0.113,0.185,0.168,0.277c0.063,0.099,0.122,0.198,0.187,0.298c0.06,0.095,0.12,0.189,0.181,0.282
c0.064,0.1,0.126,0.199,0.192,0.298c0.064,0.097,0.129,0.192,0.195,0.289c0.066,0.098,0.13,0.196,0.199,0.295
c0.066,0.098,0.135,0.195,0.203,0.293c0.068,0.097,0.137,0.193,0.204,0.291c0.07,0.101,0.146,0.2,0.217,0.299
c0.07,0.096,0.139,0.19,0.21,0.285c0.076,0.102,0.152,0.202,0.227,0.303c0.072,0.093,0.143,0.186,0.213,0.277
c0.08,0.103,0.157,0.206,0.239,0.309c0.071,0.09,0.142,0.18,0.213,0.27c0.083,0.103,0.167,0.204,0.248,0.307
c0.072,0.088,0.146,0.177,0.217,0.266c0.086,0.102,0.172,0.204,0.259,0.307c0.072,0.085,0.144,0.169,0.217,0.254
c0.088,0.104,0.177,0.207,0.268,0.309c0.072,0.081,0.144,0.163,0.214,0.243c0.091,0.104,0.185,0.205,0.277,0.308
c0.07,0.078,0.144,0.156,0.214,0.234c0.096,0.102,0.188,0.202,0.285,0.303c0.071,0.075,0.14,0.148,0.213,0.223
c0.098,0.101,0.195,0.202,0.292,0.301c0.071,0.07,0.142,0.142,0.212,0.211c0.098,0.1,0.195,0.198,0.297,0.294
c0.068,0.067,0.138,0.134,0.207,0.2c0.103,0.097,0.202,0.193,0.305,0.288c0.066,0.063,0.135,0.122,0.201,0.184
c0.104,0.096,0.208,0.191,0.313,0.283c0.063,0.057,0.126,0.111,0.19,0.167c0.108,0.094,0.215,0.188,0.323,0.278
c0.06,0.05,0.119,0.098,0.181,0.147c0.111,0.092,0.22,0.184,0.332,0.271c0.054,0.045,0.112,0.087,0.168,0.13
c0.113,0.089,0.229,0.178,0.342,0.263c0.051,0.038,0.103,0.073,0.152,0.11c0.117,0.087,0.234,0.174,0.354,0.255
c0.04,0.029,0.082,0.055,0.122,0.083c0.128,0.086,0.255,0.173,0.38,0.253c0.021,0.014,0.043,0.026,0.064,0.039
c0.633,0.401,1.248,0.726,1.835,0.952c0.015,0.005,0.029,0.01,0.037,0.016c0.152,0.058,0.306,0.109,0.453,0.154
c0.177,0.053,0.345,0.102,0.503,0.148c0.157,0.047,0.308,0.09,0.453,0.131c0.075-0.189,0.261-0.322,0.474-0.322h6.513
c0.25,0,0.449,0.182,0.496,0.418c0.379-0.102,0.805-0.223,1.305-0.375c0.151-0.045,0.304-0.099,0.459-0.157
c0.014-0.005,0.027-0.011,0.041-0.016v-0.001c0.598-0.231,1.23-0.565,1.875-0.978c0.021-0.014,0.041-0.024,0.06-0.038
c0.13-0.082,0.257-0.171,0.387-0.26c0.042-0.028,0.082-0.055,0.124-0.084c0.119-0.084,0.24-0.173,0.36-0.262
c0.051-0.037,0.104-0.074,0.156-0.112c0.114-0.087,0.229-0.178,0.342-0.269c0.062-0.046,0.117-0.089,0.177-0.136
c0.108-0.089,0.222-0.182,0.332-0.274c0.064-0.053,0.126-0.104,0.188-0.156c0.108-0.092,0.216-0.187,0.322-0.28
c0.066-0.06,0.136-0.116,0.199-0.176c0.106-0.094,0.212-0.19,0.316-0.287c0.069-0.063,0.14-0.126,0.208-0.191
c0.102-0.097,0.205-0.195,0.306-0.294c0.07-0.068,0.144-0.136,0.214-0.205c0.102-0.1,0.199-0.2,0.302-0.301
c0.07-0.072,0.144-0.145,0.214-0.218c0.098-0.099,0.195-0.202,0.295-0.305c0.072-0.077,0.144-0.153,0.219-0.231
c0.093-0.102,0.189-0.203,0.283-0.306c0.073-0.082,0.15-0.164,0.224-0.246c0.093-0.102,0.182-0.205,0.274-0.308
c0.074-0.085,0.148-0.169,0.221-0.254c0.094-0.104,0.182-0.207,0.27-0.313c0.074-0.087,0.146-0.175,0.225-0.264
c0.084-0.103,0.168-0.205,0.254-0.308c0.074-0.093,0.148-0.185,0.224-0.276c0.082-0.103,0.165-0.205,0.243-0.307
c0.075-0.095,0.149-0.188,0.224-0.283c0.079-0.103,0.157-0.204,0.234-0.308c0.073-0.095,0.146-0.19,0.217-0.286
c0.075-0.103,0.152-0.204,0.228-0.306c0.071-0.098,0.142-0.195,0.213-0.293c0.07-0.101,0.142-0.2,0.212-0.3
c0.072-0.102,0.142-0.201,0.21-0.301c0.067-0.099,0.137-0.196,0.2-0.295c0.07-0.102,0.136-0.201,0.204-0.302
c0.061-0.096,0.127-0.194,0.189-0.29c0.066-0.102,0.131-0.203,0.192-0.304c0.062-0.096,0.121-0.191,0.183-0.285
c0.063-0.102,0.123-0.202,0.182-0.303c0.056-0.094,0.115-0.187,0.168-0.28c0.061-0.1,0.117-0.202,0.174-0.302
c0.053-0.091,0.105-0.182,0.152-0.271c0.056-0.103,0.112-0.202,0.168-0.303c0.047-0.088,0.093-0.175,0.139-0.261
c0.052-0.103,0.103-0.202,0.153-0.303c0.042-0.083,0.084-0.167,0.126-0.248c0.049-0.103,0.093-0.201,0.142-0.302
c0.035-0.078,0.075-0.158,0.11-0.234c0.045-0.104,0.088-0.206,0.131-0.308c0.029-0.069,0.063-0.143,0.09-0.213
c0.045-0.109,0.083-0.217,0.127-0.323c0.021-0.06,0.047-0.12,0.066-0.179c0.058-0.163,0.115-0.323,0.162-0.479
c0.346-1.125,0.663-2.057,0.354-2.665c-0.035-0.072-0.068-0.132-0.104-0.194l-0.036-13.757
c0-10.362-8.595-18.743-18.958-18.743c-10.36,0-18.958,8.381-18.958,18.743c0,3.193-0.002,13.566-0.002,13.566
C45.182,46.166,45.118,46.271,45.058,46.388z” />
<pathstyle=”fill:#ED6D46;” d=”M95.745,44.687c-0.135-0.003-9.316-0.002-11.28-0.002c0.159,0.281,0.316,0.604,0.432,0.833
c0.883,1.736,0.278,4.39-1.167,7.246c-2.979,5.886-9.537,12.632-14.09,14.001c-0.724,0.217-1.297,0.377-1.8,0.504
c-0.026,0.008-0.054,0.014-0.079,0.021v0.309c0,0.283-0.233,0.516-0.518,0.516h-0.664v2.281c0,0.361-0.362,0.656-0.798,0.656
h-0.775v11.33v0.01c0,3.75,2.081,7.758,7.928,7.758c5.961,0,7.97-5.334,7.97-7.768l0,0V70.394
c0.09-5.502,2.189-8.299,6.217-8.299c2.646,0,4.544,1.28,5.493,3.703c0.399,1.018,0.568,2.092,0.648,3.041
c2.036,0.338,3.593,2.094,3.593,4.225c0,2.373-1.925,4.297-4.297,4.297c-2.371,0-4.296-1.924-4.296-4.297
c0-1.895,1.236-3.484,2.94-4.055c-0.069-0.795-0.202-1.67-0.512-2.459c-0.637-1.631-1.774-2.392-3.57-2.392
c-3.164,0-3.954,3.343-3.954,6.614v11.824c6.479,0,12.179,0,12.179,0c10.361,0,18.742-8.596,18.742-18.959
C114.087,53.411,105.919,44.899,95.745,44.687z” />
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<script>
// loading3 canvas
varlightLoader=function(c,cw,ch){
var_this=this;
this.c=c;
this.ctx=c.getContext(‘2d’);
this.cw=cw;
this.ch =ch;
this.loaded=0;
this.loaderSpeed=.6;
this.loaderHeight=8;
this.loaderWidth=310;
this.loader={
x: (this.cw / 2) – (this.loaderWidth / 2),
y: (this.ch / 2) – (this.loaderHeight / 2)
};
this.particles= [];
this.particleLift=180;
this.hueStart=0
this.hueEnd=120;
this.hue=0;
this.gravity=.15;
this.particleRate=4;
this.init=function(){
this.loop();
};
this.rand=function(rMi,rMa){
return~~((Math.random() * (rMa-rMi+1)) +rMi);
};
this.hitTest=function(x1,y1,w1,h1,x2,y2,w2,h2){
return!(x1+w1<x2||x2+w2<x1||y1+h1<y2||y2+h2<y1);
};
this.updateLoader=function(){
if (this.loaded<100) {
this.loaded+=this.loaderSpeed;
}else{
this.loaded=0;
}
};
this.renderLoader=function(){
this.ctx.fillStyle=’#000′;
this.ctx.fillRect(this.loader.x,this.loader.y,this.loaderWidth,this.loaderHeight);
this.hue=this.hueStart+ (this.loaded/100) * (this.hueEnd-this.hueStart);
varnewWidth= (this.loaded/100) *this.loaderWidth;
this.ctx.fillStyle=’hsla(‘+this.hue+’, 100%, 40%, 1)’;
this.ctx.fillRect(this.loader.x,this.loader.y,newWidth,this.loaderHeight);
this.ctx.fillStyle=’#222′;
this.ctx.fillRect(this.loader.x,this.loader.y,newWidth,this.loaderHeight/2);
};
this.Particle=function(){
this.x =_this.loader.x + ((_this.loaded/100) *_this.loaderWidth) -_this.rand(0,1);
this.y =_this.ch /2+_this.rand(0,_this.loaderHeight) -_this.loaderHeight/2;
this.vx= (_this.rand(0,4) -2) /100;
this.vy= (_this.rand(0,_this.particleLift) -_this.particleLift*2) /100;
this.width =_this.rand(1,4) /2;
this.height =_this.rand(1,4) /2;
this.hue=_this.hue;
};
this.Particle.prototype.update=function(i){
this.vx+= (_this.rand(0,6) -3) /100;
this.vy+=_this.gravity;
this.x +=this.vx;
this.y +=this.vy;
if (this.y >_this.ch) {
_this.particles.splice(i,1);
}
};
this.Particle.prototype.render=function(){
_this.ctx.fillStyle=’hsla(‘+this.hue+’, 100%, ‘+_this.rand(50,70) +’%, ‘+_this.rand(
20,100) /100+’)’;
_this.ctx.fillRect(this.x,this.y,this.width,this.height);
};
this.createParticles=function(){
vari=this.particleRate;
while (i–) {
this.particles.push(newthis.Particle());
};
};
this.updateParticles=function(){
vari=this.particles.length;
while (i–) {
varp=this.particles[i];
p.update(i);
};
};
this.renderParticles=function(){
vari=this.particles.length;
while (i–) {
varp=this.particles[i];
p.render();
};
};
this.clearCanvas=function(){
this.ctx.globalCompositeOperation=’source-over’;
this.ctx.clearRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation=’lighter’;
};
this.loop=function(){
varloopIt=function(){
requestAnimationFrame(loopIt,_this.c);
_this.clearCanvas();
_this.createParticles();
_this.updateLoader();
_this.updateParticles();
_this.renderLoader();
_this.renderParticles();
};
loopIt();
};
};
varisCanvasSupported=function(){
varelem=document.createElement(‘canvas’);
return!!(elem.getContext&&elem.getContext(‘2d’));
};
varsetupRAF=function(){
varlastTime=0;
varvendors= [‘ms’,’moz’,’webkit’,’o’];
for (varx=0;x<vendors.length &&!window.requestAnimationFrame;++x) {
window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame’];
window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame’] || window[vendors[x] +
‘CancelRequestAnimationFrame’];
};
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
varcurrTime=newDate().getTime();
vartimeToCall=Math.max(0,16- (currTime-lastTime));
varid=window.setTimeout(function(){
callback(currTime+timeToCall);
},timeToCall);
lastTime=currTime+timeToCall;
returnid;
};
};
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
};
};
if (isCanvasSupported) {
varc=document.createElement(‘canvas’);
c.width =170;
c.height =100;
varcw=c.width;
varch=c.height;
//$(“#loadingDiv”).append(c);
varload3=document.getElementById(‘load3’);
load3.appendChild(c);
varcl=newlightLoader(c,cw,ch);
setupRAF();
cl.init();
}
varwidth=100;
vartime=4000;
varcurrent=0;
$(“.glow”).animate({
width: width + “%”
},time);
$(“.underglow”).animate({
width: width + “%”
},time);
varinterval=setInterval(increment,45);
varcurrent=0;
functionincrement(){
current++;
$(‘#counter’).html(current+’%’);
if (current==width) {
clearInterval(interval);
}
}
increment();
barWidth();
</script>
</body>
</html>
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册