Multi-button "load in" effect experience with the BOOTSTRAP3 and Ladda UI implementations

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Online Demo

In developing web-based Web sites or Web applications, often in the process of Ajax calls need to prompt the user and show the relevant "load" effect, similar UI design is also very much, for example, when clicked a button, next to it display a "load" text, or add a "spin gif "Animation effect chart.

In today's tutorial, we'll introduce a Ladda UI conceptual design that will help you design different button-based loading effects and integrate them into the BOOTSTRAP3 framework, as follows:

It can easily help you through the button to prompt the user related "loading" status, and support different load effects, configuration is also very simple, only to the corresponding button to add Data-style properties, as follows:

Data-style= "Slide-down"

In the next tutorial, we'll explain how to integrate Ladda UI design and BOOTSTRAP3 to provide a complete "load" effect experience.

Related class libraries

First import the related bootstrap and Ladda class libraries:

Here we also import the Jdribbble plug-in to achieve AJAX-related effects (of course, as data is available, you can use any other service, or your own Ajax) to get the best design pictures from dribbble.com.

If you don't need to show progress, basically you just need to add the following code to the AJAX related request to complete the JavaScript code development:

var l =ladda.create (this);

L.start ();

When the AJAX request completes, you can invoke the following stop:

L.stop ();

That is, complete the whole "loading" process, which contains the "disabled" the current button operation, very convenient, improve the development efficiency.

Of course, if you need to prompt the user the current progress, it built a progress bar, you can use the following code to set the current progress:

L.setprogress (0.1);

Javacript is finished writing, you need to define the loading effect in HTML, as follows:

More design

Here we define the use of

Data-style= "Slide-down"

To set the required load effect, this effect is to set a slide down the effect of switching, more effect, please visit: http://lab.hakim.se/ladda/

Related CSS

Here we refer to the relevant CSS to ensure that Ladda can work properly with BOOTSTRAP3.