效果

代码：

<!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. BZOJ3288: Mato矩阵(欧拉函数 高斯消元)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 386  Solved: 296[Submit][Status][Discuss] Descriptio ...

  2. Windosw系统——常见的问题

    1. 写在某些软件后就无法打开网页,但可以上QQ. 在卸载了一些VPN或USB无线设备后,发现自己网页打不开,但是ping能ping通,也可以登录QQ. 解决办法: (1): 开始运行——regedi ...

  3. 使用c++控制sqlite3

    首先,到官网下载相关的压缩包 https://www.sqlite.org/download.html 但是要自己再重新编译一个, 博主自己收集了一下,密码:hixo https://pan.baid ...

  4. xml解析之stax

    博文引自:http://zangweiren.iteye.com/blog/647334 Java 6.0对XML支持的新特性有许多方面.比如StAX.针对XML-Web服务的Java架构(JAX-W ...

  5. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  6. 4.1 基本类型和引用类型的值【JavaScript高级程序设计第三版】

    ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基 ...

  7. python——标准异常总结

    请参考此网站: Python 标准异常总结 https://fishc.com.cn/forum.php?mod=viewthread&tid=45814&extra=page%3D1 ...

  8. Python os.walk() 简介

    Table of Contents 1. os.walk目录遍历 1.1. os.walk 1.2. 例子 1.2.1. 测试topdown 1.2.2. 运行时修改遍历目录 2. 参考资料 os.w ...

  9. Android Html处理器通用类 HtmlUtil

    1.整体分析 1.1.首先看一下源代码,可以直接Copy. public class HtmlUtil { /** * 获取 html 中的纯文本 */ public static String Ht ...

  10. Android开发——View滑动冲突解决方案

    0. 前言   我们在Android开发--事件分发机制详解中深入学习了事件分发机制,为我们解决Android开发中的滑动冲突问题做了初步准备.针对滑动冲突这里给出两种解决方案:外部拦截法和内部拦截法 ...