<!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. CentOS 7.4 基于LNMP搭建wordpress

    之前有好多次搭建wordpress的经历,有在Ubuntu系统上,有在CentOS7.2系统上,但都是搭完还是稀里糊涂的,因为好多都是教程上照着敲的.这次好好出个教程,以便以后方便查看. 准备工作:C ...

  2. CSS清除浮动8大方法

    CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...

  3. day24 02 单继承（派生）

    day24 02 单继承(派生) 1.首先来看一个简单的例子 比如: 狗类的属性有:吃,喝,看门 鸟类的属性有:吃,喝,下蛋 看门和下蛋就是这两种动物不同的属性,而吃喝是两个共同的属性 以下代码实现了 ...

  4. 并查集：CDOJ1593-老司机破阵 （假的并查集拆除）

    老司机破阵 Time Limit: 4500/1500MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Problem Descri ...

  5. 字符串：HDU5371-Hotaru's problem（manacher 的应用）

    Hotaru's problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Pr ...

  6. Cplex: MIP Control Callback

    *本文主要记录和分享学习到的知识,算不上原创 *参考文献见链接 之前,我们有简单提到Cplex中的MIP Callback Interface,包括了Informational callback, q ...

  7. Python虚拟机中的一般表达式（一）

    在Python虚拟机框架这一章中,我们通过PyEval_EvalFrameEx看到了Python虚拟机的整体框架.而这章开始,我们将了解Python虚拟机是如何完成对Python的一般表达式的执行,这 ...

  8. tomcat6-servlet规范对接 与 ClassLoader隔离

    之前写的一个ppt 搬到博客来

  9. rocketmq源码分析1-benchmark学习

    benchmark 分析 组成部分 三个java类,都含有main方法,可选的传递一些参数,诸如测试线程数量,消息体积大小.三个类分别用于测试普通生产者,事务生产者,消费者.生产者 默认64个测试线程 ...

  10. Selenium WebDriver-下拉框断言

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...