Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/rightscale-design/designkit-spinners

Sass module for css only spinners
https://github.com/rightscale-design/designkit-spinners
Last synced: 10 days ago
JSON representation
Sass module for css only spinners
Host: GitHub
URL: https://github.com/rightscale-design/designkit-spinners
Owner: rightscale-design
License: mit
Created: 2015-11-11T20:45:18.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2018-04-20T17:50:18.000Z (over 6 years ago)
Last Synced: 2024-10-28T22:06:45.310Z (23 days ago)
Language: CSS
Homepage: http://rightscale-design.github.io/designkit-spinners/
Size: 63.5 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project

README

        # designkit-spinners

1.0.2

A Sass module for spinners used in RightScale apps.

## Install

```

npm i --save designkit-spinners

```

## CSS

```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