Migrating a css file into gwt uibinder

I have a Display panel that contains an image that displays a gif spinner, however the spinner just doen't look great.

So want to replace the gif spinner with something else, well I found a css file that looks a lot more like what we expect. Question is how do I migrate the css spinner into my panel?

Existing code snippets

Panel.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
                         xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style type='com.domain.Panel.Style'>
    .apwidth {
      width: 100%
    }
    .
    .
    .
  </ui:style>
  <g:HTMLPanel>
    <g:HorizontalPanel addStyleNames='{style.apWidth}'>
      <g:cell>
        <g:Image ui:field='SpinnerUp'></g:Image>
      </g:cell>
      <g:Label ui:field='HardwareStat'>Sys 1</g:Label>
    </g:HorizontalPanel>
  </g:HTMLPanel>
</ui:UiBinder>

Panel.java

class Panel extends Composite
{
    private static final PanelUiBinder uiBinder = GWT.create(PanelUiBinder.class);

    interface PanelUiBinder extends UiBinder<Widget, Panel>
    { }

    interface Style extends CssResource
    {
        String grey();
        String red();
        String yellow();
    }

    @UiField
    Style style;
    @UiField
    Image   SpinnerUp;
    @UiField
    Label   HardwareStat;

    Panel
    {
        initWidget(uiBinder.createAndBindUi(this));

        SpinnerUp.setUrl("images/load16.gif");
        .
        .
        .
    }
    .
    .
    .
}

Want to integrate this:

from https://projects.lukehaas.me/css-loaders/

.loader {

  font-size: 10px;

  margin: 50px auto;

  text-indent: -9999em;

  width: 11em;

  height: 11em;

  border-radius: 50%;

  background: #ffffff;

  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  position: relative;

  -webkit-animation: load3 1.4s infinite linear;

  animation: load3 1.4s infinite linear;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

}

.loader:before {

  width: 50%;

  height: 50%;

  background: #ffffff;

  border-radius: 100% 0 0 0;

  position: absolute;

  top: 0;

  left: 0;

  content: '';

}

.loader:after {

  background: #0dc5c1;

  width: 75%;

  height: 75%;

  border-radius: 50%;

  content: '';

  margin: auto;

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

}

@-webkit-keyframes load3 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes load3 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

I understand how to integrate up until the @-webkit

Any help is appreciated

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.