<!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. ios 的 desciption

    前段时间,终于将 ipa 文件打包完毕,上传appStore ,最后被打回,是因为 敏感的调用设备功能没有写描述. 有两种解决方式: A.直接修改 info.plist 文件 1.设置启动图标(CFB ...

  2. jQuery实现页面关键词高亮

    示例代码,关键位置做了注释,请查看代码: <html> <head> <title>jQuery实现页面关键词高亮</title> <style ...

  3. break的使用方法

    private static void test() {  for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { Syst ...

  4. spring @Service()中初始化方法

    @Service(value = "xxxServiceImpl" xxxxxxxx) public class XXXSerivceImpl { public void init ...

  5. python之函数用法iter()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法iter() #iter() #说明:对一个对象调用 iter() 就可以得到它的迭代 ...

  6. maven 亲测可用国内镜像 阿里云(20170123)

    来源于:http://www.jianshu.com/p/4d5bb95b56c5 http://blog.csdn.net/qq_27093465/article/details/52982484 ...

  7. SQL Server 数据库表的统计信息的更新

             最近在调整基础信息数据时,新增了几个客户类型,意想不到的事情发生了,在使用新增的客户类型作为 查询条件查询报表时,居然出现了超时的现象,但是用其他以前的客户类型查询就没有问题,用一个 ...

  8. RMAN备份时报“ORA-19504: failed to create file”和“ORA-27038: created file already exists”

    RMAN> run { > allocate channel ch00 type disk; > backup format '/dbbackup/db_%T' database; ...

  9. Trie树 - 字典树

    1.1.什么是Trie树 Trie树,即字典树,又称单词查找树或键树,是一种树形结构.典型应用是用于统计和排序大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的优点是最大限 ...

  10. Linux内核(17) - 高效学习Linux驱动开发

    这本<Linux内核修炼之道>已经开卖(网上的链接为: 卓越.当当.china-pub ),虽然是严肃文学,但为了保证流畅性,大部分文字我还都是斟词灼句,反复的念几遍才写上去的,尽量考虑到 ...