Spin circle animation on load

by elizabethkmathew

HTML

<button class="circle" id="btn">Spin Circle</button>

SCSS

//Colors
$background: #fefefe;
$text: #4b507a;

$cyan: #60daaa;
$yellow: #fbca67;
$orange: #ff8a30;
$red: #f45e61;
$purple: #6477b9;
$blue: #0eb7da;

// Basic styles
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  /* margin: 2em; */
  padding: 1em 2em;
  
  // Using inset box-shadow instead of border for sizing simplicity
  /* box-shadow: inset 0 0 0 2px $red; */
  color: $red;
  font-size: inherit;
  font-weight: 700;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
   &::before {
    border: 2px solid transparent; 
  }
  &::after {
    border: 0 solid transparent; 
  }
}
.spin {
  width: 5em;
  height: 5em;
  padding: 0;
  
  &::before {
    border-top-color: $blue; 
    border-right-color: $blue;
    border-bottom-color: $blue;

    transition:
      border-top-color 0.15s linear, 
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border-top: 2px solid $blue;
    border-left-width: 2px; 
    border-right-width: 2px;
    transform: rotate(270deg);
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s;
  }
}

.circle {
  border-radius: 100%;
  box-shadow: none;
    
  &::before,
  &::after {
    border-radius: 100%;
  }
}

JavaScript

$(document).ready(function() {
 $(".circle").addClass("spin");
});