结合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. 系统测试用例评审checklist

    规则要素内容 使用范围 审查结果 “否”的理由 “免”的理由 规则 建议 是 否 免 规范性规则               用例是否按照公司规定的模板进行编写?  √             用例的 ...

  2. 我的MBTI小测试

    今天做了自己的MBTI测试,选了93道题版本的,测试结果是ESFP表演者型——有我在就有笑声.这个测试很有趣,我也觉得很神奇. 一.我的MBTI图形 二.才储分析:我的性格类型倾向为“ ESFP ”( ...

  3. django源码研究

    研究django源码一年,从启动django开始

  4. alembic 数据库管理

    alembic简介 Alembic是SQLAlchemy作者编写的Python数据库迁移工具 安装 pip install alembic alembic 操作流程 初始化 alembic init ...

  5. git操作合集

    目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...

  6. title: "MappedByteBuffer引起的jvm crash问题“

    

  7. Linux系统环境下安装dedecms(织梦)提示http500错误的解决办法

    碰到一客户安装DEDE提示http500错误,问题已得到完美解决,下面我分享下 这个解决办法,希望有帮助. 故障状态:正常安装dedecms v5.7 gbk提示http500错误Dede安装环境:一 ...

  8. Android学习之Styles And Includes

    最近在看 Android Programming: The Big Nerd Ranch Guide,书写的不错,推荐级别.打算把看书学到的东西,一点一点记录下来.目前看到24章,讲的是style 和 ...

  9. 企业级Ngnix基于域名的配置_server

    普通的nginx配置 egrep -v "#|^$" /usr/local/nginx/conf/nginx.conf.default 更改nginx的配置文件-->注意空格 ...

  10. ASP.NET Core Startup类 Configure()方法 | ASP.NET Core 中间件详细说明

    ASP.NET Core 程序启动过程如下 目录 Startup 类 Configure() 方法 中间件 使用中间件 Configure 方法 的参数 IApplicationBuilder Ext ...