hummingbird-me/kitsu-web

.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 9001;
    width: 0;
    animation: loader 2s ease forwards;
    background: linear-gradient(to right, RGBA(237, 72, 95, 0.7), RGBA(242, 124, 54, 0.7));
}

@keyframes loader {

    0% {
        width: 0;
    }

    20% {
        width: 10%;
    }

    25% {
        width: 24%;
    }

    43% {
        width: 41%;
    }

    56% {
        width: 50%;
    }

    66% {
        width: 52%;
    }

    71% {
        width: 60%;
    }

    75% {
        width: 76%;

    }

    94% {
        width: 86%;
    }

    100% {
        width: 100%;
    }

}


@keyframes shift-rightwards {
  0% {
    transform:translateX(-100%)
  }
  40% {
    transform:translateX(0%)
  }
  60% {
    transform:translateX(0%)
  }
  100% {
    transform:translateX(100%)
  }
}

.loading {
    border-bottom: 6px solid rgba(0, 0, 0, .1);
    border-left: 6px solid rgba(0, 0, 0, .1);
    border-right: 6px solid rgba(0, 0, 0, .1);
    border-top: 6px solid rgba(0, 0, 0, .4);
    border-radius: 100%;
    height: 50px;
    width: 50px;
  display: inline-block;
    animation: rot .6s infinite linear;
  &.white {
    border-color: rgba(255, 255, 255, .1);
    border-top-color: rgba(255, 255, 255, .4);
  }
  @if $theme == 'kitsu-dark' {
    border-color: rgba(255, 255, 255, .1);
    border-top-color: rgba(255, 255, 255, .4);
  }
}
.loading--small {
  border-bottom: 3px solid rgba(0, 0, 0, .1);
    border-left: 3px solid rgba(0, 0, 0, .1);
    border-right: 3px solid rgba(0, 0, 0, .1);
    border-top: 3px solid rgba(0, 0, 0, .4);
    border-radius: 100%;
    height: 15px;
    width: 15px;
}
@keyframes rot {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}


// Feed item loading state
.stream-item--loading {
  min-height: 235px;
    padding: 20px;
}
@keyframes anim {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@-o-keyframes anim {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@-ms-keyframes anim {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@-moz-keyframes anim {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@-webkit-keyframes anim {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes anim2 {
  0% {
    background-position: -50px 0;
  }
  100% {
    background-position: 50px 0;
  }
}
@-o-keyframes anim2 {
  0% {
    background-position: -50px 0;
  }
  100% {
    background-position: 50px 0;
  }
}
@-ms-keyframes anim2 {
  0% {
    background-position: -50px 0;
  }
  100% {
    background-position: 50px 0;
  }
}
@-moz-keyframes anim2 {
  0% {
    background-position: -50px 0;
  }
  100% {
    background-position: 50px 0;
  }
}
@-webkit-keyframes anim2 {
  0% {
    background-position: -50px 0;
  }
  100% {
    background-position: 50px 0;
  }
}

.panel-effect {
  position: relative;
  background: $divider-color no-repeat 800px 104px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZWRlZWYxIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $divider-color), color-stop(20%, lighten($divider-color, 5)), color-stop(40%, $divider-color), color-stop(100%, $divider-color));
  background-image: -moz-linear-gradient(left, $divider-color 0%, lighten($divider-color, 5) 20%, $divider-color 40%, $divider-color 100%);
  background-image: -webkit-linear-gradient(left, $divider-color 0%, lighten($divider-color, 5) 20%, $divider-color 40%, $divider-color 100%);
  background-image: linear-gradient(to right, $divider-color 0%, lighten($divider-color, 5) 20%, $divider-color 40%, $divider-color 100%);
  height: 104px;
  overflow: hidden;
  -moz-animation: anim 1s forwards infinite linear;
  -webkit-animation: anim 1s forwards infinite linear;
  animation: anim 1s forwards infinite linear;
}

.fake-effect {
  position: absolute;
  background: $foreground-background-color;
  right: 0;
  left: 0;
  height: 6px;
}

.fe-0 {
  height: 40px;
  left: 40px;
  width: 25px;
}

.fe-1 {
  height: 8px;
  left: 48px;
  top: 0;
  right: 0;
}

.fe-2 {
  left: 136px;
  top: 8px;
}

.fe-3 {
  height: 12px;
  left: 48px;
  top: 14px;
}

.fe-4 {
  left: 100px;
  top: 26px;
}

.fe-5 {
  height: 10px;
  left: 48px;
  top: 32px;
}

.fe-6 {
  height: 20px;
  top: 40px;
}

.fe-7 {
  left: 410px;
  top: 60px;
}

.fe-8 {
  height: 13px;
  top: 66px;
}

.fe-9 {
  left: 440px;
  top: 79px;
}

.fe-10 {
  height: 13px;
  top: 85px;
}

.fe-11 {
  left: 178px;
  top: 98px;
}

.fe-12 {
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: $foreground-background-color;
}

.fe-13 {
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 999em;
  background: $divider-color no-repeat 50px 50px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjZWRlZWYxIi8+PHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, $divider-color), color-stop(90%, lighten($divider-color, 5)), color-stop(95%, $divider-color), color-stop(99%, $divider-color));
  background-image: -moz-linear-gradient(left, $divider-color 0%, lighten($divider-color, 5) 90%, $divider-color 95%, $divider-color 99%);
  background-image: -webkit-linear-gradient(left, $divider-color 0%, lighten($divider-color, 5) 90%, $divider-color 95%, $divider-color 99%);
  background-image: linear-gradient(to right, $divider-color 0%, lighten($divider-color, 5) 90%, $divider-color 95%, $divider-color 99%);
  -moz-animation: anim2 1s forwards infinite linear;
  -webkit-animation: anim2 1s forwards infinite linear;
  animation: anim2 1s forwards infinite linear;
}