Making a submit button with loader - WotW
Tags: webdev, vue, tutorial, wotw
Published: 2018-04-11 14:39:14

---
title: Making a submit button with loader - WotW
published: true
description: How I did a button interaction based on a dribble gif
tags: ['webdev', 'vue', 'tutorial', 'wotw']
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cki68urkk54fbceb89vc.jpeg
---

Welcome to the second installment of the **Widget of the Week** series.

This time I'll show you the process to make a **submit button** that transforms to a **loader** and then confirms your submission. 

The inspiration for this widget is [this](https://uimovement.com/ui/2380/submit-button/) and looks like this:

![submit button](https://thepracticaldev.s3.amazonaws.com/i/yol2fncriy20kmjb3pdw.gif)

### Preparations

For today's widget we will be using [vue.js](https://vuejs.org/) and [tweenlite](https://greensock.com/tweenlite) for animations. Both libraries have a cdn link to be imported on any project.

### The HTML structure

The markup for this widget is really simple, we just need a container where our Vue instance will mount and inside it, there will be a button and a couple of SVG circles for the loading animation:

``` html
<div id="submit-button" class="submit-container">
  <div class="submit-btn">
    <span>Submit</span>    
  </div>
  
  <!--  grey circle  -->
  <svg class="loader-svg">
    <path stroke="#CCCCCC" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"></path>
  </svg>
  
  <!--  green circle  -->
  <svg class="loader-svg">
    <path stroke="#20BF7E" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"></path>
  </svg>
</div>
```
 
Now let's start matching the style of our button with these CSS rules:

``` css
.submit-container {
  position: relative;
  margin: 80px;
}

.submit-btn {
  width: 100px;
  color: #20BF7E;
  font-size: 20px;
  font-family: Arial;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  border: solid #20BF7E 4px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color .3s, color .3s;
}

.submit-btn:hover {
  background-color: #20BF7E;
  color: white;
}
```

We now have a button that has a *hover* animation that swaps colors between the green background and the white font. Also notice the 25px border radius property, it is going to be really important when we need our button to become a circle.

### The interaction logic

Before we initialize the Vue instance, I'd like to check what are the states of the button. We can ignore the hover because that's already solved by our CSS, that leaves us with three states: clicked, loading and loaded. To handle those we can start with something like this:

``` js
new Vue({
  el: '#submit-button',
  data: {
    clicked: false,    
    loading: false,
    loaded: false
  }
})
```
You might ask "Why three booleans and not a single string or number with the 3 values?", and the reason is because they're not mutually exclusive, in other words, the button can be 'clicked' and also 'loading' at the same time. 

#### The click interaction
In preparation for the click animation we need first to create a CSS rule for the button, when it is clicked it transforms into a circle, to be precise a 50px by 50px circle (remember the 25px border radius?). The problem is that it already has a padding declared, and also we need to compensate for the border of the button, so we will need a little bit of math:

``` css
.submit-btn {
  ... other rules
  /* more CSS transitions for the props we need to animate */
  transition: width .3s, margin .3s, background-color .3s, color .3s;
}
.submit-btn.round {
  margin-left: 50px;
  border-color: #CCCCCC;
  background: white;
  
  /*  circle should be 50px width & height */
  /* borderLeft + paddingLeft + paddingRight + borderRight  */
  /* 4 + 20 + 20 + 4 = 48 + 2 = 50 */
  width: 2px; 
  /* borderTop + paddingTop + paddingBottom + borderBottom  */
  /* 4 + 10 + 10 + 4 = 28 + 22 = 50 */
  height: 22px;
}
```
Now we can start binding the button to Vue, we will first bind the click to a method, the round class to a computed property, and also the submit text needs to disappear when we click the button:
``` html
...
<div 
  @click="clickedSubmit" 
  :class="buttonClass"
  class="submit-btn">
    <span v-show="!clicked">Submit</span>  
...
```
Then in our js:
``` js
...
methods: {
  clickedSubmit () {
    this.clicked = true
  }
},
computed: {
  buttonClass () {
    if (this.clicked) {
      return 'round'
    }
    return ''
  }
}
```
Pretty simple right? Now comes the tricky part.

#### The loading
Just after our button transforms into a circle we need to put on top our SVG circles, why?, because HTML borders can't be animated the way we need them to, but SVG can! 
Now let's match the position of the circles with this CSS:
``` css
.loader-svg {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 50px; 
  height: 50px; 
  transform-origin: 25px 25px 25px;
}
```
and then, both SVG circles will have this vue binding, to make them appear when the button starts loading:
``` html

  <!--  grey circle  -->
  <svg v-if="loading" class="loader-svg">
    ...
  </svg>
  
  <!--  green circle  -->
  <svg v-if="loading" class="loader-svg">
    ...
  </svg>
```
We need to know when the button animation ends so we can start the loading animation, according to [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) we can use the 'transitionend' event. 
To add a listener to that event in Vue, we need to have a reference to the submit button, let's add this line to our button HTML:
``` html
<div class="submit-btn" 
  ref="submit-btn"
  ...
>
``` 
Now we can reference it in our `clickedSubmit` method like this:
``` js
...
clickedSubmit () {
  this.clicked = true    
  this.$refs['submit-btn']
    .addEventListener("transitionend", this.animateLoader, false);
}
...
```
this will trigger the `animateLoader` method when the animation finishes, so let's create the method:
``` js
animateLoader () {
  this.loading = true
  this.$refs['submit-btn']
    .removeEventListener("transitionend", this.animateLoader, false);
  // TODO animate circles
}
```
That will set the `loading` flag to true and remove the previously added listener.

#### Animating the green circle
For the next part we will use a [SVG animation trick](https://css-tricks.com/svg-line-animation-works/) using the `stroke-dasharray` and `stroke-dashoffset` properties. 
For the trick to work, the `stroke-dasharray` must have as a value the circumference of the circle, to calculate it we can go back to our geometry class notebook and see that the formula is *pi times the diameter* of the circle. 
Ours is 50px width, so it will be `3.1416 * 50 = ~157`. Also we will bind the `stroke-dashoffset` to a new Vue data variable:
``` html
...
<!--  green circle  -->
<svg v-if="loading" class="loader-svg">
  <path stroke="#20BF7E" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5" 
  stroke-dasharray="157" :stroke-dashoffset="loaderOffset">
  </path>
</svg>
...
```
Now in our Vue instance we will declare, inside the data object, the loaderOffset property and initialize it with the same value `157`:
``` js
data: {
  clicked: false,    
  loading: false,
  loaded: false,
  loaderOffset: 157
}
```
After doing that, we can start animating the loader with TweenLite.
We use the `TweenLite.to()` method to interpolate the `loaderOffset` property from its initial value to *zero* in *two seconds*.
When it finishes animating, the `onComplete` hook will execute the `completeLoading` method where we set the `loading` and `loaded` properties:
``` js
...
animateLoader () {
  this.loading = true
  this.$refs['submit-btn']
    .removeEventListener("transitionend", this.animateLoader, false);
      
  // animate the loaderOffset property,
  // on production this should be replaced 
  // with the real loading progress
  TweenLite.to(this, 2, {
    loaderOffset: 0, // animate from 157 to 0
    ease: Power4.easeInOut,
    onComplete: this.completeLoading // execute this method when animation ends
  })
},
completeLoading () {
  this.loading = false
  this.loaded = true
}
...
```

#### The loaded state
For the last part we just need to create another CSS rule that will be used when our button is loaded:
``` css
.submit-btn.loaded {
  color: white;
  background-color: #20BF7E;
}
```
and then the `buttonClass` computed property should handle that case too:
``` js
...
buttonClass () {
  if (this.loaded) {
    return 'loaded'
  }
      
  if (this.clicked) {
    return 'round'
  }
     
  return ''
}
...
```

We already declared the CSS transitions for those properties so we don't need to do anything else.

And now the final result!

{% codepen https://codepen.io/ederdiaz/pen/GxQvNW %}

That’s it for the second **Widget of the Week**.

If you haven't checked the previous one, [here it is](https://dev.to/ederchrono/how-i-made-a-smiley-toggle-controlwotw-5612).

Also if you want to see a specific widget for next week, post it in the comments section.