Permalink
Browse files

Added some css-animated button throbbing during deployment.

  • Loading branch information...
1 parent 840da12 commit ba7608d9fa49e278eb7d6b3c8dba4e8dd1feeb4c @zeke zeke committed Jun 13, 2012
Showing with 29 additions and 2 deletions.
  1. +1 −1 index.html
  2. +12 −1 javascripts/vcard.js
  3. +16 −0 stylesheets/vcard.css
View
@@ -67,7 +67,7 @@
</fieldset>
<fieldset id="submitCreateFieldset" class="submit">
<button type="submit" data-icon="&#x2191;" class="iconb">Deploy vCard to Heroku</button>
- <span>or <a class="cancel" href="/cancel">Cancel</a></span>
+ <span class="cancel">or <a class="cancel" href="/cancel">Cancel</a></span>
</fieldset>
</form>
</section>
View
@@ -178,19 +178,30 @@ var email_regex = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0
function enableFormButtons() {
// $("#submitCreateFieldset").children().fadeIn();
+
+ $("#submitCreateFieldset span.cancel").fadeTo('slow', 1);
+
$("#submitCreateFieldset button").
text('Deploy vCard to Heroku').
+ removeClass('deploying').
removeClass('iconb');
+
+ window.clearInterval(window.throbInterval);
}
function disableFormButtons() {
// $("#submitCreateFieldset").children().fadeOut();
+
+ $("#submitCreateFieldset span.cancel").fadeTo('slow', 0);
+
$("#submitCreateFieldset button").
text('Deploying...').
+ addClass('deploying').
removeClass('iconb');
+
+ window.throbInterval = setInterval("$('#submitCreateFieldset button').toggleClass('throbby')",800);
}
-
function hideValidationErrors() {
$("#formBody p.error-message").remove();
$('input').removeClass('error');
View
@@ -697,7 +697,23 @@ form input[type=submit], form button[type=submit], form input[type=submit][disab
text-indent: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
width: inherit;
+
+ transition: all 0.8s;
+ -moz-transition: all 0.8s;
+ -webkit-transition: all 0.8s;
+ -o-transition: all 0.8s;
+
+ opacity: 1;
+}
+
+form button[type=submit].deploying {
+ opacity: 0.8;
}
+
+form button[type=submit].throbby {
+ opacity: .6;
+}
+
form input[type=submit]:hover, form button[type=submit]:hover {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7474be), color-stop(100%, #464695));
background: -webkit-linear-gradient(#7474be, #464695);

0 comments on commit ba7608d

Please sign in to comment.