摘要

在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. Java实现压缩与解压缩

    import java.io.*; import java.util.*; import java.util.zip.ZipOutputStream; import java.util.zip.Zip ...

  2. Oracle学习笔记八 表空间

    表空间 表空间是一个或多个数据文件的集合,所有的数据对象都存放在指定的表空间中,但主要存放的是表, 所以称作表空间 .   分区表 当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下 ...

  3. 创建agsXMPP 自定义packet types

    在网上看了好多文章基本都是转载 没有能成功运行的,又没有别的资料,很是费解,无奈之下只好潜心研究,最终总结了几个要点给大家分享下,以免再次多浪费时间 agsXMPP是什么就不多描述了,重点说下我在创建 ...

  4. linux命令在线手册

    下面几个网址有一些 Linux命令的在线手册,而且还是中文的,还可以搜索.非常方便 Linux命令手册 Linux命令大全 Linux中文man在线手册 每日一linux命令

  5. 安卓Socket连接实现连接实现发送接收数据，openwrt wifi转串口连接单片机实现控制

    安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制 socket 连接采用流的方式进行发送接收数据,采用thread线程的方式. 什么是线程?  详细代码介 ...

  6. python下print结果到文件中的方法

    目的是将print的结果输出到一个文件中,比如这个文件在D:\lianxi\out.txt下,我用的windows: s = '1234' f = open (r'D:\lianxi\out.txt' ...

  7. [LeetCode] Reverse Bits 翻转位

    Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...

  8. [LeetCode] Palindrome Number 验证回文数字

    Determine whether an integer is a palindrome. Do this without extra space. click to show spoilers. S ...

  9. 不装mono，你的.NET程序照样可以在Linux上运行！

    让.NET应用程序在linux上运行,目前通用的做法就是在Linux上安装mono,然后通过”mono your.exe“命令运行这个程序. 这种运行.net程序的办法有两个弱点,一个是需要客户机安装 ...

  10. 酷酷的mapv

    做城市热力图的时候无意浏览到mapv强大的功能.比如地图上路线的汇聚效果,如下 <!DOCTYPE html> <html> <head> <meta cha ...