merelec-vue-template/src/assets/scss/lbd/mixins/_morphing-buttons.scss

$prefixes: ('', '-moz-', '-webkit-', '-ms-') !default;

@mixin circle-animation(){
   @for $i from 0 to length($prefixes) {
        @include circle-animation-details(nth($prefixes, $i + 1));
   }  
}

@mixin circle-animation-details($name){
    #{$name}animation-name: spin;
    #{$name}animation-duration: 1250ms;
    #{$name}animation-iteration-count: infinite;
    #{$name}animation-timing-function: linear;

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

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

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

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