结合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. Redis的基本操作语句

    注:以下出现的key.value都需要具体 1.String类型的数据存储获取 set key value:设置key的值为value,若存在则覆盖,不存在则自动创建decrby get key:获取 ...

  2. 学习笔记：IIS搭建PHP网站出现404错误的解决办法

    关于404错误提示相信大家都遇到过吧,记得我遇到这个问题的时候,弄得我焦头烂额的,今天给大家分享下,使用IIS大家PHP网站时出现404错误提示的处理方法,希望对各位朋友有所帮助.IIS搭建PHP出现 ...

  3. java笔记--正则表达式的运用（包括电话，邮箱验证等）

    正则表达式 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3877402.html "谢谢-- 正则表达式符号:" ...

  4. 使用TFHpple解析html

    使用TFHpple解析html https://github.com/topfunky/hpple 前期准备工作 引入静态库文件 添加库文件的 header search paths(注意,必须选中 ...

  5. Python实例---利用正则实现计算器[参考版]

    利用正则进行运算规则的计算 版本一: # import re # # ss = '1 - 2 * ((60 - 30 + (-40/5) * (9 - 2 * 5 / 3 + 7 / 3 * 99 / ...

  6. xsd文件记录

    <MESSAGE Version="1.0"> <CV_HEADER MsgType=" /> <QUERY_PROFILE> < ...

  7. Linux命令--压缩解压(简化版)

    Linux tar.gz.tar.bz2.zip 等解压缩.压缩命令详解(简化版) Linux 常用的压缩与解压缩命令有:tar.gzip.gunzip.bzip2.bunzip2.compress ...

  8. 彻底关闭Firefox自动更新的方法

    自己最近在使用firefox进行自动化测试时,发现配置好的firefox总是会自动更新,主要是因为一些高版本的浏览器无法安装firepath,没有firepath的火狐浏览器使用起来总是有很多的不方便 ...

  9. JS：二维数组排序和获取子级元素

    JS:二维数组排序和获取子级元素 1. 二维数组排序 1.按数值排序 var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]]; 如果我们要按每个子数组的第一列来排序要如 ...

  10. webpack和gulp

    在没有使用任何自动化工具之前,如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件,然后各自minify(js,css文件压缩并合并).这时如 ...