packages/styles/scss/components/_full-loader.scss

   1 // Init values
   2 $animation-duration: 3s !default;
   3 $second-circle-time-offset: 0.125s !default;
   4
   5 // We need to adjust animation for each size.
   6 $stroke-map: (
   7         default: 4.5,
   8         bold: 6.5,
   9         xbold: 15,
  10 ) !default;
  11
  12 .full-loader {
  13         // We need a different duration than each circle for the whole loader
  14         // to have an animation that seems visually "random", so here, duration +20% and ease.
  15         animation: anime-loader-rotation #{$animation-duration * 1.2} ease-in-out infinite;
  16         will-change: transform;
  17
  18         @keyframes anime-loader-rotation {
  19                 from {
  20                         transform: rotate(0);
  21                 }
  22
  23                 to {
  24                         transform: rotate(360deg);
  25                 }
  26         }
  27
  28         &-circle {
  29                 transform-origin: 50%;
  30                 fill: none;
  31                 stroke: currentcolor;
  32                 stroke-width: map-get($stroke-map, default);
  33                 will-change: transform;
  34                 animation: $animation-duration linear infinite;
  35
  36                 &:nth-of-type(1) {
  37                         animation-name: anime-loader-orbit-x;
  38                 }
  39
  40                 &:nth-of-type(2) {
  41                         animation-name: anime-loader-orbit-y;
  42                         animation-delay: $second-circle-time-offset;
  43                 }
  44         }
  45
  46         @each $name, $value in $stroke-map {
  47                 @if $name != 'default' {
  48                         &.is-#{$name} &-circle {
  49                                 stroke-width: $value;
  50
  51                                 &:nth-of-type(1) {
  52                                         animation-name: #{'anime-loader-orbit-x-' + $name};
  53                                 }
  54
  55                                 &:nth-of-type(2) {
  56                                         animation-name: #{'anime-loader-orbit-y-' + $name};
  57                                 }
  58                         }
  59                 }
  60
  61                 @each $axis in (x, y) {
  62                         @keyframes #{'anime-loader-orbit-' + $axis + if($name == 'default', '', '-' + $name)} {
  63                                 0% {
  64                                         transform: #{'rotate' + $axis + '(0)'};
  65                                         stroke-width: $value;
  66                                 }
  67
  68                                 25% {
  69                                         stroke-width: $value * 2;
  70                                 }
  71
  72                                 50% {
  73                                         stroke-width: $value;
  74                                 }
  75
  76                                 75% {
  77                                         stroke-width: $value * 2;
  78                                 }
  79
  80                                 100% {
  81                                         transform: #{'rotate' + $axis + '(360deg)'};
  82                                         stroke-width: $value;
  83                                 }
  84                         }
  85                 }
  86         }
  87 }