designkit-spinners

1.0.2

A Sass module for spinners used in RightScale apps.

Install

npm i --save designkit-spinners

CSS

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

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

@-webkit-keyframes spinner-dots-fade {
  0%,
  80%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: .2;
  }
}

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

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes reverse-rotate {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes reverse-rotate {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.spinner-disc {
  display: block;
  width: 10px;
  height: 10px;
}

.spinner-disc:after {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  content: '';
  border-style: solid;
  border-width: 1px;
  border-top-color: #000;
  border-right-color: #ddd;
  border-bottom-color: #ddd;
  border-left-color: #000;
  border-radius: 100%;
  opacity: .5;
  -webkit-animation: spinner-disc-rotate .6s linear infinite;
          animation: spinner-disc-rotate .6s linear infinite;
}

.spinner-disc.spinner-disc-sm:after {
  width: 10px;
  height: 10px;
}

.spinner-disc.spinner-disc-md:after {
  width: 16px;
  height: 16px;
}

.spinner-disc.spinner-disc-thick:after {
  border-width: 2px;
}

.spinner-disc.spinner-disc-thicker:after {
  border-width: 3px;
}

.spinner-disc {
  position: absolute;
  top: calc(50% - 11px);
  left: calc(50% - 11px);
}

.spinner-dots,
.spinner-dots:before,
.spinner-dots:after {
  width: 16px;
  height: 16px;
  background-color: #000;
  border-radius: 50%;
  -webkit-animation: spinner-dots-fade 1s infinite ease-in-out;
          animation: spinner-dots-fade 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.spinner-dots {
  -webkit-animation-delay: -.16s;
          animation-delay: -.16s;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

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

.spinner-dots:before {
  left: -24px;
  -webkit-animation-delay: -.32s;
          animation-delay: -.32s;
}

.spinner-dots:after {
  left: 24px;
}

.spinner-dots {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
}

.loading-pane {
  height: 100%;
}

.loading-message {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 13px;
  line-height: 1.615;
  color: #76899a;
}

.loading-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cloud-spinner {
  position: relative;
  display: block;
  width: 60px;
  height: 40px;
  overflow: hidden;
}

.cloud-spinner .cloud-spinner-mask {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 60px;
  height: 60px;
  margin-left: -2px;
  border: 1px solid transparent;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20350%22%20enable-background%3D%22new%200%200%20350%20350%22%3E%3Cfilter%20id%3D%22a%22%20filterUnits%3D%22objectBoundingBox%22%3E%3CfeGaussianBlur%20in%3D%22SourceAlpha%22%20stdDeviation%3D%2214%22%20result%3D%22blur%22%2F%3E%3CfeOffset%20in%3D%22blur%22%20dx%3D%2210%22%20dy%3D%2210%22%20result%3D%22offsetBlurredAlpha%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22offsetBlurredAlpha%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3CfeColorMatrix%20in%3D%22blur%22%20result%3D%22color-out%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.3%200%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22color-out%22%2F%3E%3C%2Ffilter%3E%3Cpath%20d%3D%22M0%200v350h350V0H0zm278.3%20263.9H73.7c-30.6%200-55.3-22.8-55.3-53.2%200-25.8%2017.9-47.4%2042.1-53.4-.1-.7-.2-1.4-.2-2.1%200-20.2%2016.4-36.5%2036.7-36.5%2011.1%200%2020.8%205%2027.6%2012.6%2010.2-31.4%2039.7-54.2%2074.7-54.2%2043.4%200%2078.6%2035%2078.6%2078.1%200%203.3-.3%206.6-.7%209.8.4%200%20.8-.1%201.1-.1%2028%200%2050.7%2022.6%2050.7%2050.4%200%2027.9-22.7%2048.6-50.7%2048.6z%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23a%29%22%2F%3E%3C%2Fsvg%3E") top -10px left 0px no-repeat;
  background-size: 60px;
}

.cloud-spinner .cloud-spinner-mask.mask-body {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20350%22%20enable-background%3D%22new%200%200%20350%20350%22%3E%3Cfilter%20id%3D%22a%22%20filterUnits%3D%22objectBoundingBox%22%3E%3CfeGaussianBlur%20in%3D%22SourceAlpha%22%20stdDeviation%3D%2214%22%20result%3D%22blur%22%2F%3E%3CfeOffset%20in%3D%22blur%22%20dx%3D%2210%22%20dy%3D%2210%22%20result%3D%22offsetBlurredAlpha%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22offsetBlurredAlpha%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3CfeColorMatrix%20in%3D%22blur%22%20result%3D%22color-out%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.3%200%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22color-out%22%2F%3E%3C%2Ffilter%3E%3Cpath%20d%3D%22M0%200v350h350V0H0zm278.3%20263.9H73.7c-30.6%200-55.3-22.8-55.3-53.2%200-25.8%2017.9-47.4%2042.1-53.4-.1-.7-.2-1.4-.2-2.1%200-20.2%2016.4-36.5%2036.7-36.5%2011.1%200%2020.8%205%2027.6%2012.6%2010.2-31.4%2039.7-54.2%2074.7-54.2%2043.4%200%2078.6%2035%2078.6%2078.1%200%203.3-.3%206.6-.7%209.8.4%200%20.8-.1%201.1-.1%2028%200%2050.7%2022.6%2050.7%2050.4%200%2027.9-22.7%2048.6-50.7%2048.6z%22%20fill%3D%22%23f4f5f7%22%20filter%3D%22url%28%23a%29%22%2F%3E%3C%2Fsvg%3E") top -10px left 0px no-repeat;
}

.cloud-spinner .cloud-spinner-cogs {
  position: absolute;
  z-index: 1;
  height: 6rem;
  margin-top: -7px;
  margin-left: -5px;
}

.cloud-spinner .cloud-spinner-cog {
  position: absolute;
  z-index: -1;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2236.4%20903.2%2071.9%2071.8%22%3E%3Cpath%20fill%3D%22%23c4c4c4%22%20d%3D%22M42.8%20959.4c.3-.6.5-1.1.8-1.5%201.4-1.9%202.8-3.7%204.3-5.6.3-.4.3-.7.1-1.1-.5-1.1-1-2.3-1.4-3.5-.2-.5-.4-.6-.9-.7-2.6-.4-5.1-.7-7.7-1.1-1-.2-1.5-.7-1.6-1.8v-10.2c0-1.1.5-1.7%201.6-1.8%202.5-.4%205-.8%207.4-1.1.7-.1%201-.3%201.2-1%20.3-.9.7-1.8%201.2-2.7.3-.6.3-1-.1-1.5-1.4-1.8-2.9-3.7-4.3-5.5-.9-1.1-1-1.7%200-2.7%202.3-2.4%204.6-4.9%207.1-7.1%201.4-1.3%202-1.2%203.6%200%201.8%201.4%203.5%202.7%205.3%204.1.4.3.7.4%201.1.1%201-.5%202-.9%203.1-1.3.4-.2.6-.3.6-.8l1.2-7.8c.2-1.2.7-1.6%202-1.6h9.9c1.2%200%201.8.5%201.9%201.6l1.2%207.8c.1.5.3.7.7.8l3%201.2c.4.2.7.2%201.1-.1l6-4.5c.9-.7%201.7-.7%202.5%200%202.4%202.4%204.8%204.7%207.1%207.1%201.2%201.3%201.2%201.9.1%203.4-1.4%201.8-2.7%203.6-4.1%205.3-.3.4-.3.7-.1%201.2.5%201.1%201%202.2%201.4%203.3.2.5.5.7%201%20.8%202.5.4%205%20.8%207.5%201.1%201.1.2%201.7.7%201.7%201.8v10.1c0%201.2-.5%201.7-1.7%201.9-2.4.4-4.8.7-7.3%201.1-.7.1-1.1.3-1.3%201-.3.9-.7%201.8-1.1%202.6-.3.6-.3.9.1%201.5l4.2%205.4c1%201.3%201.1%201.8%200%203-2.3%202.4-4.6%204.8-7%207.1-1.4%201.3-2%201.2-3.5%200-1.8-1.4-3.6-2.8-5.3-4.2-.4-.3-.6-.3-1.1-.1-1%20.5-2%20.9-3.1%201.3-.4.2-.6.4-.7.9-.3%202.5-.7%205-1.1%207.5-.3%201.5-.7%201.9-2.3%201.9h-9.5c-1.5%200-1.9-.4-2.2-1.8-.4-2.5-.8-5-1.1-7.4-.1-.5-.3-.8-.8-1-1-.4-2-.8-2.9-1.2-.5-.2-.8-.2-1.2.1-1.9%201.5-3.9%203-5.9%204.5-1%20.8-1.8.8-2.7-.1-2.3-2.3-4.7-4.6-7-7-.4-.5-.7-1.1-1-1.7zm29.5-32.2c-6.6%200-11.9%205.3-12%2011.9%200%206.7%205.3%2012%2012%2012%206.6%200%2012-5.4%2011.9-12%200-6.6-5.3-11.9-11.9-11.9z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M72.3%20927.2c6.7%200%2011.9%205.2%2012%2011.9%200%206.7-5.3%2012-11.9%2012-6.7%200-12-5.3-12-12-.1-6.6%205.2-11.9%2011.9-11.9z%22/%3E%3C/svg%3E") center center no-repeat;
  background-size: 30px;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.cloud-spinner .cloud-spinner-cog:first-child {
  top: 17px;
  left: 4px;
  opacity: .8;
  -webkit-animation-name: rotate;
          animation-name: rotate;
}

.cloud-spinner .cloud-spinner-cog:nth-child(2) {
  -webkit-animation-name: reverse-rotate;
          animation-name: reverse-rotate;
  top: 23px;
  left: 32px;
  opacity: .5;
}

.cloud-spinner .cloud-spinner-cog:nth-child(3) {
  top: -5px;
  left: 26px;
  opacity: .3;
  -webkit-animation-name: rotate;
          animation-name: rotate;
}

Author

Jason Melgoza

License

MIT