New to Kendo UI for jQuery? Download free 30-day trial

Show Spinning Icon in Button


Product Progress® Kendo UI® Button for jQuery


How can I add a spinning icon to the Kendo UI Button?


  1. Use the icon option of the Button to define a name of an existing icon in the Kendo UI theme sprite. As a result, the icon is applied as a background image of a span element inside the Button.
  2. Define a spinning keyframe.
  3. Apply the animation on the .k-icon class.
<div id="example">
    <div class="demo-section k-content">
        <button id="primaryTextButton" class="k-primary">Primary Button</button>

    @-moz-keyframes spin {
        from { -moz-transform: rotate(0deg); }
        to { -moz-transform: rotate(360deg); }
    @-webkit-keyframes spin {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}

    .k-icon {
        -webkit-animation: spin 2s infinite linear;
        animation: spin 2s infinite linear;

    $(document).ready(function() {
        icon: "arrow-rotate-cw"

In this article