几个页面loading样式

  随手练习了几个loading样式,以后看到有意思的loading样式也会补充上。样式的兼容性建议还是去w3c上看下属性的兼容性,至少我习惯这么多,当然,w3c中文网貌似很久很久没更新过了,可能更好的还是去google下。

  我给出的代码一般会把浏览器前缀样式给省略,因为像动画的关键帧这样的需要前缀的会使代码很长。

  下面给出示意图和代码:

  (1)两个小球:

  

  

 1 <!doctype html>
 2 <head>
 3 <title>两个小球</title>
 4 <style>
 5     .loading-area {
 6         position: fixed;
 7         top: 50%;
 8         left: 50%;
 9         margin: -50px 0 0 -40px;
10         width: 80px;
11         height: 100px;
12         text-align: center;
13         border-radius: 4px;
14         background-color: rgba(0, 0, 0, .04);
15     }
16
17     .icon-ball:before, .icon-ball:after {
18         content: ‘‘;
19         position: absolute;
20         display: inline-block;
21         top: 20px;
22         left: 50%;
23         margin-left: -7px;
24         width: 14px;
25         height: 14px;
26         border: 1px solid #999;
27         border-radius: 50%;
28         box-sizing: border-box;
29         background-color: #999;
30         /*-webkit-animation: loading 1.8s linear alternate infinite;*/
31         animation: loading 1.8s linear alternate infinite;
32     }
33
34     .icon-ball:after {
35         top: 70px;
36         animation-name: another-loading;
37         border-color: rgba(0, 0, 0, .04);
38         background-color: rgba(0, 0, 0, .08);
39     }
40
41     @keyframes loading {
42         0% {top: 20px;}
43         100% {top: 70px;}
44     }
45
46     @keyframes another-loading {
47         0% {top: 70px;}
48         100% {top: 20px;}
49     }
50 </style>
51 </head>
52 <body>
53 <div class="loading-area icon-ball">
54 </div>
55 </body>
56 </html>

  

  (2)时钟:

  
  

<!doctype html>
<head>
<title>时钟</title>
<style>
    .loading-area {
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -40px;
        width: 80px;
        height: 100px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .04);
    }

    .icon-timer {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -15px 0 0 -15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
    }

    .icon-timer:before, .icon-timer:after {
        content: ‘‘;
        display: inline-block;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin-left: -1px;
        width: 2px;
        height: 8px;
        background-color: #333;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        /*transform-origin: center bottom;*/
    }
    .icon-timer:before {
        /*-webkit-animation: hourhand 24s linear infinite;*/
        animation: hourhand 24s linear infinite;
    }

    .icon-timer:after {
        height: 12px;
        /*-webkit-animation: minutehand 2s linear infinite;*/
        animation: minutehand 2s linear infinite;
    }

    @keyframes hourhand {
        0% {transform: rotate(0deg)}
        100% {transform: rotate(360deg);}
    }

    @keyframes minutehand {
        0% {transform: rotate(0deg)}
        100% {transform: rotate(360deg);}
    }
</style>
</head>
<body>
<div class="loading-area">
    <i class="icon-timer"></i>
</div>
</body>
</html>

  (3)、充电

  

  

<!doctype html>
<head>
<title>充电</title>
<style>
    .loading-area {
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -40px;
        width: 80px;
        height: 100px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .04);
    }

    .icon-charge {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -20px;
        width: 40px;
        height: 20px;
        /*border: 1px solid #333;*/
        border-radius: 4px;
        background-color: #fff;
    }

    .icon-charge:after {
        content: ‘‘;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 20px;
        border-radius: 4px;
        background-color: #ddd;
        /*-webkit-animation: charge 2s linear alternate infinite;*/
        animation: charge 2s linear alternate infinite;
    }

    @keyframes charge {
        0% {width: 0;}
        100% {width: 40px; background-color: #3dec3a;}
    }

    .icon-charge:before {
        content: ‘‘;
        position: absolute;
        top: -12px;
        left: -12px;
        width: 8px;
        height: 8px;
        background-color: #000;
        animation: move 8s ease infinite;
    }

    @keyframes move {
        0% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}
        25% {top: -12px; left: 52px; transform: rotate(360deg); border-radius: 50%;}
        50% {top: 32px; left: 52px; transform: rotate(0deg); border-radius: 0;}
        75% {top: 32px; left: -12px; transform: rotate(360deg); border-radius: 50%;}
        100% {top: -12px; left: -12px; transform: rotate(0deg); border-radius: 0;}
    }
</style>
</head>
<body>
<div class="loading-area">
    <i class="icon-charge"></i>
</div>
</body>
</html>
时间: 2024-10-17 03:25:54

几个页面loading样式的相关文章

A标签/按钮防止重复提交&amp;页面Loading制作

[实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为不可用,在提交完成的回调函数中再将按钮/A标签置为可用:Loading原理是在点击提交时,生成Loading样式,在提交完成之后隐藏该样式. [同步]:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 [异步]:请求通过事件触发->服务器处理(这是浏览器仍然可以作

php开发之js修改页面css样式

在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过js修改页面的样式,觉得有必要和大家分享下. test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

页面重置样式reset.css

我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} /*这里不要用通配符*{margin:0;padding:0;}因为会遍

js页面loading加载

<html>     <head>     <title>页面正在载入</title>       <script  language="javascript">        document.write('<div id="loadDiv" style="font-size: 12px;left: 50%;position: absolute;top: 40%;"><

mime导致zabbix web页面css样式不能显示的问题

在一台新系统上yum装完zabbix后发现web页面不能正确显示css样式表.页面如下图: 看了下目录发现.css文件和图片文件都在,不是文件路径的问题.百度了下发现是mime把text/css解析成text/html造成的.于是干脆找了一份比较全的mime.types文件放到/etc下,重命名为apache_mime.types.然后修改Apache的配置文件修改mime文件路径为/etc/apache_mime.types. 重启httpd服务并清除缓存后页面显示正常. mime.types

recent.css常用的页面初始化样式

<style> @charset "utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{ font-weight: normal;} li { list-style: none; } img { border: non

移动端页面默认样式重置

1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) -webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用.android上只要使用了此属性就表现为边框.在body上加此属性,这

JQuery实现页面Loading效果

第一步:添加遮罩层和LOADING层 <div class="overlay"></div><div id="AjaxLoading" class="showbox"> <div class="loadingWord"><img src="../JS/waiting.gif">加载中,请稍候...</div></div> 第

活动页面优惠券样式

上周五在大前端中看到一种写优惠券的样式.在本地测试了一把,个人觉得还不错.现在很多活动页面中都会有优惠券,以后可以在页面中试一下...... HTML代码: <div class="stamp stamp01"> <div class="par"> <p>XXXXXX折扣店</p> <sub class="sign">¥</sub> <span>50.00<