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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
