No notes defined.

<div id="loading-spinner" class="loading-spinner">
    <div class="loading-spinner__image">
        <div class="loadingio-spinner-spinner-rf63k31rut">
            <div class="ldio-vck1watuie">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <p id="loading-spinner__text" class="font-2xl">Loading - please wait&hellip;</p>
    </div>
</div>
<div id="loading-spinner" class="loading-spinner">
    <div class="loading-spinner__image">
        <div class="loadingio-spinner-spinner-rf63k31rut"><div class="ldio-vck1watuie"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
        <p id="loading-spinner__text" class="font-2xl">Loading - please wait&hellip;</p>
    </div>
</div>
  • Content:
    /* CG: Loading spinner for forms */
    @keyframes ldio-vck1watuie {0% { opacity: 1 }100% { opacity: 0 }}.ldio-vck1watuie div {left: 94px;top: 48px;position: absolute;animation: ldio-vck1watuie linear 1s infinite;background: #cccccc;width: 12px;height: 24px;border-radius: 4.8px / 4.8px;transform-origin: 6px 52px;}.ldio-vck1watuie div:nth-child(1) {transform: rotate(0deg);animation-delay: -0.9166666666666666s;background: #cccccc;}.ldio-vck1watuie div:nth-child(2) {transform: rotate(30deg);animation-delay: -0.8333333333333334s;background: #cccccc;}.ldio-vck1watuie div:nth-child(3) {transform: rotate(60deg);animation-delay: -0.75s;background: #cccccc;}.ldio-vck1watuie div:nth-child(4) {transform: rotate(90deg);animation-delay: -0.6666666666666666s;background: #cccccc;}.ldio-vck1watuie div:nth-child(5) {transform: rotate(120deg);animation-delay: -0.5833333333333334s;background: #cccccc;}.ldio-vck1watuie div:nth-child(6) {transform: rotate(150deg);animation-delay: -0.5s;background: #cccccc;}.ldio-vck1watuie div:nth-child(7) {transform: rotate(180deg);animation-delay: -0.4166666666666667s;background: #cccccc;}.ldio-vck1watuie div:nth-child(8) {transform: rotate(210deg);animation-delay: -0.3333333333333333s;background: #cccccc;}.ldio-vck1watuie div:nth-child(9) {transform: rotate(240deg);animation-delay: -0.25s;background: #cccccc;}.ldio-vck1watuie div:nth-child(10) {transform: rotate(270deg);animation-delay: -0.16666666666666666s;background: #cccccc;}.ldio-vck1watuie div:nth-child(11) {transform: rotate(300deg);animation-delay: -0.08333333333333333s;background: #cccccc;}.ldio-vck1watuie div:nth-child(12) {transform: rotate(330deg);animation-delay: 0s;background: #cccccc;}.loadingio-spinner-spinner-rf63k31rut {width: 200px;height: 200px;display: inline-block;overflow: hidden;background: none;}.ldio-vck1watuie {width: 100%;height: 100%;position: relative;transform: translateZ(0) scale(1);backface-visibility: hidden;transform-origin: 0 0; /* see note above */}.ldio-vck1watuie div { box-sizing: content-box; }/* generated by https://loading.io/ */
    .loading-spinner {
      position: absolute;
      display: table;
      text-align: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.6);
      z-index: 10000;
      transition: all .25s;
      color: white;
    
      &__image {
        display: table-cell;
        vertical-align: middle;
      }
    }
    @keyframes lds-spinner {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  • URL: /components/raw/loading-spinner/_loading-spinner.scss
  • Filesystem Path: src\components\loading-spinner\_loading-spinner.scss
  • Size: 2.5 KB