Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ajax load button animation

ajax load button animation

Click button, shows css animation, get html via ajax. Pretty basic, something a haven't really had an opportunity to do much, so I figured I'd try making a mock one.

A Pen by ianchouinard on CodePen.

License.

<section class="action">
<div class="load center">
<p>Load It</p>
<div class="loader"></div>
</div>
</section>
<article class="content"></article>
$(document).ready(function(){
//ajax
function loadMe(){
$.get( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/loadMe.html', function(data) {
$('.content').html(data);});
$('.load').hide();
};
//kicks things off
$('.action').on('click', '.load', function(){
//starts load animation
$(this).find('p')
.html('');
$(this).addClass('bar');
//sim load time and run ajax function
setTimeout(loadMe, 3000);
});
//restarts demo
$('.content').on('click', '.reset', function(){
$('.content').html("");
$('.load').removeClass('bar')
.find('p')
.html('Load It');
$('.load').fadeIn();
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300);
body{
background-color: rgb(45, 45, 45);
font-family: 'Ubuntu', sans-serif;
color: white;
}
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.load{
border: 4px solid rgb(225, 59, 59);
font-size: 1.2em;
cursor: pointer;
width: auto;
height: auto;
padding: .8em 1.5em;
border-radius: 0;
transition: all 500ms;
&:hover{
padding: .9em 1.75em;
background-color: rgba(225, 59, 59, 0.18);
}
}
.bar{
width: 155px;
height: 3px;
padding: 0;
background-color: rgba(225, 59, 59, .7);
border: none;
.loader{
width: 20px;
height: 3px;
background-image: linear-gradient(to right, rgba(250, 250, 250, .3), #fff);
animation: slide infinite .75s linear;
}
&:hover{
padding: 0;
background-color: rgba(225, 59, 59, .7);
}
}
@keyframes slide {
from{
margin-left: -20px;
}
to{
margin-left: 135px;
}
}
.content{
@extend .center;
h1{
text-align: center;
font-size: 1.6em;
}
.reset{
@extend .load;
text-align: center;
margin-top: 1em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment