html(lang="es")
  head
    meta(charset="UTF-8")
    title Document
  body
    h2 CSS animation, transition and a bit of svg
h4 Click on the button
.btn-container
  .btn
    svg
      rect(x='0', y='0', fill='none', width='160', height='40')
    |  
    span Submit
    |  
    span loading
    |  
    span Submitted
  

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900)

body
  background: #fff
  text-align: center
  font-family: Roboto

h2, h4
  margin: 10px
  color: #999

h2
  margin-top: 50px
  color: #000

.btn-container
  position: relative
  margin: 0px auto
  padding-top: 30px
  text-align: center
  font-family: 'Roboto', serif
  color: #333

.btn
  vertical-align: middle
  margin: 0 auto
  position: relative
  display: block
  font-family: 'Roboto', serif
  cursor: pointer
  width: 160px
  margin-top: 0
  background: #219df3
  height: 40px
  text-align: center
  color: white
  line-height: 40px
  overflow: hidden
  border-radius: 6px
  &.submit
    animation: example 3s
    animation-fill-mode: forwards
    -webkit-animation: example 3s
    -webkit-animation-fill-mode: forwards
  &:after
    content: ''
    width: 0%
    height: 4px
    position: absolute
    background: #60d591
    top: calc(50% - 2px)
    transition: all 3s
    -webkit-transition: all 3s
    left: 0
  &.submit:after
    animation: loading 3s
    animation-fill-mode: forwards
    animation-delay: 0.5s
    -webkit-animation: loading 3s
    -webkit-animation-fill-mode: forwards
    -webkit-animation-delay: 0.5s
  svg
    position: absolute
    top: 0px
    left: 0
    rect
      fill: none
      stroke: #60d591
      stroke-width: 16
      stroke-dasharray: 20, 200
      stroke-dashoffset: 20
      -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1)
      transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1)
      opacity: 0
  &.submit svg rect
    opacity: 1
    stroke-width: 4
    stroke-dasharray: 170, 0
    stroke-dashoffset: 500
    -webkit-transition-delay: 3.2s
    transition-delay: 3.2s
  span:nth-of-type(1)
    opacity: 1
  &.submit span:nth-of-type(1)
    transition: opacity 0.1s
    opacity: 0
    display: none
  span
    &:nth-of-type(3)
      opacity: 0
    &:nth-of-type(2)
      opacity: 0
      display: block
  &.submit span
    &:nth-of-type(2)
      animation: load 1s
      -webkit-animation: load 1s
      animation-fill-mode: forwards
      -webkit-animation-fill-mode: forwards
    &:nth-of-type(3)
      opacity: 1
      transition: opacity 3s
      transition-delay: 3s
      -webkit-transition: opacity 3s
      -webkit-transition-delay: 3s
      margin-top: -40px
      display: block

@keyframes loading
  0%
    left: 0
    width: 0%

  50%
    width: 100%
    left: 0

  51%
    right: 0
    left: auto
    width: 100%

  100%
    width: 0%
    right: 0
    left: auto


@keyframes example
  0%
    height: 40px
    margin-top: 0
    border-radius: 4px

  10%
    height: 48px
    margin-top: -4px
    background: #219df3

  20%
    height: 4px
    margin-top: 20px
    border-radius: 0
    background: #ddd

  99%
    height: 4px
    margin-top: 20px
    border-radius: 0
    background: #ddd

  100%
    height: 40px
    margin-top: 2px
    border-radius: 4px
    background: none
    color: #60d591


@keyframes load
  from
    opacity: 1

  to
    opacity: 0
    display: table-cell

'use strict';

$(function () {
  $('.btn').click(function () {
    $(this).addClass('submit');
  });
});