摘要

在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。

Html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

    <style>

        .cssload-container {

            width: 24px;

            height: 24px;

            position: fixed;

            top: 260px;

            left: 50%;

            margin-left: -12px;

        }

        .cssload-speeding-wheel {

            width: 60px;

            height: 60px;

            margin: 0 auto;

            border: 2px solid rgba(0,0,0,0.25);

            border-radius: 50%;

            border-left-color: transparent;

            border-right-color: transparent;

            animation: cssload-spin 575ms infinite linear;

            -o-animation: cssload-spin 575ms infinite linear;

            -ms-animation: cssload-spin 575ms infinite linear;

            -webkit-animation: cssload-spin 575ms infinite linear;

            -moz-animation: cssload-spin 575ms infinite linear;

        }

        @keyframes cssload-spin {

            100% {

                transform: rotate(360deg);

                transform: rotate(360deg);

            }

        }

        @-o-keyframes cssload-spin {

            100% {

                -o-transform: rotate(360deg);

                transform: rotate(360deg);

            }

        }

        @-ms-keyframes cssload-spin {

            100% {

                -ms-transform: rotate(360deg);

                transform: rotate(360deg);

            }

        }

        @-webkit-keyframes cssload-spin {

            100% {

                -webkit-transform: rotate(360deg);

                transform: rotate(360deg);

            }

        }

        @-moz-keyframes cssload-spin {

            100% {

                -moz-transform: rotate(360deg);

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="cssload-container">

        <div class="cssload-speeding-wheel"></div>

    </div>

    <script>

        function showLoading() {

            $(".cssload-container").show();

        };

        function hideLoading() {

            $(".cssload-container").hide();

        };

        var times = 1;

        setInterval(function () {

            if (times % 2 === 0) {

                hideLoading();

            } else {

                showLoading();

            };

            times++;

        }, 2000)

    </script>

</body>

</html>

效果

把需要的css贴过去，然后把这段代码放在需要显示的页面上

 <div class="cssload-container">

        <div class="cssload-speeding-wheel"></div>

    </div>

控制显示与隐藏的js

   function showLoading() {

            $(".cssload-container").show();

        };

        function hideLoading() {

            $(".cssload-container").hide();

        };

一个简单实用的css loading图标的更多相关文章

  1. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  2. LogCook 一个简单实用的Android日志管理工具

    众所周知,日志的管理是软件系统很重要的一部分,千万不可忽略其重要性.完整的日志将会在系统维护中起着异常重要的作用,就好像磨刀不误砍柴工一样,日志就像对系统进行分析的工具,工具便捷了,对系统分析起来就能 ...

  3. 基于gulp编写的一个简单实用的前端开发环境好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  4. 基于gulp编写的一个简单实用的前端开发环境

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  5. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

  6. 几个简单实用的css效果

    1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可. eg:#button { background: #888; border: 2px solid; borde ...

  7. 开发一个简单实用的android紧急求助软件

    之前女朋友一个人住,不怎么放心,想找一个紧急求助的软件,万一有什么突发情况,可以立即知道.用金山手机卫士的手机定位功能可以知道对方的位置状态,但不能主动发送求助信息,在网上了很多的APK,都是鸡肋功能 ...

  8. 从零开始，做一个简单的Vuetify项目，图标安装成功

    安装Vuefity的时候,碰到一些坑,经过一番折腾,终于成功,记录正确的姿势如下: 创建一个Vue项目: vue init webpack-simple vular-admin 进入项目目录: cd ...

  9. 也谈SSO，一个简单实用的单点登录Demo

    关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...

随机推荐

  1. sql 优化

    1.选择最有效率的表名顺序(只在基于规则的优化器中有效): oracle的解析器按照从右到左的顺序处理 from 子句中的表名,from子句中写在最后的表(基础表driving table)将被最先处 ...

  2. SQL 中的 AND OR

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 ...

  3. 基于keepalived双主模型的高可用LVS

    背景知识: keepalived:Keepalived的作用是检测web服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的web 服务器从系统中剔除, ...

  4. struts2+hibernate整合-实现登录功能

    最近一直学习struts2+hibernate框架,于是想把两个框架整合到一起,做一个小的登录项目.其他不多说,直接看例子. 1).Struts2 和hibernate的环境配置 包括jar包.web ...

  5. nginx配置

    先在 cd /usr/local/nginx/conf 目录下找到 nginx.conf 文件 user www www; worker_processes 8; error_log /home/ww ...

  6. 数据库 数据库SQL语句三

    转换函数 to_char()字符串转换日期函数 --查询大于某个日期的员工信息 select * from emp where hiredate>to_date('1980-02-12','yy ...

  7. November 1st 2016 Week 45th Tuesday

    Difficult circumstances serve as a textbook of life for people. 艰难坎坷是人们的生活教科书. It would be better if ...

  8. [LeetCode] Wiggle Sort 摆动排序

    Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...

  9. 一个前端程序猿的Sublime Text3的自我修养

    来源于:http://guowenfh.github.io/2015/12/26/SublimeText/ 详细设置 && 20+插件 本文章会在本人有插件或者设置更新时,进行不定时更 ...

  10. 精灵方向移动问题[math.floor]

    local xd = math.cos(math.rad(self._direction));--self._direction方向角度 local yd = math.sin(math.rad(se ...