<!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. PHP 的源码编译安装

    PHP 架构和安装扩展的几种方式 PHP 三大模块: SAPI:接受并处理请求. Zend Engine:PHP 的核心,负责分析 PHP 代码并转为 opcode,然后在 Zend VM 虚拟机上执 ...

  2. charles_02_模拟弱网测试

    前言 用户使用app的场景是多变的,不一定稳定在WiFi或者4G网络下.大多数用户会在地铁.电梯等弱网情况下使用app,这些弱网情况下app常会出现一些数据丢失.闪退.页面展示不友好等情况.在测试过程 ...

  3. 【opencv】opencv图像识别的一些基础的基础函数的使用方法

    import cv2 import numpy as np from matplotlib import pyplot as plt pic_path = "deal_with.png&qu ...

  4. 【Unity Shader】---Alpha Blending的意义

    Alpha Blending 即Alpha混合 Blending 就是处理透明度的,处理光栅化最后阶段,显示在屏幕上的颜色 1 Blend Off 关闭alpha混合 2 混合公式:Blend Src ...

  5. [Web 前端] 008 css 颜色表示方法

    css 颜色表示法 颜色名表示 如 red 红色 green 绿色 blue 蓝色 16 进制数值表示 常见颜色 正常表示 缩写表示 红色 #ff0000 #f00 绿色 #00ff0 #0f0 蓝色 ...

  6. 【转载】研发应该懂的binlog知识(下)

    引言 这篇是<研发应该懂的binlog知识(上)>的下半部分.在本文,我会阐述一下binlog的结构,以及如何使用java来解析binlog.不过,话说回来,其实严格意义上来说,研发应该还 ...

  7. C与C#之间使用AES加密解密算法

    目的:C语言写的客户端加密数据,数据发送到C#写的服务端,服务端解密. 保证C与C#之间加密解密AES的配置和模式一直. AES: AES是对称加密算法,关键点: 密钥长度,明文长度,密文长度 密钥长 ...

  8. HTML文件头部元素作用

    1.DOCTYPE的作用 DOCTYPE是document type(文档类型)的缩写.<!DOCTYPE html>声明位于文档最前面,主要作用是告诉浏览器的解析器使用哪种HTML规范或 ...

  9. ffmpeg的中文文档

    1. 概要 ffmpeg [global_options] {[input_file_options] -i INPUT_FILE} ... {[output_file_options] OUTPUT ...

  10. windows 安装nodejs 和 npm

    1.从nodejs官网下载 安装文件,我安装的版本是  node-v10.15.0-x64.msi ,双击进行安装. 2.安装完成后可以查看相关目录,这里会有一个node_modules目录和node ...