<!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. 腾讯云Ubuntu服务器修改root密码

    1.修改root密码 执行以下命令,按照提示修改密码 sudo passwd root 2.修改ssh配置 执行以下命令 sudo vi /etc/ssh/sshd_config 找到 PermitR ...

  2. LeetCode（217）Contains Duplicate

    题目 Given an array of integers, find if the array contains any duplicates. Your function should retur ...

  3. HDU - 1496 Equations （hash）

    题意: 多组测试数据. 每组数据有一个方程 a*x1^2 + b*x2^2 + c*x3^2 + d*x4^2 = 0,方程中四个未知数 x1, x2, x3, x4 ∈ [-100, 100], 且 ...

  4. SSAS——MDX基础

    一.基本概念 MDX:一种查询语言,从多维的数据集单元格中检索数据.支持两种不同的模式: 1.表达式语言:定义和操纵Analysis Services对象和数据以计算值 2.查询语言:从Analysi ...

  5. MySQL 的MAC终端一些指令总结

    开启MySQL服务 sudo /usr/local/mysql/support-files/mysql.server start 关闭MySQL服务 udo /usr/local/mysql/supp ...

  6. POJ-3278 广度优先搜索入门

    #include<stdio.h> #include<stdlib.h> struct node{ int x; int s; }s[]; int main(){ ]={}; ...

  7. JS实现——贪吃蛇

    把以下代码保存成Snake.html文件,使用Google或360浏览器打开 <!DOCTYPE HTML> <html> <head> <meta char ...

  8. MySQL数据库详解（二）执行SQL更新时,其底层经历了哪些操作?

    ​ 前面我们系统了解了一个查询语句的执行流程,并介绍了执行过程中涉及的处理模块.相信你还记得,一条查询语句的执行过程一般是经过连接器.分析器.优化器.执行器等功能模块,最后到达存储引擎. 那么,一条更 ...

  9. 匈牙利算法 - Luogu 1963 变换序列

    P1963 变换序列 题目描述 对于N个整数0,1,-,N-1,一个变换序列T可以将i变成Ti,其中:Ti∈{0,1,-,N-1}且 {Ti}={0,1,-,N-1}. x,y∈{0,1,-,N-1} ...

  10. python - work5 - 类与对象 - 拓展题

    ''' 5:购物车类,包含的功能如下,请自行设计这个类以及类里面的方法:1)用户输入工资后,打印商品列表(商品列表自行设计展示模式)2)允许用户根据商品编号去选择商品3)用户选择商品后,检查余额是否足 ...