Skip to content

Commit

Permalink
Added more details
Browse files Browse the repository at this point in the history
  • Loading branch information
msurguy committed Sep 9, 2013
1 parent 0baf9cd commit 24bae79
Show file tree
Hide file tree
Showing 3 changed files with 223 additions and 30 deletions.
119 changes: 119 additions & 0 deletions css/prism.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/

code[class*="language-"],
pre[class*="language-"] {
color: black;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}

@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}

.token.punctuation {
color: #999;
}

.namespace {
opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number {
color: #905;
}

.token.selector,
.token.attr-name,
.token.string {
color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0,0%,100%,.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}


.token.regex,
.token.important {
color: #e90;
}

.token.important {
font-weight: bold;
}

.token.entity {
cursor: help;
}
123 changes: 93 additions & 30 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,99 +4,161 @@
<head>
<meta charset="utf-8">

<title>Ladda: Bootstrap compatibility test</title>
<title>Ladda for Bootstrap 3 UI</title>

<meta name="description" content="">
<meta name="author" content="Hakim El Hattab">
<meta name="description" content="Bootstrap 3 loading state for buttons">
<meta name="author" content="Maks Surguy">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="dist/ladda-themeless.min.css">

<link rel="stylesheet" href="css/prism.css">

</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Ladda Bootstrap</h1>
<h1>Ladda UI for Bootstrap 3</h1>
<p>
A UI concept by <a href="http://twitter.com/hakimel">@hakimel</a> which merges loading indicators into the action that invoked them. Primarily intended for use with forms where
it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. This project is used by @hakimel <a href="http://slid.es">slid.es</a> and by @msurguy on <a href="http://bootsnipp.com">Bootsnipp</a>.
A UI concept by <a href="http://twitter.com/hakimel" target="_blank">@hakimel</a> which merges loading indicators into the action that invoked them. Primarily intended for use with forms where
it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. This project is used by @hakimel <a href="http://slid.es">slid.es</a> and by @msurguy on the new upcoming <a href="http://bootsnipp.com" target="_blank">Bootsnipp</a>.
</p>
<h2>Demo <small>Click the buttons to see the effect</small></h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-primary ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<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-color="green" data-style="expand-right"><span class="ladda-label">expand-right</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-color="green" data-style="expand-up"><span class="ladda-label">expand-up</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-color="green" data-style="expand-down"><span class="ladda-label">expand-down</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-color="red" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
<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-color="red" data-style="zoom-out"><span class="ladda-label">zoom-out</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-color="blue" data-style="slide-left"><span class="ladda-label">slide-left</span></button>
<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-color="blue" data-style="slide-right"><span class="ladda-label">slide-right</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-color="blue" data-style="slide-up"><span class="ladda-label">slide-up</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-color="blue" data-style="slide-down"><span class="ladda-label">slide-down</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-color="purple" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
<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-color="purple" data-style="expand-left"><span class="ladda-label">expand-left</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-color="purple" data-style="contract"><span class="ladda-label">contract</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-color="mint" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>
<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-color="mint" data-style="expand-right" data-size="s"><span class="ladda-label">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-color="mint" data-style="expand-right" data-size="l"><span class="ladda-label">large</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 class="row" style="margin-top:30px">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap" data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small" data-related="bootsnipp"></a>
<small>Ladda UI concept by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a>, examples adapted to work with Bootstrap 3 by <a href="http://twitter.com/msurguy">@msurguy</a></small>
</p>

<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Usage:</h2>
<hr>
<p>Include the CSS and Javascript for Spin.js and Ladda effect:</p>
<pre><code class="language-markup">&lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt;
&lt;script src="dist/spin.min.js"&gt;&lt;/script&gt;
&lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Then to produce a button with the Ladda effect:</p>
<pre><code class="language-markup">&lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;</code></pre>
<p>Or using &quot;a&quot; tag:</p>
<pre><code class="language-markup">&lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;</code></pre>
<p>You can choose the style of the effect by setting the <code>data-style</code> attribute:</p>
<pre><code class="language-markup">data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"</code></pre>
<p>You can choose the size of the spinner by setting the <code>data-size</code> attribute:</p>
<pre><code class="language-markup">data-size="xs"
data-size="s"
data-size="l"
</code></pre>
<p>You can choose the color of the spinner by setting the <code>data-spinner-color</code> attribute (HEX code):</p>
<pre><code class="language-markup">data-spinner-color="#FF0000"</code></pre>

<h2>Control the UI state with Javascript:</h2>
<p>To activate the effect you can bind Ladda to all buttons that submit a form</p>
<pre><code class="language-javascript">Ladda.bind( 'input[type=submit]' );</code></pre>
<p>When using AJAX forms, you can use the following syntax:</p>
<pre><code class="language-markup">&lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit form&lt;/span&gt;&lt;/a&gt;</code></pre>
<pre><code class="language-javascript">$(function() {
$('#form-submit').click(function(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("your-url",
{ data : data },
function(response){
console.log(response);
}, "json")
.always(function() { l.stop(); });
return false;
});
});</code></pre>
<p>Other methods available through Javascript</p>
<pre><code class="language-javascript">l.stop();
l.toggle();
l.isLoading();
l.setProgress( 0-1 );</code></pre>
<p> Love this? Tweet it!
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap" data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small" data-related="bootsnipp"></a></p>
<p style="margin-bottom:100px;">
Original Ladda UI concept by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a>, examples adapted to work with Bootstrap 3 by <a href="http://twitter.com/msurguy" target="_blank">@msurguy</a>
</p>
</div>
</div>

</div>

<script src="dist/spin.min.js"></script>
Expand Down Expand Up @@ -135,9 +197,10 @@ <h1>Ladda Bootstrap</h1>

</script>

<a class="fork" href="https://github.com/hakimel/Ladda"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
<a class="fork" href="https://github.com/msurguy/Ladda-bootstrap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="js/prism.js"></script>

</body>
</html>
Loading

0 comments on commit 24bae79

Please sign in to comment.