基于jQuery点击加载动画按钮特效

分享一款基于jQuery点击加载动画按钮特效。这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="container">
       <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">
               <p>
                   <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
                   <button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
                   <button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>
                   <button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>
               </p>
           </div>
       </div>
       <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">
               <p>
                   <button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
                   <button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
               </p>
           </div>
       </div>
       <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">
               <p>
                   <button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>
                   <button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>
                   <button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button>
                   <button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button>
               </p>
               <p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button></p>
           </div>
       </div>
       <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center progress-demo">
               <p>Built-in progress bar</p>
               <p>
                   <button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
                   <button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>

                   <button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>
               </p>
           </div>
       </div>
       <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">
               <p>Sizes</p>
               <p>
                   <button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>
                   <button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button>

                   <button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button>
               </p>
           </div>
       </div>
   </div>

js代码:

// Bind normal buttons
      Ladda.bind(‘div:not(.progress-demo) button‘, { timeout: 2000 });

      // Bind progress buttons and simulate loading progress
      Ladda.bind(‘.progress-demo button‘, {
          callback: function (instance) {
              var progress = 0;
              var interval = setInterval(function () {
                  progress = Math.min(progress + Math.random() * 0.1, 1);
                  instance.setProgress(progress);

                  if (progress === 1) {
                      instance.stop();
                      clearInterval(interval);
                  }
              }, 200);
          }
      });

via:http://www.w2bc.com/article/56623

时间: 2024-10-08 01:17:13

基于jQuery点击加载动画按钮特效的相关文章

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

jQuery实现无限加载瀑布流特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

超酷jQuery进度条加载动画集合

在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度条加载动画,每一个都非常具有创意.如果你喜欢,可以下载源码并将它们应用到自己的网站中去. HTML5 Canvas发光Loading动画 它是一个Loading加载动画,并不能实现具体进度的加载,但是可以提示用户数据或者页面正在加载.并且该应用利用Canvas绘制动画,效果非常不错. DEMO演示 

jQuery+php+Ajax文章列表点击加载更多功能

jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: 1 <script type="text/javascript" src="jquery.more.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('#more'

tableView中的“点击加载更多”点击不到

假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当前tableView的偏移量,四个数值分别是:上 左 下 右 使用该设置之后,即可以点击到“点击加载更多”按钮了

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

HTML5 五彩圆环Loading加载动画实现教程

今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈的时候还有淡入淡出的效果.每一个圆环不停地旋转,从而实现加载动画的效果.首先你可以看看效果演示: 你也可以在这里查看在线演示 下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码. 首先是HTML代码,只定义一个Loading容器,非常简单. HTML代码: <div id=”hold”><

iOS开发——图形编程Swift篇&amp;CAShapeLayer实现圆形图片加载动画

CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形渐现动画结合.这个组合的效果有趣,独一无二和有点迷人. 这个教程将会教你如何使用Swift和Core Animatoin来重新创建这个效果.让我们开始吧! 基础 首先下载这个教程的启动项目,然后编译和运行.过一会之后,你应该看到一个简单的image显示: 这 个启动项目已经预先在恰当的位置将view