Commit b216df2d authored by narendraR's avatar narendraR Committed by Tim Plunkett
Browse files

Issue #3281216 by narendraR, chrisfromredfin, bnjmnm: Reuse core's AJAX... 

Issue #3281216 by narendraR, chrisfromredfin, bnjmnm: Reuse core's AJAX throbber when things are loading
parent e8d64d92

sveltejs/public/build/bundle.css

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js.map

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/src/Loading.svelte

+46 −61
Original line number Diff line number Diff line 
<div class="loader">Loading...</div>

<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber ajax-progress__throbber--fullscreen">&nbsp;</div></div>



<style>

  .loader,

  .loader:before,

  .loader:after {

  .ajax-progress {

    display: inline-block;

  }



  .ajax-progress__throbber {

    box-sizing: border-box;

    width: 1.125rem;

    height: 1.125rem;

    animation: claro-throbber 0.75s linear infinite;

    border: 2px solid #003cc5;

    border-right: 2px dotted transparent;

    border-radius: 50%;

  }

  .loader {

    margin: 12em auto;

    color: #53b0eb;

    font-size: 11px;

    text-indent: -99999em;

    position: relative;

    width: 10em;

    height: 10em;

    box-shadow: inset 0 0 0 1em;

    -webkit-transform: translateZ(0);

    -ms-transform: translateZ(0);

    transform: translateZ(0);



  .ajax-progress--fullscreen {

    position: fixed;

    z-index: 1000;

    top: 50%;

    left: 50%;

    box-sizing: border-box;

    width: 3.5rem; /* 56px */

    height: 3.5rem;

    margin: -1.75rem;

    border: 1px solid rgba(216, 217, 224, 0.8);

    border-radius: 3.5rem;

    background: #fff;

    box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);

  }

  .loader:before,

  .loader:after {



  .ajax-progress__throbber--fullscreen {

    position: absolute;

    content: '';

  }

  .loader:before {

    width: 5.2em;

    height: 10.2em;

    background: #ffffff;

    border-radius: 10.2em 0 0 10.2em;

    top: -0.1em;

    left: -0.1em;

    -webkit-transform-origin: 5.1em 5.1em;

    transform-origin: 5.1em 5.1em;

    -webkit-animation: load2 2s infinite ease 1.5s;

    animation: load2 2s infinite ease 1.5s;

    top: 50%;

    left: 50%;

    width: 1.75rem; /* 28px */

    height: 1.75rem; /* 28px */

    margin: -0.875rem;

    content: "";

    border: 3px solid #003cc5;

    border-right: 3px dotted transparent;

  }

  .loader:after {

    width: 5.2em;

    height: 10.2em;

    background: #ffffff;

    border-radius: 0 10.2em 10.2em 0;

    top: -0.1em;

    left: 4.9em;

    -webkit-transform-origin: 0.1em 5.1em;

    transform-origin: 0.1em 5.1em;

    -webkit-animation: load2 2s infinite ease;

    animation: load2 2s infinite ease;

  }

  @-webkit-keyframes load2 {

    0% {

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);

    }

    100% {

      -webkit-transform: rotate(360deg);

      transform: rotate(360deg);

    }

  }

  @keyframes load2 {

    0% {

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);



  @media screen and (-ms-high-contrast: active) {

    /**

     * Throbber animation is shaky on Edge RTL on high contrast for border width

     * less than 4px.

     */

    @supports (-ms-ime-align:auto) {

      [dir="rtl"] .ajax-progress__throbber {

        border-width: 4px;

      }

    100% {

      -webkit-transform: rotate(360deg);

      transform: rotate(360deg);

    }

  }

</style>