摘要

在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. x01.MagicCube: 简单操作

    看最强大脑,发现魔方还是比较好玩的,便买了一个,对照七步还原法,居然也能成功还原. 为什么不写一个魔方程序呢?在网上找了找,略作修改,进行简单操作,还是不错的,其操作代码如下: protected o ...

  2. how2heap分析系列:0

    新学期到了,给学弟们写点东西, https://github.com/shellphish/how2heap 这个how2heap挺不错的,讲述了heap上几种不同的漏洞利用技术,在后面发的几篇中我会 ...

  3. SVN“验证位置时发生错误”的解决办法

    验证位置时发生错误:“org.tigris.subversion.javahl.ClientException...... 验证位置时发生错误:“org.tigris.subversion.javah ...

  4. Java程序设计之链表结构

    唉,说点废话,昨天偶尔看到一年前自己用C解约瑟夫环问题的循环链表,唏嘘不已,想想自己一年前嵌入式的梦呢,这两天发生了许多,而有些人不在了就真的不在了,心情不好,不多说了,直接上代码,只是些链表的基本操 ...

  5. Android中关于cpu/cpuset/schedtune的应用

    Android中关于cpu/cpuset/schedtune的应用都是基于进程优先级的,根据不同优先级划分进程类型.AMS(ActivityManagerService)和PMS(PackageMan ...

  6. mysqld初探

    一．简介 deamon是守护神的意思,表示守护进程.mysqld就是mysql的服务器端,就是基于socket的一个服务器端程序,它始终监听3306端口(默认端口).mysql是客户端程序. 安装my ...

  7. RecycleView 实现多布局

    最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...

  8. 【Quartz】将定时任务持久化到数据库

    之前的文章所做的demo是将定时任务的信息保存在内存中的,见以下配置 org.quartz.jobStore.class = org.quartz.simpl.RAMJobStore 如果,我们需要在 ...

  9. ASP.NET MVC 应用，站点发布到本地IIS

    材料准备 visual studio 2013 , iis 7 具体步骤 1.以管理员身份启动visual studio 2.新建项目 web app 或者站点 3.编译项目 4.右击项目选择publ ...

  10. xv6的作业翻译——作业1 - shell和系统调用

    Xv6的lecture LEC 1 Operating systems   L1: O/S overview L1:O/S概述   * 6.828 goals 6.828的目标   Understan ...