@salaxy/ng1/less/salaxy-component/spinner.less

AngularJS libraries for Salaxy platform (Palkkaus.fi)

/*loader spinner*/

.salaxy-loading.spinner>div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.salaxy-loading.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.salaxy-loading.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}


.spinner{
    display: table;
    text-align: center;
    margin: 5px auto;
    width: 100px;
}

@-webkit-keyframes spinner-rotate {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg); }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg); } 
}
  
@keyframes spinner-rotate {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } 
}

.sxy-spinner {
  width: 100%;
  height: 100px;
  text-align: center;
  svg.sxy-spinner-spin {
    width: 100px;
    height: 100px;
    -webkit-animation: spinner-rotate 1s linear infinite;
    animation: spinner-rotate 1s linear infinite;
    animation-duration: 1.5s;
    circle {
      stroke: color(@brand-primary);
      fill: transparent;
      stroke-width: 5px;
      stroke-dasharray: 128px;
      stroke-dashoffset: 82px;
    }
  }
  svg.sxy-spinner-bg {
    position: absolute;
    width: 100px;
    height: 100px;
    circle {
      stroke: lighten(color(@brand-primary), 30%);
      fill: transparent;
      stroke-width: 4px;
    }
  }
}
.sxy-spinner-full-screen-container {
  height: 100vh;
  min-height: 300px; // For browsers not supporting view-height
  position: relative;
  text-align: center;
  .sxy-spinner-container {
    margin: auto;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sxy-spinner{
    width:100%;
    margin:auto;
  }
  h3{
    text-align:center;
    width:100%;
    margin:auto;
  }
}
.sxy-spinner-container {
  text-align: center;
}
  
.salaxy-loading{
  &.spinner{
    >div {
      width: 18px;
      height: 18px;
      background-color: #333;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
  }
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}