JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<div class="spinner">
  <div class="spinner__inner"></div>
</div>

SCSS

$spinnerDiameter: 300;
$spinnerInnerPadding: 50;
$borderColor: #e1e1e1;

.spinner{
  width:#{$spinnerDiameter}px;
  height:#{$spinnerDiameter}px;
  background:red;
  display:block;
  border-radius:50%;
  
  position:relative;
  
  
  text-align:center;
  //padding-top:40px;
  //font-size:180px;
  box-sizing:border-box;
}

.spinner__inner{
  width:#{$spinnerDiameter - $spinnerInnerPadding}px;
  height:#{$spinnerDiameter - $spinnerInnerPadding}px;
  display:block;
  position:absolute;
  background:lightblue;
  border-radius:50%;
  left:#{$spinnerInnerPadding / 2}px;
  top:#{$spinnerInnerPadding / 2}px;
  z-index:31;
  box-sizing:border-box;
  border:2px dotted brown; // $borderColor
}

.spinner__number{
  background:blue;
  display:inline-block;
  font-size:18px;
  
  position:absolute;
  top:0;
  left:50%;
  
  margin-left:-15px;
  
  width:30px;
  height:100%;
  color:#fff;
  text-align:center;
  
  z-index:51;
  
  box-sizing:border-box;
  
  i {
    display:inline-block;
    cursor: pointer;
    font-style: normal;
    transform: rotate(-90deg);
    background: darkgreen;
    
    width:30px;
    height:30px;
    
    box-sizing:border-box;
    
    padding-top:5px;
    padding-left:8px;
    line-height:1;
    
    text-align:center;
  }
  
  .spinner__bullet{
    width:6px;
    height:6px;
    display:inline-block;
    background:brown;
    position:absolute;
    left:50%;
    margin-left:-3px;
    top:#{$spinnerInnerPadding / 2 - 2}px;
    border-radius:50%;
  }
  
  &.active{
    
    i{
      color:purple;
      font-weight:bold;
    }
    
    .spinner__bullet{
      background: purple;
    }
      
  }
  
}

JavaScript

// VERSION: 2.3 LAST UPDATE: 11.07.2013
/*
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 *
 * Made by Wilq32, [email protected], Wroclaw, Poland, 01.2009
 * Website: http://jqueryrotate.com
 */

(function($) {
    var supportedCSS,supportedCSSOrigin, styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
    for (var a = 0; a < toCheck.length; a++) if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; }
    if (supportedCSS) {
      supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/,"TransformOrigin");
      if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t";
    }

    // Bad eval to preven google closure to remove it from code o_O
    eval('IE = "v"=="\v"');

    jQuery.fn.extend({
        rotate:function(parameters)
        {
          if (this.length===0||typeof parameters=="undefined") return;
          if (typeof parameters=="number") parameters={angle:parameters};
          var returned=[];
          for (var i=0,i0=this.length;i<i0;i++)
          {
            var element=this.get(i);
            if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {

              var paramClone = $.extend(true, {}, parameters);
              var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;

              returned.push($(newRotObject));
            }
            else {
              element.Wilq32.PhotoEffect._handleRotation(parameters);
            }
          }
          return returned;
        },
        getRotateAngle: function(){
          var ret = [];
          for (var i=0,i0=this.length;i<i0;i++)
          {
            var element=this.get(i);
            if (element.Wilq32 && element.Wilq32.PhotoEffect) {
              ret[i] = element.Wilq32.PhotoEffect._angle;
            }
          }
          return ret;
        },
        stopRotate: function(){
          for (var...