webgme/src/client/js/Loader/styles/LoaderProgressBar.css

Web-based Generic Modeling Environment

div.loader-progressbar {
  zoom: 1;
  /* Increase this for a bigger symbol*/
  width: 16px;
  height: 16px;
  background: -webkit-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -webkit-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -webkit-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -webkit-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -webkit-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -webkit-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -webkit-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -webkit-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -webkit-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -webkit-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -webkit-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -webkit-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background-repeat: no-repeat;
  background-size: 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 11px, 4px 11px, 4px 16px, 4px 16px, 4px 16px, 4px 16px;
  background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0px, -4px 0px, -4px 0px, -4px 0px;
  -webkit-animation: wait 0.8s steps(1, start) infinite;
  animation: wait 0.8s steps(1, start) infinite; }
  div.loader-progressbar.stop {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; }

@keyframes wait {
  12% {
    background-position: -4px 3px,-4px 3px,   -4px 3px, -4px 3px,  -4px 3px,-4px 3px,  -4px 2px,-4px 2px,  -4px 0px, -4px 0px,  0px 0px, 0px 0px; }

  25% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 3px,-4px 3px,  -4px 2px, -4px 2px,   0px 0px,    0px 0px,     6px 0px, 6px 0px; }

  37% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  0px 2px,    0px 2px,     6px 0px,  6px 0px,  12px 0px, 12px 0px; }

  50% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,   0px 3px,    0px 3px,  6px 2px,  6px 2px,  12px 0px, 12px 0px,  -4px 0px, -4px 0px; }

  62% {
    background-position: -4px 3px, -4px 3px,   0px 3px,    0px 3px,     6px 3px,  6px 3px,  12px 2px, 12px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  75% {
    background-position: 0px 3px,    0px 3px,     6px 3px,  6px 3px,  12px 3px, 12px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  87% {
    background-position: 6px 3px,  6px 3px,  12px 3px, 12px 3px,  -4px 3px, -4px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  100% {
    background-position: 12px 3px, 12px 3px,  -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; } }

@-webkit-keyframes wait {
  12% {
    background-position: -4px 3px,-4px 3px,   -4px 3px, -4px 3px,  -4px 3px,-4px 3px,  -4px 2px,-4px 2px,  -4px 0px, -4px 0px,  0px 0px, 0px 0px; }

  25% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 3px,-4px 3px,  -4px 2px, -4px 2px,   0px 0px,    0px 0px,     6px 0px, 6px 0px; }

  37% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  0px 2px,    0px 2px,     6px 0px,  6px 0px,  12px 0px, 12px 0px; }

  50% {
    background-position: -4px 3px, -4px 3px,  -4px 3px, -4px 3px,   0px 3px,    0px 3px,  6px 2px,  6px 2px,  12px 0px, 12px 0px,  -4px 0px, -4px 0px; }

  62% {
    background-position: -4px 3px, -4px 3px,   0px 3px,    0px 3px,     6px 3px,  6px 3px,  12px 2px, 12px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  75% {
    background-position: 0px 3px,    0px 3px,     6px 3px,  6px 3px,  12px 3px, 12px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  87% {
    background-position: 6px 3px,  6px 3px,  12px 3px, 12px 3px,  -4px 3px, -4px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; }

  100% {
    background-position: 12px 3px, 12px 3px,  -4px 3px, -4px 3px,  -4px 3px, -4px 3px,  -4px 2px, -4px 2px,  -4px 0px, -4px 0px,  -4px 0px, -4px 0px; } }