Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-21 14:44:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Loader design tweaks

Browse source 
Removed the spin class from the loader container, tweaked opacity and
added slight glow to bottom of loader, increased padding. Downloaded a
fresh loader image.
This commit is contained in:
Todd Parker 2011-12-28 23:44:29 -05:00 committed by scottjehl
parent c1cdb0a1a8
commit dac79b5cfa
4 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/structure/jquery.mobile.core.css
View file

@ -64,9 +64,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { background: #000; opacity: .2; display: none; z-index: 9999999; position: fixed; width: 36px; height: 36px; top: 50%; margin-left: -18px;margin-top: -18px; left: 50%; padding: 3px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader { background: #000; opacity: .16; display: none; z-index: 9999999; position: fixed; width: 32px; height: 32px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 7px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; }
.ui-loader .ui-icon { display: block; margin: 0; width: 36px; height: 36px; background-color: transparent; }
.ui-loader .ui-icon { display: block; margin: 0; width: 32px; height: 32px; background-color: transparent; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

BIN
css/themes/default/images/ajax-loader-old.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

2
css/themes/default/jquery.mobile.theme.css
View file

@ -992,7 +992,7 @@ a.ui-link-inherit {
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 36px 36px;
background-size: 32px 32px;
}

2
js/jquery.mobile.init.js
View file

@ -30,7 +30,7 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );
var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
$.extend($.mobile, {
// turn on/off page loading message.