<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>loading</title>

</head>

<style>

    .icon{display: inline-block;

        background: url("../imgs/icon.png") no-repeat;

        background-size: 350px 250px;}

    i.loading-icon{width: 15px;

        height: 15px;background-position: 0 -90px;

        -webkit-animation: loading 1s linear infinite;}

    @-webkit-keyframes loading {

        from { -webkit-transform: rotate(0deg) translateZ(0); }

        to { -webkit-transform: rotate(360deg) translateZ(0); }

    }

    .search-loading-icon{background-position:-15px -228px;

        width:20px;height:20px;-webkit-animation:

            loading 1s linear infinite;}

    .search-loading-txt{font-size:12px;color:#999;margin-top:10px;}

    dot{

        display: inline-block;

        height: 1em; line-height: 1;

        text-align: left;

        vertical-align: -.25em;

        overflow: hidden;

    }

    dot::before {

        display: block;

        content: '...\A..\A.';

        white-space: pre-wrap;   /* 也可以是white-space: pre */

        animation: dot 3s infinite step-start both;

    }

    @keyframes dot {

        33% { transform: translateY(-2em); }

        66% { transform: translateY(-1em); }

    }

</style>

<body>

<div class="search-loading" >

    <div class="search-loading-img">

        <i class="icon_two search-loading-icon"></i>

    </div>

    <div class="search-loading-txt">搜索中<dot>...</dot></div>

</body>

</html>

旋转加载loading和点点加载loadingdemo的更多相关文章

  1. 在页面加载前先出现加载loading，页面加载完成之后再显示页面

    在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...

  2. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

  3. 谈谈加载(Loading)的那点事

    谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...

  4. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  5. angular $http 请求数据的时候加载loading

    1.目录结构 2.页面加载时效果(加载的时候比较难截图,是页面上方出现一条进度条,然后我另加了一个Loading..的提示,请忽略那个table) 3.页面加载完成后效果 4.index.html & ...

  6. 纯css3 加载loading动画特效

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

  7. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  8. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

  9. react 首页加载loading

    首页加载loading,放在#root里面,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. 关于zookeeper的自我解惑

    分布式服务框架 Zookeeper -- 管理分布式环境中的数据: http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/  ...

  2. OpenERP在product中增加外部网络链接图片

    最近的一个项目要求在Product_Template中增加类似与HTML中<img src=”" />的形式的图片 product_img_extra.py from osv i ...

  3. windows 批处理设置环境变量

      windows通过批处理设置环境变量 CreateTime--2017年8月4日11:28:11Author:Marydon 参考链接:https://wenku.baidu.com/view/a ...

  4. linux shutdown命令

    shutdown [-t 秒] [-arkhncfF] 时间 [警告信息] 常用选项与参数: -t sec : -t 后面加秒数,亦即『过几秒后关机』的意思 -k : 不要真的关机,只是发送警告信息出 ...

  5. 如何高效的阅读hadoop源代码？

    个人谈谈阅读hadoop源代码的经验. 首先,不得不说,hadoop发展到现在这个阶段,代码已经变得非常庞大臃肿,如果你直接阅读最新版本的源代码,难度比较大,需要足够的耐心和时间,所以,如果你觉得认真 ...

  6. 全栈JavaScript之路（十三）了解 ElementTraversal 规范

    支持Element Traversal 规范的浏览器有IE 9+.Firefox 3.5+.Safari 4+.Chrome 和Opera 10+. 对于元素间的空格,在IE9之前.都不会返回文档节点 ...

  7. AWK中的OFS的问题

    echo a b c d |awk '{OFS = ":";print $0}' 我的理解是应该把输出显示为如下的方式 a:b:c:d dan但执行的结果不是这样的 a b c d ...

  8. @NotEmpty、@NotNull 和 @NotBlank 的区别

    1. 三者主要区别如下: @NotEmpty :用于集合类,不能为null,且size>0 @NotNull:不能为null,但可以为empty,没有size的约束 @NotBlank:只用于S ...

  9. 一些很经典的JavaScript的问题

    1.作用域 (function() { var a = b = 5; })(); console.log(b); 输出:5 陷阱是,在函数表达式中有两个赋值,但a是用关键字var 来声明的,这意味着a ...

  10. 内省对象 用的少，被BeanUtils代替

    类 描述 BeanInfo 对JavaBean进行描述的接口 Introspector 描述所有的JavaBean的成员类 PropertyDescriptor 描述的是JavaBean的属性类 sh ...