JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<!-- <small>CSS Reload Icons</small> -->
<div class="reloadDouble"></div>
<!-- <div class="reloadSingle"></div> -->

SCSS

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
	  
body {
  background-color: grey;
  color: white;
  font: bold 400% Helvetica,Arial;
	text-align: center;
}

    
// Double
.reloadDouble {
    border-color: transparent white;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    height: 50px;
    margin: 8px;
    width: 50px;
     display: inline-block;
    position: relative;
    /* -webkit-animation: rotate 1.5s linear infinite;
    animation: rotate 1.5s linear infinite; */
  &:before, &:after {
    border-style: solid;
    content: '';
    display: block;
    position: absolute;
    width: 0;
    -webkit-transform: rotate(-45deg);
	  transform: rotate(-45deg);
  }
  &:after {
    border-color: transparent transparent transparent white;
    border-width: 5px 0 5px 8px;
    top: 5px;
    left: 0px;
  }
  &:before {
    border-color: transparent white transparent transparent;
    border-width: 5px 8px 5px 0;
    bottom: 0px;
    right: 5px;
  }
}

.rotate{
  -webkit-animation: rotate 1.5s linear infinite;
    animation: rotate 1.5s linear infinite;
}


@-webkit-keyframes rotate {
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}

JavaScript

$('.reloadDouble').click(function(){
	$(this).toggleClass('rotate');
});