ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved the loading animation

This commit is contained in:
Kevin Crider 2013-09-29 12:51:59 -04:00
parent 33c0dff8a4
commit f8ea2a777c
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/View/Layouts/default.ctp
View File

@ -50,12 +50,12 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
?> ?>
</head> </head>
<body> <body>
<div id="loadingDiv"><div></div></div>
<div id="header" class="navbar navbar-default" role="navigation"> <div id="header" class="navbar navbar-default" role="navigation">
<p class="navbar-text navbar-right"><?php echo $daemonStatusHtml; ?></p> <p class="navbar-text navbar-right"><?php echo $daemonStatusHtml; ?></p>
<p class="navbar-text navbar-right">Used Event Storage: <?php echo $diskSpace; ?>%</p> <p class="navbar-text navbar-right">Used Event Storage: <?php echo $diskSpace; ?>%</p>
<p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p> <p class="navbar-text navbar-right">CPU Load: <?php echo $systemLoad; ?></p>
<div class="container"> <div class="container">
<div id="loadingDiv"><img src="/img/loading.gif" alt="Loading..." /></div>
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#">ZoneMinder</a> <a class="navbar-brand" href="#">ZoneMinder</a>
</div> </div>

30
web/app/webroot/css/main.css
View File

@ -14,6 +14,36 @@
} }
/* End Bootstrap fixes */ /* End Bootstrap fixes */
/* Loading Spinner */
#loadingDiv {width:100%;height:100%;position:fixed;z-index:1000000;background:rgba(0,0,0,.7);}
#loadingDiv > div {
width:400px;height:40px;background-color:#ccc;top:50%;left:50%;margin:-40px -200px;position:absolute;border:3px solid #fff;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
-webkit-box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);
}
#loadingDiv > div:after {
content:'';position:absolute;background-color:#fff;left:2px;top:2px;bottom:2px;right:360px;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
-webkit-animation:loader 2s linear infinite;-moz-animation:loader 2s linear infinite;animation:loader 2s linear infinite;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
@keyframes loader {
0% {right:360px;left:2px;}
5% {left:2px;}
50% {right:2px;left:360px}
55% {right:2px;}
100% {right:360px;left:2px;}
}
@-webkit-keyframes loader {
0% {right:360px;left:2px;}
5% {left:2px;}
50% {right:2px;left:360px}
55% {right:2px;}
100% {right:360px;left:2px;}
}
/* Loading Spinner */
.monitor{ .monitor{
margin: 5px; margin: 5px;
} }