<div class="loading360g">
    <div class="center-circle"></div>
    <div class="circle-1 circle-yellow circle-medium"></div>
    <div class="circle-2 circle-orange circle-large"></div>
    <div class="circle-3 circle-teal circle-medium"></div>
    <div class="circle-4 circle-yellow circle-large"></div>
    <div class="circle-5 circle-orange circle-medium"></div>
    <div class="circle-6 circle-red circle-small"></div>
</div>
<div class="loading360g">
  <div class="center-circle"></div>
  <div class="circle-1 circle-yellow circle-medium"></div>
  <div class="circle-2 circle-orange circle-large"></div>
  <div class="circle-3 circle-teal circle-medium"></div>
  <div class="circle-4 circle-yellow circle-large"></div>
  <div class="circle-5 circle-orange circle-medium"></div>
  <div class="circle-6 circle-red circle-small"></div>
</div>
/* No context defined. */
  • Content:
    .lds-ellipsis {
      display: block;
      position: relative;
      width: 80px;
      height: 80px;
      margin-left: auto;
      margin-right: auto;
    }
    .lds-ellipsis div {
      position: absolute;
      top: 33px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }
    .lds-ellipsis div:nth-child(1) {
      background: $orange;
      left: 8px;
      animation: lds-ellipsis1 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(2) {
      background: $teal;
      left: 8px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(3) {
      background: $yellow;
      left: 32px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(4) {
      background: $red;
      left: 56px;
      animation: lds-ellipsis3 0.6s infinite;
    }
    @keyframes lds-ellipsis1 {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes lds-ellipsis3 {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }
    @keyframes lds-ellipsis2 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(24px, 0);
      }
    }
    
    .loading360g {
        --logo-size: 80px;
        --small-circle: 9%;
        --medium-circle: 14%;
        --large-circle: 20%;
        --center-circle: 50%;
        --diagonals: 21.7%;
        --colour-red: #BC2C26;
        --colour-yellow: #EFC329;
        --colour-orange: var(--color-orange);
        --colour-teal: #4DACB6;
        --colour-dark: #153634;
        display: inline-block;
        position: relative;
        width: var(--logo-size);
        height: var(--logo-size);
        animation: loading360g-rotate 2s forwards infinite;
    }
    
    .loading360g>div.circle-yellow {
        background: var(--colour-yellow);
    }
    
    .loading360g>div.circle-red {
        background: var(--colour-red);
    }
    
    .loading360g>div.circle-orange {
        background: var(--colour-orange);
    }
    
    .loading360g>div.circle-teal {
        background: var(--colour-teal);
    }
    
    .loading360g>div.circle-small {
        --circle-size: var(--small-circle);
    }
    
    .loading360g>div.circle-medium {
        --circle-size: var(--medium-circle);
    }
    
    .loading360g>div.circle-large {
        --circle-size: var(--large-circle);
    }
    
    .loading360g>div {
        position: absolute;
        width: var(--circle-size);
        height: var(--circle-size);
        background: #000;
        border-radius: 50%;
        animation: loading360g-grow 1.6s ease-in-out infinite;
    }
    
    .loading360g>div.center-circle {
        --circle-size: var(--center-circle);
        top: calc(50% - calc(var(--circle-size) / 2));
        left: calc(50% - calc(var(--circle-size) / 2));
        background: var(--colour-dark);
        animation: none;
    }
    
    .loading360g>div.circle-1 {
        animation-delay: 0s;
        top: calc(12.5% - calc(var(--circle-size) / 2));
        left: calc(50% - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-2 {
        animation-delay: -0.2s;
        top: calc(var(--diagonals) - calc(var(--circle-size) / 2));
        left: calc(var(--diagonals) - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-3 {
        animation-delay: -0.4s;
        top: calc(50% - calc(var(--circle-size) / 2));
        left: calc(12.5% - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-4 {
        animation-delay: -0.6s;
        bottom: calc(var(--diagonals) - calc(var(--circle-size) / 2));
        left: calc(var(--diagonals) - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-5 {
        animation-delay: -0.8s;
        bottom: calc(12.5% - calc(var(--circle-size) / 2));
        left: calc(50% - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-6 {
        animation-delay: -1s;
        bottom: calc(var(--diagonals) - calc(var(--circle-size) / 2));
        right: calc(var(--diagonals) - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-7 {
        animation-delay: -1.2s;
        bottom: calc(50% - calc(var(--circle-size) / 2));
        right: calc(12.5% - calc(var(--circle-size) / 2));
    }
    
    .loading360g>div.circle-8 {
        animation-delay: -1.4s;
        top: calc(var(--diagonals) - calc(var(--circle-size) / 2));
        right: calc(var(--diagonals) - calc(var(--circle-size) / 2));
    }
    
    @keyframes loading360g-grow {
        0%, 20%, 80%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.75);
        }
    }
    
    @keyframes loading360g-rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
  • URL: /components/raw/spinner/spinner.scss
  • Filesystem Path: src/components/02-elements/spinner/spinner.scss
  • Size: 4.2 KB

No notes defined.