<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">

        <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>

        <link rel="stylesheet" href="css/loadDodui.css" />

    </head>

    <body>

        <script src="js/loadingDodui.js"></script>

    </body>

</html>
loadDodui.css：
.loadDodui {

    position: fixed;

    top:;

    left:;

    width: 100%;

    height: 100vh;

    background: rgba(0, 0, 0, .4);

}

.spinner {

    font-size: 20px;

    width: 1.5em;

    height: 1.5em;

    border-radius: 50%;

    box-shadow: inset 0 0 0 .1em rgba(234, 70, 142, .2);

    position: absolute;

    top: 50%;

    left: 50%;

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

}

.spinner i {

    position: absolute;

    clip: rect(0, 1.5em, 1.5em, 1em);

    width: 1.5em;

    height: 1.5em;

    animation: spinner-circle-clipper 1s ease-in-out infinite;

}

@keyframes spinner-circle-clipper {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(180deg);

    }

}

.spinner i:after {

    position: absolute;

    clip: rect(0, 1.5em, 1.5em, 1em);

    width: 1.5em;

    height: 1.5em;

    content: '';

    animation: spinner-circle 1s ease-in-out infinite;

    border-radius: 50%;

    box-shadow: inset 0 0 0 .1em #ea468e;

}

@keyframes spinner-circle {

    0% {

        transform: rotate(-180deg);

    }

    100% {

        transform: rotate(180deg);

    }

}

loadingDodui.js：
function loadingDodui(){

    var htmlDodui=document.createElement("div");

    var html2Dodui=document.createElement("div");

    var chlidHtml=document.createElement("i");

    htmlDodui.classList.add("loadDodui");

    htmlDodui.appendChild(html2Dodui);

    html2Dodui.appendChild(chlidHtml);

    html2Dodui.classList.add("spinner");

    htmlDodui.appendChild(html2Dodui);

    document.getElementsByTagName("body")[0].appendChild(htmlDodui)

}

loadingDodui()
实现的效果：静态图，我真的很想放gif，但我用手机录制效果时，视觉效果很模糊

HTML-loading动画1的更多相关文章

  1. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

  2. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  3. loading动画效果记录

    看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...

  4. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  5. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  6. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  7. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

  8. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  9. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  10. 页面加载loading动画

    关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...

随机推荐

  1. pycharm安装 suds模块报错：AttributeError: module 'pip' has no attribute 'main'

    需求:安装suds模块 遇到的问题: 一.报错信息:[file][Default Settint]---Project Interpreter 点击 搜索suds安装模块报错 解决:依据上图提示找到C ...

  2. centos7.4进入单用户模式

    centos7.4进入单用户模式 1 - 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/b ...

  3. 【Linux】开放指定端口设置

    这里以开放tomcat的8080端口为例 1.开放Linux的8080端口 vi /etc/sysconfig/iptables 进入编辑页面,在指定位置新增以下配置 -A INPUT -m stat ...

  4. ActiveXObject

    只有IE浏览器才支持这个构造函数,可以用这个来判断,当前是否为IE浏览器 var isIE=!!window.ActiveXObject; 在IE的不同版本下,要创建XHR对象,也需要通过这个构造函数 ...

  5. wamp开发环境配置之配置Apache虚拟主机

    网站建设人员在本地测试时,常常不是一个网站,那怎么能像输入域名一样在地址栏上面输入“域名”就能本地访问该网站呢?这里就要配置Apache虚拟主机了! 1.找到apache\conf\httpd.con ...

  6. day 35 补充

      MySQL数据库初识   MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集 ...

  7. Linux学习-核心的编译与安装

    编译核心与核心模块 核心与核心模块需要先编译起来,而编译的过程其实非常简单,你可以先使用『 make help 』去查 阅一下所有可用编译参数, 就会知道有底下这些基本功能: [root@study ...

  8. Nginx与Lua的开发

    1. Lua基础语法 安装lua hello world 也可以编写lua脚本 运行脚本 lua注释 变量 局部变量的话前面加个local 循环 if语句 2. Nginx与Lua开发环境 https ...

  9. selenium - 常用浏览器操作方法

    常用浏览器操作 (1)初始化浏览器会话: from selenium import webdriver driver = webdriver.Chrome() (2)浏览器最大化操作: driver. ...

  10. grunt-nodemon参数配置

    grunt-nodemon参数配置 nodemon0.2.0版本后参数名称做了较大改动,调整了下nodemon的参数配置,有需要的同学可以参考下: 1 2 3 4 5 6 7 8 9 10 11 12 ...