viur-ignite-css/less/spinner.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/*
 * SPINNER
 */


@spinnerColor: @complementColor;
@spinnerBackColor: @complementColor;

// Based on SpinKit:
// https://github.com/tobiasahlin/SpinKit

.spinner-overlay {
  transition: all .7s ease;
  width:100%;
  height:0;
  background: fadeout(@spinnerBackColor,100%);
  pointer-events: none;
}

.spinner {
  width: 20%;
  max-width: 100px;
  text-align: center;
  display: flex;
  padding:5px;
  transition: all .7s ease;
  transition-delay: .7s;
  opacity: 0;
  left:50%;
  user-select: none;
  transform: translate(-50%,-50%);
}

.spinner-square {
  flex: 1;
  background-color: @spinnerColor;
  display: inline-block;
  margin:0 2%;
  opacity: 0;
  user-select: none;
  &:after {
    content:'';
    width:100%;
    padding-bottom: 100%;
    display: block;
  }
}

.is-busy {
  position: relative;
  min-height: 200px;
  & > .spinner-overlay {
    width: 100%;
    height:100%;
    top:0;
    left:0;
    border:1px dashed @spinnerBackColor;
    position: absolute;
    background: fadeout(@spinnerBackColor,65%);
    pointer-events: auto;
    .zIndex('alert',0);
    & .spinner {
      position: absolute;
      top: 50%;
      opacity: 1;
      .zIndex('alert',1);
      & .spinner-square {
        animation: spin-square-ani 1.4s infinite ease-in-out both;
        &:nth-of-type(odd) {
          animation-delay: -0.32s;
        }
        &:nth-of-type(even) {
          animation-delay: -0.16s;
        }
        &:first-of-type {
          animation-delay: -0.48s;
        }
        &:last-of-type {
          animation-delay: 0s;
        }
      }
    }
  }
}

@keyframes spin-square-ani {
  0%, 80%, 100% {
    opacity: 0.2;
  } 40% {
    opacity: 1;
  }
}

// Based on Single Element CSS Spinners:
// https://github.com/lukehaas/css-loaders
.single-spinner {
  transition: all .7s ease;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  margin:-.8em 1.8em 6px;
  text-indent: -9999em;
}

.single-spinner:before,
.single-spinner:after {
  position: absolute;
  top: 0;
  content: '';
}

.single-spinner:before {
  left: -.6em;
  animation-delay: -0.34s;
}

.single-spinner:after {
  left: .6em;
}

.is-busy,
.is-loading,
[aria-busy=true] {
  & .single-spinner,
  & .single-spinner:before,
  & .single-spinner:after {
    background: @spinnerColor;
    animation: single-spinner-ani 1s infinite ease-in-out;
    width: .4em;
    height: .4em;
  }
  & .single-spinner {
    color: #ffffff;
    margin: .1em .6em .3em 1em;
    position: relative;
    transform: translateZ(0);
    animation-delay: -0.16s;
    display: inline-block;
    cursor: progress;
    vertical-align: middle;
  }
}

@keyframes single-spinner-ani {
  0%,
  80%,
  100% {
    opacity: .2;
  }
  40% {
    opacity: 1;
  }
}

// => Spinner Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
}

.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}