Edit in JSFiddle

document.addEventListener("DOMContentLoaded", function() {
  Fancy.defineControl('mycontrol', {
    controls: [{
      event: 'cellclick',
      selector: '.my-button',
      handler: 'onClickMyButton'
    }],
    onClickMyButton: function(grid, o){
    	console.log(o.id, o.data.loading);
    	if(o.data.loading){
      	console.log('Run action when loading is false');
      	grid.setById(o.id, {
        	loading: false
        });
      }
    	else{
				console.log('Run action when loading is true');
      	grid.setById(o.id, {
        	loading: true
        });
      }
      
      //Update all grid cells
      grid.update();      
      
      //Update row
      /*
      grid.update({
  			type: 'row'
			});
      */
      
      //Update cell
      /*
      grid.update({
  			type: 'cell'
			});
      */
    }
  });

  new FancyGrid({
    renderTo: 'container',
    controllers: ['mycontrol'],
    width: 500,
    height: 400,
    dirtyEnabled: false,
    data: {
    	items: data,
      fields: ['company', 'name', 'surname', 'age', 'loading']
    },
    defaults: {
    	draggable: true,
      sortable: true
    },
    columns: [{
      index: 'company',
      title: 'Company',
      type: 'string',
      width: 100
    }, {
      index: 'name',
      title: 'Name',
      type: 'string',
      width: 100
    }, {
      index: 'surname',
      title: 'Sur Name',
      type: 'string',
      width: 100
    }, {
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 100
    }, {
      width: 100,
      cls: 'my-column-action',
      index: 'loading',
      render: function(o){
      	o.value = [];
        
        if(o.data.loading){
        	o.value.push('<i class="button-status"><svg xmlns="http://www.w3.org/2000/svg" width="12.959999999999999" height="12.959999999999999" viewBox="0 0 54 54"><g><path d="M10.9,48.6c-1.6-1.3-2-3.6-0.7-5.3c1.3-1.6,3.6-2.1,5.3-0.8c0.8,0.5,1.5,1.1,2.4,1.5c7.5,4.1,16.8,2.7,22.8-3.4c1.5-1.5,3.8-1.5,5.3,0c1.4,1.5,1.4,3.9,0,5.3c-8.4,8.5-21.4,10.6-31.8,4.8C13,50.1,11.9,49.3,10.9,48.6z" fill="#888888"></path><path d="M53.6,31.4c-0.3,2.1-2.3,3.5-4.4,3.2c-2.1-0.3-3.4-2.3-3.1-4.4c0.2-1.1,0.2-2.2,0.2-3.3c0-8.7-5.7-16.2-13.7-18.5c-2-0.5-3.2-2.7-2.6-4.7s2.6-3.2,4.7-2.6C46,4.4,53.9,14.9,53.9,27C53.9,28.5,53.8,30,53.6,31.4z" fill="#888888"></path><path d="M16.7,1.9c1.9-0.8,4.1,0.2,4.8,2.2s-0.2,4.2-2.1,5c-7.2,2.9-12,10-12,18.1c0,1.6,0.2,3.2,0.6,4.7c0.5,2-0.7,4.1-2.7,4.6c-2,0.5-4-0.7-4.5-2.8C0.3,31.5,0,29.3,0,27.1C0,15.8,6.7,5.9,16.7,1.9z" fill="#888888"></path></g></svg></i>');
        	o.value.push('<span class="my-button">Stop</span>');
        }
        else{
      		o.value.push('<span class="my-button">Click</span>');
        }
        
        o.value = o.value.join('');
      
      	return o;
      }
    }]
  });
});

var data = [{
    name: 'Ted',
    surname: 'Smith',
    company: 'Electrical Systems',
    age: 30
  },
  {
    name: 'Ed',
    surname: 'Johnson',
    company: 'Energy and Oil',
    loading: true,
    age: 35
  },
  {
    name: 'Sam',
    surname: 'Williams',
    company: 'Airbus',
    age: 38
  },
  {
    name: 'Alexander',
    surname: 'Brown',
    company: 'Renault',
    age: 24
  },
  {
    name: 'Nicholas',
    surname: 'Miller',
    company: 'Adobe',
    age: 33
  },
  {
    name: 'Andrew',
    surname: 'Thompson',
    company: 'Google',
    age: 28
  },
  {
    name: 'Ryan',
    surname: 'Walker',
    company: 'Siemens',
    age: 39
  },
  {
    name: 'John',
    surname: 'Scott',
    company: 'Cargo',
    age: 45
  },
  {
    name: 'James',
    surname: 'Phillips',
    company: 'Pro bugs',
    age: 30
  },
  {
    name: 'Brian',
    surname: 'Edwards',
    company: 'IT Consultant',
    age: 23
  },
  {
    name: 'Jack',
    surname: 'Richardson',
    company: 'Europe IT',
    age: 24
  },
  {
    name: 'Alex',
    surname: 'Howard',
    company: 'Cisco',
    age: 27
  },
  {
    name: 'Carlos',
    surname: 'Wood',
    company: 'HP',
    age: 36
  },
  {
    name: 'Adrian',
    surname: 'Russell',
    company: 'Micro Systems',
    age: 31
  },
  {
    name: 'Jeremy',
    surname: 'Hamilton',
    company: 'Big Machines',
    age: 30
  },
  {
    name: 'Ivan',
    surname: 'Woods',
    company: '',
    age: 24
  },
  {
    name: 'Peter',
    surname: 'West',
    company: 'Adobe',
    age: 26
  },
  {
    name: 'Scott',
    surname: 'Simpson',
    company: 'IBM',
    age: 29
  },
  {
    name: 'Lorenzo',
    surname: 'Tucker',
    company: 'Intel',
    age: 29
  },
  {
    name: 'Randy',
    surname: 'Grant',
    company: 'Bridges',
    age: 30
  },
  {
    name: 'Arthur',
    surname: 'Gardner',
    company: 'Google',
    age: 31
  },
  {
    name: 'Orlando',
    surname: 'Ruiz',
    company: 'Apple',
    age: 32
  }
];

<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

<div id="container"></div>

.my-column-action .fancy-grid-cell-inner {
  margin-top: 5px;
}

.fancy-grid-cell .my-button {
  background-color: rgba(0,0,0,0.05);
  padding: 5px 10px;
  opacity: 0.75;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
  box-sizing: border-box;
  line-height: 19px;
  color: gray;
  margin-top: 5px;
  margin-left: 5px;
}

@keyframes spinScale{0%{transform:rotate(0) scale(1)}50%{transform:rotate(360deg) scale(.9)}100%{transform:rotate(720deg) scale(1)}}

.button-status {
  position: relative;
  top: 2px;
}

.button-status svg {
  margin-top: 1px
  -webkit-animation-name: spinScale;
  animation-name: spinScale;
  -webkit-animation-duration: 1800ms;
  animation-duration: 1800ms;
  -webkit-animation-timing-function: cubic-bezier(.785, .135, .15, .86);
  animation-timing-function: cubic-bezier(.785, .135, .15, .86);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  shape-rendering: geometricprecision;
}