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

All new loader hotness

Browse source 
Created a new loader that has a circle baked into the animated gif so
there's less of a chance of artifacts in bad browsers. The edge is
chunky because it's a gif but then added 1px of padding to the loader
parent and that the border-radius can smooth this out in iOS. Actually
looks sharp in Android too because of interaction effects between these
rounded corners. Loader spin is faster and more compressed (16 colors).
Removed the body-a class on the spinner since we're just setting this to
flat black = one less gradient to render.
This commit is contained in:
Todd Parker 2011-12-29 17:28:12 -05:00 committed by scottjehl
parent ab32d0850b
commit ad2f977ca8
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

@ -52,9 +52,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
/* loading screen */
.ui-loading .ui-loader { display: block; }
.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 { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; 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: 32px; height: 32px; background-color: #000; }
.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 7.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: 32px 32px;
background-size: 46px 46px;
}

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'></span><h1></h1></div>" );
var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
$.extend($.mobile, {
// turn on/off page loading message.