<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3订单提交按钮Loading代码</title>
<style>
body{text-align: center}
.grebtn{
display: inline-block;
padding: 0.5em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight: inherit;
border-color: #208000 #1F7F00;
background-color: #289600;
box-shadow: inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62;
color: #fff;
text-shadow: 0 -1px #137900;
margin: 100px auto;
}
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;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
</style>
</head>
<body>

<div class="grebtn">订单提交中<dot>...</dot></div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

CSS3订单提交按钮Loading代码的更多相关文章

  1. DJANGO-天天生鲜项目从0到1-011-订单-订单提交和创建

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  2. HTML中图像代替提交按钮

    1. 用图像代替提交按钮 当只有一个提交按钮的时候 ,可以简单的实现,不用添加事件函数,代码是: <input type = "image"' name = ".. ...

  3. jquery实时监测手机号是否符合规则，并根据手机号检测结果将提交按钮设为不同状态

    功能: 输入手机号,实时判断手机号输入的是否符合规则: 如果不合规则,则提交按钮为禁用状态,手机号信息不可提交,按钮显示灰色背景: 如果符合规则,则可提交所输入的手机号信息,并将按钮背景设成红色. 代 ...

  4. MVC项目实践,在三层架构下实现SportsStore-07,实现订单提交

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  5. ASP.NET多次点击提交按钮以及Session超时和丢失过期问题

    1.ASP.NET防止多次点击提交按钮 对于一个按钮,要让变成恢色的,只要this.disabled=true就可以了,可是在.NET里,添加了OnClick事件后,就无法提交信息了.所以要加上以下代 ...

  6. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  7. CSS3实现10种Loading效果（转）

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

  8. ios开发之--textview意见反馈页面（占位label，字数统计，提交按钮的交互设置）

    记录一个页面的功能: textview的占位符,字数统计,提交按钮的交互设置,具体效果图如下:

  9. CSS3实现8种Loading效果【二】

    CSS3实现8种Loading效果[二]   今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...

随机推荐

  1. 16/7/7_PHP-面向对象关键词

    转载地址: http://blog.sina.com.cn/s/blog_5182b171010092fb.html PHP5 是一具备了大部分面向对象语言的特性的语言,比PHP4 有了很多的面向对象 ...

  2. 自翻唱龙珠超OP2【限界突破X幸存者】

    娱乐向:自翻唱龙珠超OP2[限界突破X幸存者] 翻唱度盘下载>> MP4: http://video.yingtu.co/0/e20dad3b-14d1-47a4-ad26-196a961 ...

  3. uni-app-v-else中不需要值

    这个问题把我都高懵逼了 在vue中, 但是在uni-app中:v-else不需要值, 下面去掉值就Ok了

  4. linux eclipse 下出现undefined reference ***，在使用boost库时出现的问题

    直接在eclipse下添加boost_system就可以了,这个文件有可能在库中找不到,或者名字不一样,直接使用这个名字就可以了,在setting 下

  5. Java 基础知识整理 （待整理)

    JVM之类加载器(ClassLoader)基本介绍 类加载器用于将class文件加载到JVM中去执行.下面介绍类加载器涉及到的基本概念和加载基本过程. 一.Java虚拟机与程序的生命周期 在运行Jav ...

  6. Android之异步调用

    概述 AsyncTask可以很好的,准确的使用UI线程,他可以将一个比较耗时(几秒钟)的动作运行在后台,并且能将结果返回至UI线程中,不需要通过(Thread操作和Handler操作). 使用时必须通 ...

  7. ### Error building SqlSession. ### The error may exist in SQL Mapper Configuration ### Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: org.apache.ibat

    这是一个由粗心导致的错误,具体报错如下: org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSessio ...

  8. AcWing 831. KMP字符串（模板）

    给定一个模式串S,以及一个模板串P,所有字符串中只包含大小写英文字母以及阿拉伯数字. 模板串P在模式串S中多次作为子串出现. 求出模板串P在模式串S中所有出现的位置的起始下标. 输入格式 第一行输入整 ...

  9. jsp:include 通过变量作为路径动态引入

    语法:<jsp:include page="<%=整体是个变量%>" flush="true"/> 示例: <%@ page la ...

  10. 正则表达式RegExp对象

    3.1 正则表达式对象的创建方式 字面量的方式   var patt = /匹配规则/修饰符;     / --> 边界的意思 new关键字     var patt = new RegExp( ...