jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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. :)
This commit is contained in:
Pierre Ossman 2017-02-07 16:09:10 +01:00
parent ec7ba3eeae
commit 3f48c7017d
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/styles/base.css
View File

@ -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; }
}
/* ----------------------------------------