<!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. spring boot 1.5.10.RELEASE ，spring boot admin 1.5.7 添加 security

    生产环境的客户端actuator最好是加上security校验,不然配置信息不登录就能直接获取到 server端配置,参考官方 文档,https://codecentric.github.io/spr ...

  2. 安装element-ui

    element地址:https://element.eleme.cn/2.0/#/zh-CN/component/quickstart 1.在新建终端 [安装element-ui组件依赖]cnpm i ...

  3. python 正则表达式 re.findall &re.finditer

    语法: findall 搜索string,以列表形式返回全部能匹配的子串 re.findall(pattern, string[, flags]) finditer 搜索string,返回一个顺序访问 ...

  4. myeclipse的修改背景颜色和字体

  5. mysql 主从 设置

    总结:1.如果是虚拟克隆mysql 请注意auto.cnf的uuid保证不一样,即删除auto.cnf 重新启动即可2.默认安装的mysql配置文件mysqld.cnf可能绑定了127.0.0.1 只 ...

  6. JavaWeb servlet,乱码的原因和解决

    请求为什么会有乱码? 答:当表单提交时,浏览器对中文参数值进行编码(使用打开表单所在的页面时的字符集进行编码,web服务器在默认情况下会使用iso-8859-1去解码,编码和解码方式不一致,就会产生乱 ...

  7. NameVirtualHost的使用

    如果某个ip:port 上只设置了一个虚拟主机,那么NameVirtualHost ip:port 可以不写,因为从这个ip:port的访问不需要做任何选择:如上例中192.168.1.197只对应于 ...

  8. FB相关

    1.传包过程的错误 (中文提示)游戏必须通过我们的 CDN 引用我们支持的 SDK (英文提示)Games must reference one of our supported SDKs via o ...

  9. CSS-子盒子撑开父盒子，让父盒子的高随内容自适应

    方法一: height:auto!important; height:200px; min-height:200px; ie6并不支持min-height.ie7,opera,火狐没有问题. 方法二: ...

  10. JavaScript基础4——省市联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...