文档章节

加载页面

o
 oneboi
发布于 2017/01/22 12:05
字数 76
阅读 17
收藏 0

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <script type="text/javascript">

(function(doc, win) {
    var docEl = doc.documentElement,
        dpr = 1,
        scale = 1 / dpr;
    var metaEl = doc.createElement('meta');
    metaEl.name = "viewport";
    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
    docEl.firstElementChild.appendChild(metaEl);

    var recalc = function() {
        var deviceWidth = docEl.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        docEl.style.fontSize = deviceWidth / 6.4 + 'px';
    };
    recalc();
    
})(document, window);

</script> <style type="text/css">

/*遮罩层*/

.mask-layer {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    z-index: 2;

}

.spinner-center {
    position: fixed;
    width: 2.5rem;
    left: 50%;
    top: 40%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.1rem;
    padding: 0.3rem 0;
    text-align: center;
    font-size: 16px;
    margin-left: -1.25rem;
    z-index: 1010;
}

[@media](https://my.oschina.net/u/1447355) screen and (max-width: 321px) {
    .spinner-center {
        font-size: 16px;
    }
}

[@media](https://my.oschina.net/u/1447355) screen and (min-width: 321px) and (max-width: 400px) {
    .spinner-center {
        font-size: 17px;
    }
}

[@media](https://my.oschina.net/u/1447355) screen and (min-width: 400px) {
    .spinner-center {
        font-size: 19px;
    }
}

.loading-message {
    color: #fff;
    padding-top: 0.16rem;
}

.spinner-cc {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0.6rem;
    height: 0.6rem;
}

.spinner-cc div {
    background-color: white;
    position: absolute;
    width: 8%;
    height: 25%;
    top: 60%;
    left: 50%;
    margin-left: -4.15%;
    opacity: 0;
    border-bottom-left-radius: 0.7rem 1.2rem;
    border-bottom-right-radius: 0.7rem 1.2rem;
    -webkit-transform-origin: center -80%;
    -ms-transform-origin: center -80%;
    transform-origin: center -80%;
    -webkit-animation: fade 1s linear infinite;
}

.spinner-cc div.bar1 {
    -webkit-transform: rotate(0deg);
    -webkit-animation-delay: 0s;
}

.spinner-cc div.bar2 {
    -webkit-transform: rotate(30deg);
    -webkit-animation-delay: -0.9167s;
}

.spinner-cc div.bar3 {
    -webkit-transform: rotate(60deg);
    -webkit-animation-delay: -0.833s;
}

.spinner-cc div.bar4 {
    -webkit-transform: rotate(90deg);
    -webkit-animation-delay: -0.75s;
}

.spinner-cc div.bar5 {
    -webkit-transform: rotate(120deg);
    -webkit-animation-delay: -0.667s;
}

.spinner-cc div.bar6 {
    -webkit-transform: rotate(150deg);
    -webkit-animation-delay: -0.5833s;
}

.spinner-cc div.bar7 {
    -webkit-transform: rotate(180deg);
    -webkit-animation-delay: -0.5s;
}

.spinner-cc div.bar8 {
    -webkit-transform: rotate(210deg);
    -webkit-animation-delay: -0.41667s;
}

.spinner-cc div.bar9 {
    -webkit-transform: rotate(240deg);
    -webkit-animation-delay: -0.333s;
}

.spinner-cc div.bar10 {
    -webkit-transform: rotate(270deg);
    -webkit-animation-delay: -0.25s;
}

.spinner-cc div.bar11 {
    -webkit-transform: rotate(300deg);
    -webkit-animation-delay: -0.1667s;
}

.spinner-cc div.bar12 {
    -webkit-transform: rotate(330deg);
    -webkit-animation-delay: -0.0833s;
}

@-webkit-keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

</style>

<div id="js_contentArea" >
    <div class="mask-layer"></div>
    <div class="spinner-center">
        <div class="spinner-cc">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
            <div class="bar4"></div>
            <div class="bar5"></div>
            <div class="bar6"></div>
            <div class="bar7"></div>
            <div class="bar8"></div>
            <div class="bar9"></div>
            <div class="bar10"></div>
            <div class="bar11"></div>
            <div class="bar12"></div>
        </div>
        <div class="loading-message">加载中...</div>
    </div>
</div>

</body> </html>

© 著作权归作者所有

o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
私信 提问
网站常见问题1分钟定位 - 如何使用阿里云ARMS轻松重现用户浏览器问题

客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下: 页面是在用户端的浏...

中间件小哥
01/22
0
0
网站常见问题1分钟定位(三)| 如何使用阿里云ARMS轻松重现用户浏览器问题

这是阿里中间件 ARMS 团队推出的 “网站常见问题1分钟定位”系列文章的第三篇,作者慕扉。 » 第一篇传送门 » 第二篇传送门 一、客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反...

中间件小哥
2018/08/31
0
0
基于seajs加载模块的入口脚本

目录 思路 发现问题 解决等待加载seajs的问题 解决脚本按依赖加载的问题 实现autoload 加载嵌入页面的脚本 完整的entry.js 项目第二版本开始开发的时候,我觉得应该对脚本干点什么。因为之前...

边城__
2014/03/23
0
0
是谁拖了网站访问速度的「后腿」 ?

对做前端开发的同学来说,请求排队、网络、Web 应用程序、页面加载、资源下载这些针对网站的性能指标是很熟悉的。对白屏时间、首屏时间、页面加载完成时间、资源下载完成时间以及整页时间这些...

OneAPM蓝海讯通
2015/11/19
146
0
easy ui dialog 关闭之后的怪异问题

最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师! 事故现场: 增加页面和修改页面是分离的两个jsp文件. 在页面加载时会用jquery去控制一些数据加载和...

Kingstar0423
2017/07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
31分钟前
4
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
34分钟前
4
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
38分钟前
3
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
49分钟前
3
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部