ajax load button animation

ajax-load-button-animation.markdown

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.

index.html

<section class="action">
  <div class="load center">
    <p>Load It</p>
    <div class="loader"></div>
  </div>
</section>  

<article class="content"></article>

script.js

$(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();
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@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;
  }
}