Brion VIBBER has submitted this change and it was merged.
Change subject: Add loading animation to bottom of page when fetching sections
......................................................................
Add loading animation to bottom of page when fetching sections
Change-Id: Ic98d51dc06b04aa87c04b492e1e59633a1150359
---
M wikipedia/assets/index.html
M wikipedia/assets/main.js
M wikipedia/assets/ui.css
3 files changed, 25 insertions(+), 0 deletions(-)
Approvals:
Brion VIBBER: Verified; Looks good to me, approved
diff --git a/wikipedia/assets/index.html b/wikipedia/assets/index.html
index 4a7f4f3..c7c40a9 100644
--- a/wikipedia/assets/index.html
+++ b/wikipedia/assets/index.html
@@ -13,6 +13,7 @@
<body>
<h1 id="title"></h1>
<div id="content"></div>
+<div id="loading_sections"></div>
<div id="attribution">
<a id="lastupdated"></a>
<br />
diff --git a/wikipedia/assets/main.js b/wikipedia/assets/main.js
index 421caef..f2fa1f4 100644
--- a/wikipedia/assets/main.js
+++ b/wikipedia/assets/main.js
@@ -18,6 +18,8 @@
content.id = "#content_block_0";
content = transforms.transform( "lead", content );
document.getElementById( "content" ).appendChild( content );
+
+ document.getElementById( "loading_sections").className = "loading";
});
function elementsForSection( section ) {
@@ -56,6 +58,8 @@
});
if ( !payload.isLast ) {
bridge.sendMessage( "requestSection", { index: payload.index + 1 }
);
+ } else {
+ document.getElementById( "loading_sections").className = "";
}
});
diff --git a/wikipedia/assets/ui.css b/wikipedia/assets/ui.css
index 53fe023..5f156d2 100644
--- a/wikipedia/assets/ui.css
+++ b/wikipedia/assets/ui.css
@@ -6,3 +6,23 @@
float: right;
display: inline-float;
}
+
+/* Loading animation in pure CSS
+ Thanks to http://dabblet.com/gist/7708654 */
+.loading {
+ border: 4px solid rgba(0, 0, 0, .1);
+ border-top: 4px solid rgba(0, 0, 0, .4);
+ border-radius: 100%;
+ animation: rot .6s infinite linear;
+}
+
+@keyframes rot {
+ from {transform: rotate(0deg);}
+ to {transform: rotate(359deg);}
+}
+
+#loading_sections {
+ margin: 8px auto;
+ height: 24px;
+ width: 24px;
+}
--
To view, visit https://gerrit.wikimedia.org/r/107344
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic98d51dc06b04aa87c04b492e1e59633a1150359
Gerrit-PatchSet: 3
Gerrit-Project: apps/android/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Yuvipanda <yuvipa...@gmail.com>
Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
