JSFiddle - React, Tailwind, and code Playground

by wiltomap

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="content">
  <div class="data-title">
    <h4>Towns</h4>
    <a href="#" class="glyphicon glyphicon-circle-arrow-down show-data" id="ass-lineaire"></a>
  </div>
  <div class="data-title">
    <h4>Streets</h4>
    <a href="#" class="glyphicon glyphicon-circle-arrow-down show-data" id="ass-ouvrage"></a>
  </div>
</div>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#content{
  width: 100px;
}

h4 {
  display: inline-block;
}

a {
  float: right;
  margin-top: 12px;
}

.fa-spin-custom,
.glyphicon-spin {
  -webkit-animation: spin 1000ms infinite linear;
  animation: spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

JavaScript

$(".show-data").click(function() {

  var arrowId = $(this).attr('id');
  var waitIcon = '<a href="#" class="glyphicon glyphicon-refresh glyphicon-spin show-data" id="'+arrowId+'"></a>'

  //$(this).replaceWith(waitIcon);
  $(this).removeClass('glyphicon-circle-arrow-down').addClass('glyphicon-refresh glyphicon-spin');

 });