England Football

Efl Load Screen 

<div class="efl-load-screen hidden" role="dialog" aria-modal="true" data-behavior="efl-load-screen" data-load-screen="true">
    <div class="efl-load-screen__overlay">
        <h2 class="title">Loading your qualifications</h2>
        <canvas id="load-screen-football-animation" width="400" height="135"></canvas>
        <div class="loading-bar"><span></span></div>
        <p data-text-default="Please bear with us. this may take a few minutes." data-lost-connection="Lost connection">
            Please bear with us. this may take a few minutes.
        </p>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    import { Rive, Fit, Layout } from '@rive-app/canvas';

export default parentElement => {
  const loader = parentElement.querySelector('.loading-bar > span');
  let loaderPercentage = 0;

  // Rive
  const footballCanvas = parentElement.querySelector(
    '#load-screen-football-animation'
  );

  const lyout = new Layout({
    fit: Fit.Cover,
  });

  const riveAnimation = new Rive({
    src: '/assets/example-content/learner_profile_onboarding.riv',
    canvas: footballCanvas,
    layout: lyout,
  });

  riveAnimation.play('Load in');
  riveAnimation.play('Ball spin');

  const timer = setInterval(() => {
    if (loaderPercentage < 100) {
      loaderPercentage += 1;
      loader.style.width = `${loaderPercentage}%`;
    } else {
      clearInterval(timer);
    }
  }, 100);
};
  • URL: /components/raw/efl-load-screen/efl-load-screen.js
  • Filesystem Path: src/library/components/efl-load-screen/efl-load-screen.js
  • Size: 787 Bytes
  • Content: 
    .efl-load-screen {
  position: fixed;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  background: rgba(28, 28, 28, 0.8);
  backdrop-filter: blur(1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: $white;
  text-align: center;

  &__overlay {
    .title {
      @extend .efl-heading-2;

      margin-bottom: 1.8rem;
    }

    canvas {
      margin-bottom: 2.7rem;
      width: 40rem;
      height: 13.5rem;
    }

    .loading-bar {
      width: 19.2rem;
      height: 0.5rem;
      border-radius: 5px;
      background-color: $white;
      display: flex;
      margin: 0 auto;
      margin-bottom: 3.2rem;
      span {
        width: 50%;
        background-color: $red;
        border-radius: 5px;
      }
    }

    p {
      @extend .efl-p-medium;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__overlay {
      .title {
        margin-bottom: 2.2rem;
      }

      canvas {
        margin-bottom: 3.2rem;
      }

      .loading-bar {
        margin-bottom: 3.2rem;
      }
    }
  }
}
  • URL: /components/raw/efl-load-screen/efl-load-screen.scss
  • Filesystem Path: src/library/components/efl-load-screen/efl-load-screen.scss
  • Size: 1.1 KB 
<div class="efl-load-screen hidden" role="dialog" aria-modal="true" data-behavior="efl-load-screen" data-load-screen="true">
    <div class="efl-load-screen__overlay">
        <h2 class="title">Loading your qualifications</h2>
        <canvas id="load-screen-football-animation" width="400" height="135"></canvas>
        <div class="loading-bar"><span></span></div>
        <p data-text-default="Please bear with us. this may take a few minutes."
            data-lost-connection="Lost connection">
            Please bear with us. this may take a few minutes.
        </p>
    </div>
</div>