loading concept 3-1

by sungsoonz

HTML

<div class="main"></div>
<div class="loader"></div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

body {
  background: #F7F9FB;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.loader {
  width: 100px;
  height: 100px;
  left: 46% !important;
  position: fixed !important;
  top: 30% !important;

  .loader-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    opacity: 1;
    transition: all .4s ease-out;
    &.fade {
      opacity: 0;
      transform: scale(.7);
    }
  }

  .loader-spinner {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;

    .loader-path {
      stroke-dasharray: 150, 200;
      stroke-dashoffset: -10;
      animation: dash 1.5s ease-in-out infinite;
      stroke-linecap: round;
    }
  }
}

.main {
  margin-top: 30vh;
  text-align: center;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

JavaScript

$(function() {

  loadData();

});

function loadData() {
  $.ajax({
    url: 'https://reqres.in/api/?delay=4',
    beforeSend: function() {
      $('.main').html('');
      $('.loader-logo').removeClass('fade');
      addLoader($('.loader'));
    },
    complete: function(response) {
      removeLoader($('.loader'), function() {
        $('.main').html('Content loaded.').hide().fadeIn();
      });
    }
  });
}

function addLoader(el) {
  var svg = $("<svg class='loader-logo' width='36' height='24' viewBox='0 0 36 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M19.8076 16.9258V0H15.573L4.07905 16.9258V0H0V24H4.23461L15.7458 7.07424V24H19.9632L31.5781 6.91703V24H35.6571V0H31.3188L19.8076 16.9258V16.9258Z' fill='#12324B'/></svg><svg class='loader-spinner' viewBox='25 25 50 50'><circle class='loader-path' cx='50' cy='50' r='20' fill='none' stroke='#1ba8fb' stroke-width='2' /></svg>");
  el.html(svg).hide().fadeIn();
}

function removeLoader(el, complete) {
  var spinner = el.children(".loader-spinner");
  var logo = el.children(".loader-logo");
  spinner.fadeOut();
  logo.addClass("fade");
  complete();
}