Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.jade

Created August 17, 2016 03:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeMyUI/1b6cdc51a33ee2a566b0d9f8c4e1e137 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeMyUI/1b6cdc51a33ee2a566b0d9f8c4e1e137 to your computer and use it in GitHub Desktop.
Download ZIP
Submit Buttons with Built-in Loading Indicator
Raw
index.jade
button(type='submit') Go
Raw
script.js
$(document).ready(function() {
var $button = $('button[type="submit"]');
$button.on('click', function() {
var $this = $(this);
if($this.hasClass('active') || $this.hasClass('success')) {
return false;
}
$this.addClass('active');
setTimeout(function() {
$this.addClass('loader');
}, 130);
setTimeout(function() {
$this.removeClass('loader active');
$this.html('Success');
$this.addClass('success animated pulse');
}, 1600);
setTimeout(function() {
$this.html('Go');
$this.removeClass('success animated pulse');
$this.blur();
}, 2900);
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.scss
$buttonColor: #FF5126;
$backgroundColor: #DAEBEE;
$successColor: #3BB873;
@mixin dimensions($width: null, $height: $width) { width: $width; height: $height; }
%reset { margin: 0; padding: 0; }
%flex { display: flex; justify-content: center; align-items: center; }
*, *:before, *:after { box-sizing: border-box; }
html,
body {
@include dimensions($width: 100%);
@extend %reset;
font-family: 'Assistant', sans-serif;
}
body {
@extend %reset;
@extend %flex;
@include dimensions($width:100%);
overflow: hidden;
background: $backgroundColor;
background-size: 20px 20px;
}
button[type="submit"] {
@extend %flex;
@include dimensions($width: 100px, $height: 50px);
background: transparent;
border-radius: 10px;
will-change: transform;
transition: all .2s ease;
border: 2px solid $buttonColor;
cursor: pointer;
color: #ffffff;
font-size: 16px;
color: $buttonColor;
outline: none;
text-align: center;
&:hover {
background: $buttonColor;
color: #ffffff;
}
&:active {
font-size: 15px;
transform: translateY(1px);
}
&.active {
font-size: 0;
border-radius: 25px;
width: 50px;
background: transparent;
}
&.loader {
border-right: 2px solid #ffffff;
animation: loader .3s linear infinite;
}
&.success {
background: $successColor;
border-color: $successColor;
font-size: 14px;
color: #ffffff;
}
}
@keyframes loader {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
Raw
submit-buttons-with-built-in-loading-indicator.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment