To be precise I have: 

```js
$('.vidsh_sub_btn').on('click', function() {
  $('.vidsub_rld_c').toggleClass('goright');
  // toggle godown class while goright class is completed moving left to 75px
  $('.vidsub_rld_c').toggleClass('godown');
  $('.vidsub_rld_c').toggleClass('goleft');
  $('.vidsub_rld_c').toggleClass('gotop');
});
```

```css
.vidsubbtn_c {
  position: absolute;
  height: 34px;
  width: 84px;
  background: black;
  overflow: hidden;
}

.vidsub_rld_c {
  position: absolute;
  height: 10px;
  width: 10px;
  background: white;
  transition: all 700ms;
  left: 0px;
  z-index: 50;
}

.vidsub_rld_c.goright {
  left: 75px;
}

.vidsub_rld_c.godown {
  top: 25px;
}

.vidsub_rld_c.goleft {
  left: 0px;
}

.vidsub_rld_c.gotop {
  top: 0px;
}

.vidsh_sub_btn {
  position: absolute;
  z-index: 100;
  margin-top: 2px;
  margin-left: 2px;
  height: 30px;
  width: 80px;
  overflow: hidden;
  background: #8495a4;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
  <div class="vidsub_rld_c"></div>
  <input type="button" class="vidsh_sub_btn" value="Add" />
</div>
```

What I basically want is that `vidsub_rld_c` should complete a circle of the button which basically would look like a loading object.

But the way I have implemented in my script is that when the click event listener is called it executes all of the toggle classes at the same time which makes the loader looking like its not moving.

**[JSFiddle](https://jsfiddle.net/kto0c3jc/1/)**