diff --git a/guacamole/src/main/webapp/app/index/styles/loading.css b/guacamole/src/main/webapp/app/index/styles/loading.css new file mode 100644 index 000000000..159cace25 --- /dev/null +++ b/guacamole/src/main/webapp/app/index/styles/loading.css @@ -0,0 +1,71 @@ +/* + * Copyright (C) 2013 Glyptodon LLC + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +.loading { + position: relative; + min-height: 200px; +} + +.loading * { + visibility: hidden; +} + +.loading::before { + + display: block; + position: absolute; + content: ''; + + /* Dictated by size of image */ + width: 96px; + height: 96px; + margin-left: -48px; + margin-top: -48px; + + top: 50%; + left: 50%; + + background-image: url('images/cog.png'); + background-size: 96px 96px; + background-position: center center; + background-repeat: no-repeat; + + animation: spinning-cog 4s linear infinite; + -moz-animation: spinning-cog 4s linear infinite; + -webkit-animation: spinning-cog 4s linear infinite; + +} + +@keyframes spinning-cog { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@-moz-keyframes spinning-cog { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@-webkit-keyframes spinning-cog { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/guacamole/src/main/webapp/app/index/styles/ui.css b/guacamole/src/main/webapp/app/index/styles/ui.css index 3b2513a20..211a46bfa 100644 --- a/guacamole/src/main/webapp/app/index/styles/ui.css +++ b/guacamole/src/main/webapp/app/index/styles/ui.css @@ -423,14 +423,3 @@ div.logout-panel { .button.back { background-image: url('images/action-icons/guac-back.png'); } - -.loading { - background-image: url(images/spinner.gif); - background-position: center; - background-repeat: no-repeat; - min-height: 200px; -} - -.loading * { - visibility: hidden; -} \ No newline at end of file diff --git a/guacamole/src/main/webapp/images/cog.png b/guacamole/src/main/webapp/images/cog.png new file mode 100644 index 000000000..f5eb681a0 Binary files /dev/null and b/guacamole/src/main/webapp/images/cog.png differ diff --git a/guacamole/src/main/webapp/images/spinner.gif b/guacamole/src/main/webapp/images/spinner.gif deleted file mode 100644 index 48f9928b5..000000000 Binary files a/guacamole/src/main/webapp/images/spinner.gif and /dev/null differ