摘要

在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. vim 中替换

    将80替换为10.0.0.19:80 :g/80/s//10.0.0.19:80/g

  2. Appium scroll 滑动查找

    首先看uiautomator如何实现滑动查找 UiScrollable scrollView = new UiScrollable(new UiSelector().className("a ...

  3. Maven build lifecycle

    Clean Lifecycle 运行mvn clean执行clean生命周期,包含三个生命周期阶段: pre-clean clean post-clean clean:clean会删除一次构建后的输出 ...

  4. 【码在江湖】前端少侠的json故事（上）日月第一击

    日月第一击 这是我前端生涯第一次和后台对接,其经历真是苦不堪言,多次绝处逢生,柳暗花明,可就是迟迟见不到那条村子.当然,最后我还是完成了这次对接.下面来聊一聊我这白痴一般的经历. 序章 话说天下大势, ...

  5. (转)NIO与AIO，同步/异步，阻塞/非阻塞

    原文地址: http://www.cnblogs.com/enjoy-ourselves/p/3793771.html 1.flip(),compact(),与clear()的使用 flip()内部实 ...

  6. BZOJ 3555: [Ctsc2014]企鹅QQ [字符串哈希]【学习笔记】

    3555: [Ctsc2014]企鹅QQ Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 2046  Solved: 749[Submit][Statu ...

  7. oracle add_months函数

    oracle add_months函数 add_months 函数主要是对日期函数进行操作,举例子进行说明 add_months 有两个参数,第一个参数是日期,第二个参数是对日期进行加减的数字(以月为 ...

  8. [LeetCode] Jump Game 跳跃游戏

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. 判断是pc端还是手机端，并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

  10. JavaScript检测对象的类属性

    function classof(o) { if(o === null) { return "Null"; } if(o === undefined) { return " ...