Skip to content
Snippets Groups Projects
Commit 3f48c701 authored by Pierre Ossman's avatar Pierre Ossman
Browse files

Tweak spinner appearence

Change the look of the "busy" spinner a bit. It's mostly used for
connection stuff, so give it a more data flow feel. Also bling it
up a bit with some fading. Perty sells. :)
parent ec7ba3ee
Branches
No related tags found
No related merge requests found
......@@ -52,24 +52,27 @@ html {
.noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
width: 10px;
height: 10px;
border-radius: 50%;
animation: noVNC_spinner 1.0s ease-in-out alternate infinite;
border-radius: 2px;
animation: noVNC_spinner 1.0s linear infinite;
}
.noVNC_spinner::before {
content: "";
position: absolute;
left: -20px;
animation-delay: -0.2s;
left: 0px;
top: 0px;
animation-delay: -0.1s;
}
.noVNC_spinner::after {
content: "";
position: absolute;
left: 20px;
animation-delay: 0.2s;
top: 0px;
left: 0px;
animation-delay: 0.1s;
}
@keyframes noVNC_spinner {
0% { box-shadow: 0 10px 0 white; }
100% { box-shadow: 0 30px 0 white; }
0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; }
25% { box-shadow: 20px 10px 0 rgba(255, 255, 255, 1); width: 10px; }
50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; }
}
/* ----------------------------------------
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment