结合Font Awesome字体图标自定义loading效果

Font Awesome字体图标地址：http://www.fontawesome.com.cn/faicons/

使用javascript DOM操作动态添加loading HTML结构，通过JavaScript方法控制loading的显示与隐藏。

效果：


代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>loading</title>

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

    <style>

        #mask-wrap {

            position: fixed;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            background-color: rgba(0, 0, 0, 0.2);

            z-index: 10000;

        }

        #loading {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            z-index: 9999;

            color: #0066FF;

            text-align: center;

        }

    </style>

</head>

<body>

    <script src="js/jquery-1.10.2.min.js"></script>

    <script>

        $(function() {

            var $loading = "";

            $loading =

                `<div id="mask-wrap">

			<div id="loading">

				<i class="fa fa-spinner fa-spin fa-3x"></i>

				<p>正在加载中...</p>

			</div>

		 </div>`

            $("body").prepend($loading);

            // 显示

            showLoading(true);

        })

        // loading的显示与隐藏

        function showLoading(open) {

            if (open == null) {

                open = true;

            }

            if (open) {

                $("#mask-wrap").show();

            } else {

                $("#mask-wrap").hide();

            }

        }

    </script>

</body>

</html>

　　

自定义loading效果的更多相关文章

  1. CSS3自定义loading效果

    效果: 使用CSS3完成loading的制作 css样式: <style type="text/css"> .mask { position: fixed; left: ...

  2. 自定义ajax,添加loading效果

    自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...

  3. 页面loading效果

    当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...

  4. 网页Loading效果

    问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...

  5. 一个不错的loading效果--IT蓝豹

    一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...

  6. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  7. 加载状态为complete时移除loading效果

    一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...

  8. Cocos2d-JS 自定义loading界面

    [转]http://blog.csdn.net/et_sandy/article/details/41415047 环境: win7 64位 Cocos2d-JS v3.1 Cocos Code ID ...

  9. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

随机推荐

  1. 统计nginx日志

    .根据访问IP统计UV awk '{print $1}' access.log|sort | uniq -c |wc -l .统计访问URL统计PV awk '{print $7}' access.l ...

  2. Tcpdump一些常用指令

    1.tcpdump安装:yum install tcpdump 2.关键字介绍 类型关键字: 指定主机 host 192.168.1.111 指定网络地址 net 202.0.0.0 指定端口 por ...

  3. JpaRepository 查询规范

    1.JpaRepository支持接口规范方法名查询.意思是如果在接口中定义的查询方法符合它的命名规则,就可以不用写实现,目前支持的关键字如下. Keyword Sample JPQL snippet ...

  4. python之路——进程

    操作系统背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其 ...

  5. Python学习---面向对象的学习[深入]

    类的深入学习    a. Python中一切事物都是对象     b. class Foo:             pass                obj = Foo()         # ...

  6. CSS学习---css基础知识0105

    CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...

  7. Compare DML To Both REDO And UNDO Size

    SUMMARY you can remember undo rule  the same to redo if you want demo rule that you can look up the ...

  8. 乘风破浪：LeetCode真题_003_Longest Substring Without Repeating Characters

    乘风破浪:LeetCode真题_003_Longest Substring Without Repeating Characters 一.前言 在算法之中出现最多的就是字符串方面的问题了,关于字符串的 ...

  9. 10G client连接数据库

    tnsnames.ora文件中的名字一定要顶格写(前面不留空格),不然连接时会如下报错. 已使用的参数文件:F:\oracle\product\10.2.0\client_1\network\admi ...

  10. git团队操作

    1.git命令行 1)分支的创建 git branch 分支名 分支创建之后,就会自动pull master的内容 2)分支的查询 git branch 3)分支的进入 git checkout 分支 ...