JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css">
<div id="header">
<div class="plus-box"></div>
</div>

<p>

<button type="button" id="spinbut">
<i class="ri-home-line"></i> Home
</button>
</p>

CSS

:root {
   --app-secondary-color: grey;
   --app-default-color: black;
 }

 .plus-box {
   position: relative;
   display: flex;
   flex: 0 0 auto;
   width: 64px;
   height: 64px;
   background-color: var(--app-secondary-color);
   cursor: pointer;
   transition: all 0.3s ease-in-out;
 }

 .plus-box::before {
   z-index: 1;
   content: "";
   position: absolute;
   width: 16px;
   height: 4px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--app-default-color);
   transition: all 0.3s ease-in-out;
   transform-origin: center center;
 }

 .plus-box::after {
   position: absolute;
   content: "";
   width: 4px;
   height: 16px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--app-default-color);
   transition: all 0.3s ease-in-out;
 }

 .open-aside .plus-box::before {
   transition: all 0.3s ease-in-out;
   transform: rotate(90deg) translate(0%, 200%);
   opacity: 0;
 }

 .open-aside .plus-box::after {
   transform: rotate(90deg) translate(-200%, 16%);
 }


 button {
   padding: 0.85rem 1rem;
 }


 .loading {
   padding-left:1rem;
   transition: all .3s;
    transition-timing-function: ease-in;
 }
  .loading:focus {
   outline: 0;
 }

 .loading>i {
   visibility: hidden;
   opacity: 0;
   width:0;
 }
 .loading .loader-icon{
   display:inline-block;
   top: 52%;
   left: auto;
   right: .5em;
   animation: spinner 1.5s infinite linear;
   font-size:inherit;
  
 }




 @keyframes spinner {
   0% {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(1turn);
   }
 }

JavaScript

$('.plus-box').on('click', function() {
  $('body').toggleClass('open-aside');
  $('.plus-box').toggleClass('open');
})

$('button').on('click', function() {

  var $this = $(this);
  if ($this.hasClass('loading')) {
    $this.removeClass('loading').find('.loader-icon').remove();

  } else {
    $this.addClass('loading').append('<div class="loader-icon ri-loader-4-line"></div>');

  }
});