netbeast-cli/electron/loading/loading.css

Netbeast OS dashboard, IoT apps manager

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #292929;
  overflow: hidden;
  font-family: 'Fira Sans', sans-serif;
}

#overflow {
  overflow: hidden;
  border-radius: 50%;
  width: 165px;
  height: 165px;
}

#container, #spaceship {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#spaceship {
  position: relative;
  z-index: 5;
}

#LBP {
  height: 400px;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  position: absolute;
  top: 50%;
  width: 400px;
}

/***** TEXT AND BORDER *****/
#loading {
  height: 400px;
  position: absolute;
  width: 400px;
  -webkit-animation: spinLoading 6s linear infinite;
          animation: spinLoading 6s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

#border {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  -webkit-animation: borderSpin linear infinite 6s;
          animation: borderSpin linear infinite 6s;
}
#border .square {
  width: 150px;
  height: 150px;
  background: #14a5a8;
  position: absolute;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -75px;
}
#border .square:nth-child(1) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#border .square:nth-child(2) {
  -webkit-transform: rotate(72deg);
          transform: rotate(72deg);
}
#border .square:nth-child(3) {
  -webkit-transform: rotate(144deg);
          transform: rotate(144deg);
}
#border .square:nth-child(4) {
  -webkit-transform: rotate(216deg);
          transform: rotate(216deg);
}
#border .square:nth-child(5) {
  -webkit-transform: rotate(288deg);
          transform: rotate(288deg);
}

/***** CONTAINER *****/
#container {
  width: 165px;
  height: 165px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -82.5px;
  margin-top: -82.5px;
  background-image: -webkit-repeating-linear-gradient(top, #161616 0px, #161616 8px, #323232 8px, #323232 10px);
  background-image: repeating-linear-gradient(to bottom, #161616 0px, #161616 8px, #323232 8px, #323232 10px);
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
}

#smoke1 {
  -webkit-animation: 4s linear 0s normal none infinite running circleRotate1;
          animation: 4s linear 0s normal none infinite running circleRotate1;
  height: 59px;
  left: 35px;
  position: absolute;
  top: 125px;
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  width: 56px;
}
#smoke1 .circle {
  background: none repeat scroll 0 0 #f1264c;
  border-radius: 50%;
  height: 30px;
  left: 12px;
  position: absolute;
  top: 15px;
  width: 30px;
}
#smoke1 .circle:nth-child(1) {
  -webkit-transform: rotate(0deg) translate(0.9em);
          transform: rotate(0deg) translate(0.9em);
}
#smoke1 .circle:nth-child(2) {
  -webkit-transform: rotate(72deg) translate(0.9em);
          transform: rotate(72deg) translate(0.9em);
}
#smoke1 .circle:nth-child(3) {
  -webkit-transform: rotate(144deg) translate(0.9em);
          transform: rotate(144deg) translate(0.9em);
}
#smoke1 .circle:nth-child(4) {
  -webkit-transform: rotate(216deg) translate(0.9em);
          transform: rotate(216deg) translate(0.9em);
}
#smoke1 .circle:nth-child(5) {
  -webkit-transform: rotate(288deg) translate(0.9em);
          transform: rotate(288deg) translate(0.9em);
}

#smoke2 {
  -webkit-animation: 4s linear 0s normal none infinite running circleRotate2;
          animation: 4s linear 0s normal none infinite running circleRotate2;
  height: 59px;
  left: 75px;
  position: absolute;
  top: 125px;
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  width: 56px;
}
#smoke2 .circle {
  background: none repeat scroll 0 0 #f1264c;
  border-radius: 50%;
  height: 30px;
  left: 12px;
  position: absolute;
  top: 15px;
  width: 30px;
}
#smoke2 .circle:nth-child(1) {
  -webkit-transform: rotate(0deg) translate(0.9em);
          transform: rotate(0deg) translate(0.9em);
}
#smoke2 .circle:nth-child(2) {
  -webkit-transform: rotate(72deg) translate(0.9em);
          transform: rotate(72deg) translate(0.9em);
}
#smoke2 .circle:nth-child(3) {
  -webkit-transform: rotate(144deg) translate(0.9em);
          transform: rotate(144deg) translate(0.9em);
}
#smoke2 .circle:nth-child(4) {
  -webkit-transform: rotate(216deg) translate(0.9em);
          transform: rotate(216deg) translate(0.9em);
}
#smoke2 .circle:nth-child(5) {
  -webkit-transform: rotate(288deg) translate(0.9em);
          transform: rotate(288deg) translate(0.9em);
}

.star1 {
  -webkit-animation: 4s linear 0s normal none infinite running moveStar;
          animation: 4s linear 0s normal none infinite running moveStar;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  color: white;
  left: 30px;
  opacity: 0.7;
  position: relative;
  top: -15px;
}

.star2 {
  -webkit-animation: 20s linear 0s normal none infinite running moveStar;
          animation: 20s linear 0s normal none infinite running moveStar;
  color: white;
  left: 80px;
  opacity: 0.3;
  position: relative;
  top: -15px;
  font-size: 5px;
}

.star3 {
  -webkit-animation: 10s linear 0s normal none infinite running moveStar;
          animation: 10s linear 0s normal none infinite running moveStar;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  color: white;
  left: 100px;
  opacity: 0.5;
  position: relative;
  top: -15px;
  font-size: 8px;
}

.star4 {
  -webkit-animation: 7s linear 0s normal none infinite running moveStar;
          animation: 7s linear 0s normal none infinite running moveStar;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  color: white;
  left: 20px;
  opacity: 0.6;
  position: relative;
  top: -15px;
  font-size: 9px;
}

.star5 {
  -webkit-animation: 20s linear 0s normal none infinite running moveStar;
          animation: 20s linear 0s normal none infinite running moveStar;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  color: white;
  left: -30px;
  opacity: 0.3;
  position: relative;
  top: -15px;
  font-size: 5px;
}

.star6 {
  -webkit-animation: 5s linear 0s normal none infinite running moveStar;
          animation: 5s linear 0s normal none infinite running moveStar;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
  color: white;
  left: 80px;
  opacity: 0.7;
  position: relative;
  top: -15px;
}

/***** ROCKET *****/
#animateRocket {
  position: relative;
  z-index: 5;
  -webkit-animation: animateRocket linear infinite 1s;
          animation: animateRocket linear infinite 1s;
}

#rocket {
  height: 55px;
  width: 36px;
  overflow: hidden;
  position: relative;
  left: 50%;
  margin-left: -18px;
  z-index: 2;
}
#rocket #body {
  border-radius: 50%;
  width: 36px;
  height: 60px;
  background: grey;
  top: -8px;
  position: relative;
}
#rocket #body:before {
  background: none repeat scroll 0 0 #0f3d71;
  border-radius: 50%;
  content: "";
  display: block;
  height: 14px;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  top: 12px;
  width: 14px;
}

#nose,
#nose:before,
#nose:after {
  width: 1.2em;
  height: 1.2em;
  position: relative;
  background: grey;
  border-top-right-radius: 50%;
}

#nose:before,
#nose:after {
  content: '';
  position: absolute;
}

#nose {
  -webkit-transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
          transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  position: relative;
  left: 50%;
  top: 5px;
  margin-left: -0.6em;
}

#nose:before {
  -webkit-transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
          transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}

#nose:after {
  -webkit-transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
          transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}

.tail {
  left: 24px;
  position: relative;
  top: 55px;
  -webkit-transform: scaleX(0.2) scaleY(2);
          transform: scaleX(0.2) scaleY(2);
  z-index: 1;
  -webkit-backface-visibility: hidden;
}

.tail span {
  display: inline-block;
  height: 8.66em;
  overflow: hidden;
  -webkit-transform: rotate(60deg) skewX(30deg);
          transform: rotate(60deg) skewX(30deg);
  width: 10em;
}

.tail span:before {
  display: block;
  background: -webkit-linear-gradient(top, #9fc319 0%, #f1264c 50%) repeat scroll 0 0 transparent;
  background: linear-gradient(to bottom, #9fc319 0%, #f1264c 50%) repeat scroll 0 0 transparent;
  content: '';
  width: inherit;
  height: 50%;
  -webkit-transform: skewX(-30deg) rotate(-60deg) translate(-1.25em);
          transform: skewX(-30deg) rotate(-60deg) translate(-1.25em);
}

#wing1 {
  border-color: transparent transparent #c62020;
  border-style: solid;
  border-width: 0 20px 20px;
  height: 0;
  left: 167px;
  position: absolute;
  top: 35px;
  -webkit-transform: skewX(25deg);
          transform: skewX(25deg);
  width: 0;
  z-index: 1;
}

#wing2 {
  border-color: transparent transparent #c62020;
  border-style: solid;
  border-width: 0 20px 20px;
  height: 0;
  left: 193px;
  position: absolute;
  top: 35px;
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
  width: 0;
  z-index: 1;
}

#shadow {
  background: -webkit-radial-gradient(center center ellipse, #000000 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 transparent;
  background: radial-gradient(ellipse at center center, #000000 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 transparent;
  border-radius: 50%;
  height: 20px;
  left: 50%;
  margin-left: -80px;
  margin-top: -20px;
  opacity: 0.35;
  position: absolute;
  top: 100%;
  width: 160px;
}

/***** ANIMATE *****/
@-webkit-keyframes borderSpin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes borderSpin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes circleRotate1 {
  0% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  100% {
    -webkit-transform: rotate(-325deg);
            transform: rotate(-325deg);
  }
}
@keyframes circleRotate1 {
  0% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  100% {
    -webkit-transform: rotate(-325deg);
            transform: rotate(-325deg);
  }
}
@-webkit-keyframes circleRotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes circleRotate2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spinLoading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spinLoading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes animateRocket {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes animateRocket {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes moveStar {
  100% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
}
@keyframes moveStar {
  100% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
}