<!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. H5中JavaScript常用代码片段

    /** * 批量替换方法,批量过滤特殊字符,通常用在通过后的各种编辑器添加的内容在App上编辑上使用 * james.wang 2016-11-11 * 使用方法:ReCont(Content,[&q ...

  2. maven 配置环境变量

      maven 环境变量配置 CreationTime--2018年6月4日18点45分 Author:Marydon 前言 要先运行maven,需要按安装并配置jdk,没有配置的见文末推荐. 1.m ...

  3. 调用网易有道词典api

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #调用网易有道词典api import urllib import json class Youdao(): ...

  4. c# 判断端口是否被占用

    这里主要用到:命名空间System.Net.NetworkInformation下定义了一个名为IPGlobalProperties的类 具体代码 class PortHelper { #region ...

  5. permission denied make_sock could not bind to address 81问题解决

    在apache中绑定非http标准端口时,一直出现如下的错误提示: [root@localhost ~]# /etc/init.d/httpd start Starting httpd: (13)Pe ...

  6. 微信小程序基于scroll-view实现锚点定位

    代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. TP3.2之引入第三方类库文件和普通.php文件

    1.引入第三方类库 .class.php文件 1.1 类库有写namespace命名空间 namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/ ...

  8. 标头“Vary:Accept-Encoding”指定方法[转]

    现在的新浏览器都支持压缩了,因此如果网站启用了GZip,可以无需再指定“Vary: Accept-Encoding”标头,不过指定“Vary: Accept-Encoding”标头会有更高的保险,而它 ...

  9. Https自签名证书认证及数据请求的封装

    在WWDC 2016开发者大会上,苹果宣布了一个最后期限:到2017年1月1日 App Store中的所有应用都必须启用 App Transport Security安全功能.App Transpor ...

  10. 消息队列内核结构和msgget、msgctl 函数

    一.消息队列 1.消息队列提供了一个从一个进程向另外一个进程发送一块数据的方法 2.每个数据块都被认为是有一个类型,接收者进程接收的数据块可以有不同的类型值 3.消息队列与管道不同的是,消息队列是基于 ...