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 { .noVNC_spinner, .noVNC_spinner::before, .noVNC_spinner::after {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 2px;
animation: noVNC_spinner 1.0s ease-in-out alternate infinite; animation: noVNC_spinner 1.0s linear infinite;
} }
.noVNC_spinner::before { .noVNC_spinner::before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: 0px;
animation-delay: -0.2s; top: 0px;
animation-delay: -0.1s;
} }
.noVNC_spinner::after { .noVNC_spinner::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 20px; top: 0px;
animation-delay: 0.2s; left: 0px;
animation-delay: 0.1s;
} }
@keyframes noVNC_spinner { @keyframes noVNC_spinner {
0% { box-shadow: 0 10px 0 white; } 0% { box-shadow: -60px 10px 0 rgba(255, 255, 255, 0); width: 20px; }
100% { box-shadow: 0 30px 0 white; } 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; }
} }
/* ---------------------------------------- /* ----------------------------------------