mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-01-13 08:28:04 -05:00
42 lines
1.6 KiB
HTML
42 lines
1.6 KiB
HTML
<!-- loader
|
|
================================================== -->
|
|
<div class="fu-docs-section">
|
|
<h1 id="loader" class="page-header">Loader <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/loader.js"><small>loader.js</small></a></h1>
|
|
<p>Animation for visual indication of waiting time.</p>
|
|
|
|
<div class="loader" data-initialize="loader"></div>
|
|
|
|
<h2 id="loader-usage">Usage</h2>
|
|
|
|
<h3 id="loader-usage-javascript">Via JavaScript</h3>
|
|
<p>Call the loader control via JavaScript:</p>
|
|
{% highlight js %}$('#myLoader').loader();{% endhighlight %}
|
|
|
|
<h3 id="loader-usage-data-attributes">Via data-attributes</h3>
|
|
<p>To enable the loader control without writing JavaScript, add <code>data-initialize="loader"</code> to the <code>.loader</code> element that you wish to initialize. Such elements that exist when <code>$.ready()</code> executes will be initialized.</p>
|
|
|
|
<h3 id="loader-usage-markup">Markup</h3>
|
|
<p>Place <code>class="loader"</code> on a div.</p>
|
|
{% highlight html %}
|
|
<div class="loader" data-initialize="loader" id="myLoader"></div>
|
|
{% endhighlight %}
|
|
|
|
<h3 id="loader-usage-methods">Methods</h3>
|
|
<dl>
|
|
<dt id="loader-usage-methods-destroy">.loader('destroy')</dt>
|
|
<dd>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</dd>
|
|
</dl>
|
|
|
|
<h2 id="loader-examples">Examples</h2>
|
|
<p>Animation for visual indication of waiting time that can be customized to have many appearances.</p>
|
|
|
|
<div class="fu-example section">
|
|
<div class="loader" data-initialize="loader"></div>
|
|
</div>
|
|
{% highlight html %}
|
|
<div class="loader" data-initialize="loader"></div>
|
|
{% endhighlight %}
|
|
|
|
|
|
</div>
|