Extjs Loading Icon - svg

Question

I am looking to get a loading icon as below in Extjs. I came across Extjs loadMask but it is not exactly what I am looking for. Are there any other existing components that I could use and perhaps make changes to, to achieve this behavior and look? If not, any suggestions on how this could be implemented?
Updates: I am trying to add the icon for every row in a table and below is the code which is included as one of the items in a list under this.columns. However, nothing gets displayed on the rows. Am I missing something ?
{
xtype: 'actioncolumn',
sortable:false,
menuDisabled:true,
width:50,
hidden:false,
items: [{
xtype:'component',
cls:'spinner-circular',
height:50
}]
}

Answer 1

We made our own component to display loadicon as following :
it's just as simple as :
{
xtype: 'component',
cls: 'spinner-circular',
height: 50
}
with css being :
#keyframes spinner-circular {
to {transform: rotate(360deg);}
}
.spinner-circular:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 1px solid #ccc;
border-top-color: #f48b31;
animation: spinner-circular .6s linear infinite;
}