<!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. 06grep与find命令详解

    1. grep 命令 grep 命令用于在文本中执行关键词搜索,并显示匹配的结果,格式为"grep [选项][文件]". grep 命令的参数及其作用如下: -b 将可执行文件(b ...

  2. Python中的字典与集合

    今天我们来讲一讲python中的字典与集合 Dictionary:字典 Set:集合 字典的语法: Dictionary字典(键值对) 语法: dictionary = {key:value,key: ...

  3. dict 方法总结整理

    #!/usr/bin/env python __author__ = "lrtao2010" #Python 3.7.0 字典常用方法 #字典的key是唯一的,且不能被修改,val ...

  4. nrf528xx bootloader 模块介绍（转载）

    转载https://www.cnblogs.com/rfnets/p/8205521.html 1. bootloader 的基本功能: 启动应用 几个应用之间切换 初始化外设 nordic nrf5 ...

  5. Educational Codeforces Round 53 (Rated for Div. 2) C Vasya and Robot 二分

    题目:题目链接 思路:对于x方向距离与y方向距离之和大于n的情况是肯定不能到达的,另外,如果n比abs(x) + abs(y)大,那么我们总可以用UD或者LR来抵消多余的大小,所以只要abs(x) + ...

  6. Hadoop4.2HDFS测试报告之四

    第二组:文件存储读过程记录 测试系统组成 存储类型 测试程序或命令 测试文件大小(Mb) 文件个数(个) 客户端并发数(个) 读速率 (M/s) NameNode:1 DataNode:1 本地存储 ...

  7. P2598 [ZJOI2009]狼和羊的故事（最小割）

    P2598 [ZJOI2009]狼和羊的故事 题目描述 “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．” Orez听到这首歌,心想:狼和羊如此和谐,为什么 ...

  8. Leetcode31--->Next Permutation(数字的下一个排列)

    题目: 给定一个整数,存放在数组中,求出该整数的下一个排列(字典顺序):要求原地置换,且不能分配额外的内存 举例: 1,2,3 → 1,3,2:  3,2,1 → 1,2,3:  1,1,5 → 1, ...

  9. day01_05.数学运算符

    数学运算符 $zhang = 100; $lisi = 50; echo $zhang+$lisi; 答案:150 $zhang = 50; $lisi = 40; echo $zhang - $li ...

  10. html 标签附加文本属性

    <!DOCTYPE html> <html> <head> <script> function showDetails(animal) { var an ...