ar-spinner-icon {
  display: inline-block;
  align-self: center;
  width: 24px;
  width: var(--aurelia-ux--ar-spinner-icon-size, 24px);
  height: 24px;
  height: var(--aurelia-ux--ar-spinner-icon-size, 24px);
  position:relative;
  -webkit-animation: rotateit 1.3s linear infinite;
  -moz-animation: rotateit 1.3s linear infinite;
  animation: rotateit 1.3s linear infinite;
  background-color: transparent!important;
}

@-webkit-keyframes rotateit {
    from {
         -webkit-transform: rotate(360deg);
    }
    to {
         -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes rotateit {
    from {
         -moz-transform: rotate(360deg);
    }
    to {
         -moz-transform: rotate(0deg);
    }
}
@keyframes rotateit {
    from {
         transform: rotate(360deg);
    }
    to {
         transform: rotate(0deg);
    }
}
/*=======================================================
* Circles
*======================================================*/
ar-spinner-icon div{
    width: 5px;
    height: 5px;
    border-radius:50%;
    background: var(--aurelia-ux--ar-spinner-icon-color, var(--ux-swatch--white));
    position: absolute;
    top: 8px;
    left: 10px;
}

ar-spinner-icon.dark div{
  background: var(--aurelia-ux--ar-spinner-icon-dark-color, var(--ux-swatch--black));
}

ar-spinner-icon.primary div{
  background: var(--aurelia-ux--ar-spinner-icon-primary-color, var(--aurelia-ux--design-primary));
}

ar-spinner-icon.accent div{
  background: var(--aurelia-ux--ar-spinner-icon-accent-color, var(--aurelia-ux--design-accent));
}

ar-spinner-icon div:nth-child(1){
  -webkit-transform: rotate(0deg) translate(0, -8px) scale(1.2);
  -moz-transform: rotate(0deg) translate(0, -8px) scale(1.2);
  transform: rotate(0deg) translate(0, -8px) scale(1.2);
  opacity:0.8;
}
ar-spinner-icon div:nth-child(2){
  -webkit-transform: rotate(60deg) translate(0, -8px) scale(1.1);
  -moz-transform: rotate(60deg) translate(0, -8px) scale(1.1);
  transform: rotate(60deg) translate(0, -8px) scale(1.1);
  opacity:0.6;
}
ar-spinner-icon div:nth-child(3){
  -webkit-transform: rotate(120deg) translate(0, -8px) scale(0.9);
  -moz-transform: rotate(120deg) translate(0, -8px) scale(0.9);
  transform: rotate(120deg) translate(0, -8px) scale(0.9);
  opacity:0.5;
}
ar-spinner-icon div:nth-child(4){
  -webkit-transform: rotate(180deg) translate(0, -8px) scale(0.8);
  -moz-transform: rotate(180deg) translate(0, -8px) scale(0.8);
  transform: rotate(180deg) translate(0, -8px) scale(0.8);
  opacity:0.3;
}
ar-spinner-icon div:nth-child(5){
  -webkit-transform: rotate(240deg) translate(0, -8px) scale(0.6);
  -moz-transform: rotate(240deg) translate(0, -8px) scale(0.6);
  transform: rotate(240deg) translate(0, -8px) scale(0.6);
  opacity:0.2;
}
ar-spinner-icon div:nth-child(6){
  -webkit-transform: rotate(300deg) translate(0, -8px) scale(0.4);
  -moz-transform: rotate(300deg) translate(0, -8px) scale(0.4);
  transform: rotate(300deg) translate(0, -8px) scale(0.4);
  opacity:0.1;
}