com.googlecode.mgwt.ui.client.widget.progress.progressindicator.css Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of mgwt Show documentation

using gwt to write mobile (native) apps

The newest version!

@if mgwt.css pretty {
  @external mgwt-ProgressIndicator;
}

.mgwt-ProgressIndicator {
  width: 88px;
}

.mgwt-ProgressIndicator > span {
  background-color: #454545;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid white;
}

@if user.agent safari {
  .mgwt-ProgressIndicator > span {
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-name: progressIndicatorAnimation;
  }

  .mgwt-ProgressIndicator > span:nth-child\(2\) {
    -webkit-animation-delay: 0.33s;
  }
  .mgwt-ProgressIndicator > span:nth-child\(3\) {
    -webkit-animation-delay: 0.66s;
  }

  @-webkit-keyframes progressIndicatorAnimation {
    0% {
      -webkit-transform: scale(0.25);
      background-color: #1e7dc8;
    }
    16% {
      -webkit-transform: scale(1.0);
      background-color: #1e7dc8;
    }
    33% {
      -webkit-transform: scale(0.25);
    }
    100% {
      -webkit-transform: scale(0.25);
    }
  }
}

@if user.agent gecko1_8 {
  .mgwt-ProgressIndicator > span {
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-moz-animation-name: progressIndicatorAnimation;
  }

  .mgwt-ProgressIndicator > span:nth-child\(2\) {
    -moz-animation-delay: 0.33s;
  }
  .mgwt-ProgressIndicator > span:nth-child\(3\) {
    -moz-animation-delay: 0.66s;
  }

  @-moz-keyframes progressIndicatorAnimation {
    0% {
	  -moz-transform: scale(0.25);
      background-color: #1e7dc8;
    }
    16% {
      -moz-transform: scale(1.0);
      background-color: #1e7dc8;
    }
    33% {
      -moz-transform: scale(0.25);
    }
    100% {
      -moz-transform: scale(0.25);
    }
  }
}