摘要

在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. C#冒泡排序算法

    用了两种形式的数据,一个是泛型List,一个是数据int[].记录一下,作为自己学习过程中的笔记. using System; using System.Collections.Generic; us ...

  2. GreenPlum高效去除表重复数据

    1.针对PostgreSQL数据库表的去重复方法基本有三种,这是在网上查找的方法,在附录1给出.但是这些方法对GreenPlum来说都不管用. 2.数据表分布在不同的节点上,每个节点的ctid是唯一的 ...

  3. 搭建SVN服务器

    系统环境:CentOS 6.6   首先查看服务器上是否已安装了svn # rpm -qa subversion 如果没有安装,则执行此命令 # yum list subversion         ...

  4. IIS将错误信息发送到浏览器

    本文版权归博客园和dige1993所有,访问作者博客:http://www.cnblogs.com/dige1993 最近又开始玩ASP了,调试的时候出现错误不清楚详细错误信息特别不方便,记得以前可以 ...

  5. idea fect

    idea facet 昨天从svn检查一个项目后,部署至tomcat服务器,启动成功,但实际代码其实没有进去, 因为该项目不是maven项目, artifacats是自己配的, 应该是这里弄错的. 最 ...

  6. web视频添加webvtt字幕测试

    1.使用MP4硬字幕,如下, 2.使用HTML5 添加webvtt字幕,可惜到现在还没有测试成功.

  7. jpa+springdata

    学习爱酷学习网尚硅谷springdata笔记: 1.在 Spring 配置文件 <?xml version="1.0" encoding="UTF-8"? ...

  8. 百度广告 高亮 Chrome插件(附源码)

    一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财 ...

  9. 安装 pyopenssl c/_cffi_backend.c:15:17: 致命错误：ffi.h：

    错误 c/_cffi_backend.c:15:17: 致命错误:ffi.h: 解决方案 yum install -y libffi-devel 或ubuntu中 apt-get install -y ...

  10. Code Conventions for the Java

    Oracel官方JAVA编码规范指引 http://www.oracle.com/technetwork/java/codeconvtoc-136057.html