thinkful-ui/src/Loader/loader.less

Shared navigation and UI resources for Thinkful.

@import "~tfstyleguide/vars";

.tui-loader {
  min-height: 60px;
}

.tui-loader-inner {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 50px;
  height: 50px;
  animation: tui-loader-rotate 2s linear infinite;
}

.tui-loader-stroke {
  stroke-dasharray: 30,94;
  stroke-dashoffset: 0;
  animation: tui-loader-dash 1.5s linear infinite;
  stroke: @blue;
}

@keyframes tui-loader-rotate{
  100%{
    transform: rotate(360deg);
  }
}

@keyframes tui-loader-dash{
  0% {
    stroke-dasharray: 30,94;
    stroke-dashoffset: 0;
    stroke: @blue;
  }

  50% {
    stroke-dasharray: 94;
  }

  100% {
    stroke-dasharray: 30,94;
    stroke-dashoffset: -124;
    stroke: @blue125;
  }
}