效果

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>btn</title>

    <style>

        .btnc{

            width: 100px;

            height: 30px;

            line-height: 30px;

            font-size:14px;

            text-align: center;

            border: 1px solid transparent;

            border-radius: 4px;

            background-color: #d9534f;

            border-color: #d43f3a;

            position: relative;

        }

        .btnc .btn-progress{

            display: none;

        }

        .btnc .btnl{

            display: block;

        }

        .btnc.progress .btn-progress{

            display: inline-block !important;

        }

        .btnc.progress .btnl{

            display: none !important;

        }

        .btnl{

            text-decoration: none;

        }

        .btnl:link,.btnl:visited,.btnl:hover,.btnl:active{

            color:#fff;

        }

        .btnl:hover,.btnl:active{

            background-color: #c0534f;

        }

        .btn-progress{

            display: inline-block;

            width:16px;

            height: 16px;

            border:1px solid #fff;

            border-top:0;

            border-radius: 50%;

            -webkit-border-radius:50%;

            animation: progress .6s linear infinite;

            position: absolute;

            margin:auto;

            top:0;

            left:0;

            right:0;

            bottom:0;

        }

        @keyframes progress{

            0%{

                transform:rotate(0);

                -webkit-transform:rotate(0);

            }

            100%{

                transform:rotate(360deg);

                -webkit-transform:rotate(360deg);

            }

        }

        @-webkit-keyframes progress{

            0%{

                transform:rotate(0);

                -webkit-transform:rotate(0);

            }

            100%{

                transform:rotate(360deg);

                -webkit-transform:rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="j-btnc btnc">

        <a href="javascript:;" class="btnl">提交</a>

        <span class="btn-progress"></span>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script>

        $('.j-btnc').click(function(){

            var $btn = $(this);

            $btn.addClass('progress');

            var p = $.Deferred();

            p.then(function(){

                $btn.removeClass('progress');

            }).catch(function(){

                $btn.removeClass('progress');

            });

            setTimeout(function(){

                p.resolve();

            },200000);

        });

    </script>

</body>

</html>

仿今日头条按钮loading效果的更多相关文章

  1. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  2. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  3. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  4. Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）

    前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

  5. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  6. [Android] Android 手机下 仿 今日头条 新闻客户端

    利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个  仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...

  7. iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码

    iOS精选源码 iOS WKWebView的使用源码 模仿apple music 小播放器的交互实现 高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗 类似于今日头条,网易新闻 ...

  8. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  9. 仿今日头条最强顶部导航指示器，支持6种模式－b

    项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...

随机推荐

  1. lintcode_93_平衡二叉树

    平衡二叉树   描述 笔记 数据 评测 给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡的二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过1. 您在真实的面试中是否遇到过 ...

  2. expect配合shell 实现自动分发秘钥文件

    expect使用场景 有时候需要批量地执行一些操作,或者执行自动化的操作的时候,有些指令需要交互式地进行这就会有很多麻烦,linux下有一个程序交expect,它可以模拟键盘输入文本,省去人工干预交互 ...

  3. struts2属性驱动模型

    属性驱动模型的作用: 因为struts2与servlet API 实现了解耦,无法直接使用HttpServlet Request对象获取表单提交的参数,但Struts2提供了属性驱动模型机制来解决这个 ...

  4. redis源代码结构解析

    看了黄建宏老师的<Redis设计与实现>,对redis的部分实现有了一个简明的认识: 之前面试的时候被问到了这部分的内容,没有关注,好在还有时间,就把Redis的源码看了一遍. Redis ...

  5. 关于修改zeppelin的代码显示

    最近我在修改zeppelin(0.7版本)的源码相关的知识,目前做的工作是修改zeppelin的代码,为了让zeppelin可以可以在页面中显示数据集,并且在其数据库中存储式真实的路径1.如果我们要运 ...

  6. issubclasss/type/isinstance/callable/super

    issubclass() : 方法用于判断第一个参数是否是第二个参数的子子孙孙类. 语法:issubclass(sub, super) 检查sub类是否是 super 类的派生类 class A: p ...

  7. 6，Flask 中内置的 Session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

  8. 使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码 (jvm性能调优)

    技术交流群:233513714 本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 ...

  9. laravel5.5artisan命令

    目录 1. 简介 2. 编写命令 2.1 构建自己的命令 2.2 闭包命令 3. 定义输入期望 4.I/O 命令 5. 注册命令 6. 调用命令 1. 简介 Artisan 是 Laravel 自带的 ...

  10. 修改window 10 开始菜单问题

    cmd->powershell Get-AppxPackage | % { Add-AppxPackage -DisableDevelopmentMode -Register "$($ ...