England Football

Registration Loader 

<div class="registration-loader registration_hide" role="alert" aria-label="loading, Please do not refresh the page. ">
    <img id="registration-loader-logo" class="registration-loader-estc" src="/assets/example-content/loading_with_logo.gif" loading="lazy" alt="loading" />

    <div class="registration-loader__travelclubs">
        <div class="registration-loader__spinner">
            <div class="registration-loader__ring"></div>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    // eslint-disable-next-line import/no-cycle
import { currentPage } from '../registrationUtility';

const registrationloader = document.querySelector('#registration-loader-logo');

export const showRegistrationLoader = () => {
  currentPage.isLoading = true;
  if (registrationloader) {
    registrationloader.parentElement.classList.remove('registration_hide');
  }
};

export const hideRegistrationLoader = () => {
  currentPage.isLoading = false;
  if (registrationloader) {
    registrationloader.parentElement.classList.add('registration_hide');
  }
};
  • URL: /components/raw/registration-loader/registration-loader.js
  • Filesystem Path: src/library/modules/registration/registration-loader/registration-loader.js
  • Size: 557 Bytes
  • Content: 
    .registration-loader {
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 0;
  z-index: 10;
  background: #004f9f;
  width: 100%;
  height: 100%;
  display: flex;

  #registration-loader-logo {
    display: block;
  }

  &__travelclubs {
    display: none;
    width: 60%;
    height: 60%;
    position: absolute;
    z-index: 1;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    flex-direction: column;
    gap: 16px;
  }

  &__spinner {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
      from 90deg,
      #fff 0deg,
      rgba(255, 255, 255, 0) 360deg
    );
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5.74px),
      #000 calc(100% - 5.74px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5.74px),
      #000 calc(100% - 5.74px)
    );
    animation: registration-loader-spin 1s linear infinite;
  }
}

body:has(.registration-page.theme-three-lions),
body:has(.registration-page.theme-lionesses) {
  .registration-loader {
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    background-size: cover !important;
    background-blend-mode: multiply !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    &__travelclubs {
      display: flex;
    }

    #registration-loader-logo {
      visibility: hidden;
    }
  }
}

body:has(.registration-page.theme-three-lions) {
  .registration-loader {
    background-image: url(/assets/example-content/threelions-bg-desktop.png);
  }
}

body:has(.registration-page.theme-lionesses) {
  .registration-loader {
    background-image: url(/assets/example-content/lioness-bg-desktop.png);
  }
}

@keyframes registration-loader-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@media screen and (max-width: 767px) {
  .registration-loader__spinner {
    width: 120px;
    height: 120px;
  }

  .registration-loader__ring {
    border-width: 6px;
  }

  body:has(.registration-page.theme-three-lions) {
    .registration-loader {
      background-image: url(/assets/example-content/threelions-bg-mobile.png);
    }
  }

  body:has(.registration-page.theme-lionesses) {
    .registration-loader {
      background-image: url(/assets/example-content/lioness-bg-mobile.png);
    }
  }
}
  • URL: /components/raw/registration-loader/registration-loader.scss
  • Filesystem Path: src/library/modules/registration/registration-loader/registration-loader.scss
  • Size: 2.7 KB 
<div class="registration-loader registration_hide" role="alert" aria-label="loading, Please do not refresh the page. ">
    <img id="registration-loader-logo" class="registration-loader-estc"
        src="/assets/example-content/loading_with_logo.gif" loading="lazy" alt="loading" />

    <div class="registration-loader__travelclubs">
        <div class="registration-loader__spinner">
            <div class="registration-loader__ring"></div>
        </div>
    </div>
</div>