How to use SpinKit instead of k-loading animation?

[WAM]

Our current kendo-grid spinner is... not easy on the eyes.  I would like to use SpinKit instead (SpinKit is an extremely popular, simple CSS-based spinner library, available on GitHub with over 16.5k stars https://github.com/tobiasahlin/SpinKit).  Specifically, this one below taken from the SpinKit demo page (https://tobiasahlin.com/spinkit/ - it's the fourth one in the carousel) : 

 

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

 

With the following css:

 

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

[Preslav]

Hello Matthew,

Generally speaking, changing the HTML rendering of the spinner is doable, however, it will require overriding our source codes. If you want to do that, override the following line:

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.core.js#L3233

A better approach might be choosing a single HTML element spinner, and change our CSS. For example, I prepared the following Dojo - https://dojo.telerik.com/alEzaQUq

I hope the above helps.

 

Regards,
Preslav
Progress Telerik