@fishtank/fishtank-vue/dist/styles/spinner.css

Fish Tank VueJS Component Module

.ft-spinner circle.ft-spinner-base {
  fill: none;
  stroke: transparent; }

.ft-spinner circle.ft-spinner-gradient {
  fill: none;
  stroke-linecap: round;
  transform: rotate(0deg);
  transform-origin: center center;
  animation: loading .75s linear infinite; }

.ft-spinner.ft-spinner--small circle.ft-spinner-base, .ft-spinner.ft-spinner--small circle.ft-spinner-gradient {
  r: 8px;
  stroke-width: 4; }

.ft-spinner.ft-spinner--small circle.ft-spinner-gradient {
  stroke-dasharray: 26; }

.ft-spinner.ft-spinner--medium circle.ft-spinner-base, .ft-spinner.ft-spinner--medium circle.ft-spinner-gradient {
  r: 15px;
  stroke-width: 6; }

.ft-spinner.ft-spinner--medium circle.ft-spinner-gradient {
  stroke-dasharray: 50; }

.ft-spinner.ft-spinner--large circle.ft-spinner-base, .ft-spinner.ft-spinner--large circle.ft-spinner-gradient {
  r: 30px;
  stroke-width: 12; }

.ft-spinner.ft-spinner--large circle.ft-spinner-gradient {
  stroke-dasharray: 100; }

.ft-spinner.ft-spinner--bgov-gradient circle.ft-spinner-gradient {
  stroke: url(#ft-spinner--bgov-gradient); }

.ft-spinner.ft-spinner--bgov-gradient linearGradient stop.stop-class-1 {
  stop-color: #0018AB; }

.ft-spinner.ft-spinner--bgov-gradient linearGradient stop.stop-class-2 {
  stop-color: #9933CC; }

.ft-spinner.ft-spinner--blaw-gradient circle.ft-spinner-gradient {
  stroke: url(#ft-spinner--blaw-gradient); }

.ft-spinner.ft-spinner--blaw-gradient linearGradient stop.stop-class-1 {
  stop-color: #0D9DDB; }

.ft-spinner.ft-spinner--blaw-gradient linearGradient stop.stop-class-2 {
  stop-color: #0D9DDB; }

.ft-spinner.ft-spinner--notification-1-gradient circle.ft-spinner-gradient {
  stroke: url(#ft-spinner--notification-1-gradient); }

.ft-spinner.ft-spinner--notification-1-gradient linearGradient stop.stop-class-1 {
  stop-color: #EA60A7; }

.ft-spinner.ft-spinner--notification-1-gradient linearGradient stop.stop-class-2 {
  stop-color: #EA60A7; }

.ft-spinner.ft-spinner--notification-2-gradient circle.ft-spinner-gradient {
  stroke: url(#ft-spinner--notification-2-gradient); }

.ft-spinner.ft-spinner--notification-2-gradient linearGradient stop.stop-class-1 {
  stop-color: #FFB511; }

.ft-spinner.ft-spinner--notification-2-gradient linearGradient stop.stop-class-2 {
  stop-color: #FFB511; }

.ft-spinner.ft-spinner--notification-3-gradient circle.ft-spinner-gradient {
  stroke: url(#ft-spinner--notification-3-gradient); }

.ft-spinner.ft-spinner--notification-3-gradient linearGradient stop.stop-class-1 {
  stop-color: #0D9DDB; }

.ft-spinner.ft-spinner--notification-3-gradient linearGradient stop.stop-class-2 {
  stop-color: #0D9DDB; }

.ft-spinner.ft-spinner--align-center {
  text-align: center; }

.ft-spinner.ft-spinner--align-left {
  text-align: left; }

.ft-spinner.ft-spinner--align-right {
  text-align: right; }

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