Move update icon and update icon blinking to css

Use CSS3 Animation for the "loading icon" blinking and move the definition of
the loading icon to CSS as well.

CSS3 Animations are supported by IE10, Firefox and using the -webkit prefix by
Chrome and Safari.

I've dropped the usage of element.classList in favour of supporting refreshing/
article downloading in IE9 (again). The classList stuff isn't necessarily
needed, as the elements in question only get one or no class assigned.

I've dropped no longer supported css options like:

the appearance option isn't supported by any browser, the -webkit-appearance
doesn't change anything visible.

-webkit-font-smoothing support was dropped in chrome 22 and font-smoothing
isn't specified anywhere.

assets/css/app.css

@@ -22,8 +22,6 @@ body {
     max-width: 780px;
     color: #333;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
 
@@ -173,8 +171,6 @@ input[type="text"] {
     font-size: 99%;
     margin-bottom: 10px;
     margin-top: 5px;
-    -webkit-appearance: none;
-    appearance: none;
 }
 
 input[type="email"]:focus,
@@ -281,8 +277,6 @@ textarea.form-error {
 
 /* buttons */
 .btn {
-    -webkit-appearance: none;
-    appearance: none;
     display: inline-block;
     color: #333;
     border: 1px solid #ccc;
@@ -301,7 +295,7 @@ a.btn {
 }
 
 .btn-red {
-    border-color: #b0281a;;
+    border-color: #b0281a;
     background: #d14836;
     color: #fff;
 }
@@ -352,6 +346,31 @@ span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after, span[id
     content: ")";
 }
 
+@keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+}
+
+/* Chrome, Safari, Opera */
+@-webkit-keyframes blinker {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+}
+
+.loading-icon:before {
+    content: "☀";   
+    animation-name: blinker;
+    -webkit-animation-name: blinker; /* Chrome, Safari, Opera */
+    animation-duration: 500ms;
+    -webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
+    animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
+}
+
 /* header */
 header {
     margin-bottom: 50px;
@@ -629,13 +648,7 @@ ul.item-infos {
     margin-bottom: 20px;
 }
 
-span.downloading img {
+#download-item {
-    display: inline;
-    margin: 0;
-    padding: 0;
-}
-
-.downloading {
     color: #000;
 }
 
@@ -690,16 +703,6 @@ iframe {
     color: #333;
 }
 
-.loading-icon {
-    color: #000;
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.loading-icon-blink {
-    opacity: 0;
-}
-
 #login {
     width: 350px;
     margin: 0 auto;

assets/js/all.min.js

@@ -1,20 +1,19 @@
-var Miniflux={};Miniflux.App=function(){return{BlinkIcon:function(){var e=document.querySelectorAll(".loading-icon");[].forEach.call(e,function(d){d.classList.toggle("loading-icon-blink")})},Run:function(){Miniflux.Event.ListenKeyboardEvents();Miniflux.Event.ListenMouseEvents()}}}();
+var Miniflux={};Miniflux.App=function(){return{Run:function(){Miniflux.Event.ListenKeyboardEvents();Miniflux.Event.ListenMouseEvents()}}}();
-Miniflux.Feed=function(){function e(c){if(c=document.getElementById("loading-feed-"+c))c.appendChild(document.createTextNode("\u2600")),c.classList.add("loading-icon-blink");f||(f=setInterval(Miniflux.App.BlinkIcon,500))}function d(){for(var c=document.getElementsByTagName("a"),h=0,g=c.length;h<g;h++){var a=c[h].getAttribute("data-feed-id");a&&b.push(parseInt(a))}}var b=[],a=[],f;return{Update:function(c,b){e(c);var a=new XMLHttpRequest;a.onload=function(){var a=document.getElementById("loading-feed-"+
+Miniflux.Feed=function(){var e=[],d=[];return{Update:function(a,d){var e=document.getElementById("items-count-"+a);if(e){e.parentNode.className="loading-icon";var c=new XMLHttpRequest;c.onload=function(){e.parentNode.className="";var c=JSON.parse(this.responseText);if(c.result){var f=c.items_count,g=document.getElementById("items-count-"+a);g&&(g.innerHTML=f.items_unread+"/"+f.items_total)}d&&d(c)};c.open("POST","?action=refresh-feed&feed_id="+a,!0);c.send()}},UpdateAll:function(){for(var a=document.getElementsByTagName("a"),
-c);a&&(a.innerHTML="");if(a=document.getElementById("last-checked-feed-"+c))a.innerHTML=a.getAttribute("data-after-update");try{var d=JSON.parse(this.responseText);if(d.result){var g=d.items_count,e=document.getElementById("items-count-"+c);e&&(e.innerHTML=g.items_unread+"/"+g.items_total)}b&&b(d)}catch(f){}};a.open("POST","?action=refresh-feed&feed_id="+c,!0);a.send()},UpdateAll:function(){d();var c=setInterval(function(){for(;0<b.length&&5>a.length;){var h=b.shift();a.push(h);Miniflux.Feed.Update(h,
+b=0,h=a.length;b<h;b++){var c=a[b].getAttribute("data-feed-id");c&&e.push(parseInt(c))}var k=setInterval(function(){for(;0<e.length&&5>d.length;){var c=e.shift();d.push(c);Miniflux.Feed.Update(c,function(c){c=d.indexOf(c.feed_id);0<=c&&d.splice(c,1);0===e.length&&0===d.length&&(clearInterval(k),window.location.href="?action=unread")})}},100)}}}();
-function(h){h=a.indexOf(h.feed_id);0<=h&&a.splice(h,1);0==b.length&&0==a.length&&(clearInterval(c),clearInterval(f),window.location.href="?action=unread")})}},100)}}}();
+Miniflux.Item=function(){function e(c){return item_id=c.getAttribute("data-item-id")}function d(c){if(c&&c.hasAttribute("data-reverse-label")){var a=c.innerHTML;c.innerHTML=c.getAttribute("data-reverse-label");c.setAttribute("data-reverse-label",a)}}function a(c){"mouse"!==Miniflux.Event.lastEventType&&Miniflux.Nav.SelectNextItem();c.parentNode.removeChild(c);var a=document.getElementById("page-counter");if(a){c=c.getAttribute("data-item-page");var d=parseInt(a.textContent,10)-1,b=document.getElementsByTagName("article");
-Miniflux.Item=function(){function e(c){return item_id=c.getAttribute("data-item-id")}function d(c){if(c&&c.hasAttribute("data-reverse-label")){var b=c.innerHTML;c.innerHTML=c.getAttribute("data-reverse-label");c.setAttribute("data-reverse-label",b)}}function b(c){"mouse"!==Miniflux.Event.lastEventType&&Miniflux.Nav.SelectNextItem();c.parentNode.removeChild(c);var b=document.getElementById("page-counter");if(b){c=c.getAttribute("data-item-page");var a=parseInt(b.textContent,10)-1,d=document.getElementsByTagName("article");
+if(0===d||0===b.length)window.location=location.href;a.textContent=d;switch(c){case "unread":document.title="Miniflux ("+d+")";document.getElementById("nav-counter").textContent=d;break;case "feed-items":document.title="("+d+") "+a.parentNode.firstChild.nodeValue;break;default:document.title=a.parentNode.firstChild.nodeValue+" ("+d+")"}}}function b(c){var b=e(c),f=new XMLHttpRequest;f.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))a(c);else{c.setAttribute("data-item-status",
-if(0===a||0===d.length)window.location=location.href;b.textContent=a;switch(c){case "unread":document.title="Miniflux ("+a+")";document.getElementById("nav-counter").textContent=a;break;case "feed-items":document.title="("+a+") "+b.parentNode.firstChild.nodeValue;break;default:document.title=b.parentNode.firstChild.nodeValue+" ("+a+")"}}}function a(c){var a=e(c),g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))b(c);else{c.setAttribute("data-item-status",
+"read");var b=c.querySelector("a.mark");d(b);(b=c.querySelector("a.mark"))&&b.setAttribute("data-action","mark-unread")}};f.open("POST","?action=mark-item-read&id="+b,!0);f.send()}function h(c){var b=e(c),f=new XMLHttpRequest;f.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))a(c);else{c.setAttribute("data-item-status","unread");var b=c.querySelector("a.mark");d(b);(b=c.querySelector("a.mark"))&&b.setAttribute("data-action","mark-read")}};f.open("POST","?action=mark-item-unread&id="+
-"read");var a=c.querySelector("a.mark");d(a);(a=c.querySelector("a.mark"))&&a.setAttribute("data-action","mark-unread")}};g.open("POST","?action=mark-item-read&id="+a,!0);g.send()}function f(c){var a=e(c),g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))b(c);else{c.setAttribute("data-item-status","unread");var a=c.querySelector("a.mark");d(a);(a=c.querySelector("a.mark"))&&a.setAttribute("data-action","mark-read")}};g.open("POST","?action=mark-item-unread&id="+
+b,!0);f.send()}return{MarkAsRead:b,MarkAsUnread:h,MarkAsRemoved:function(c){var b=e(c),d=new XMLHttpRequest;d.onload=function(){Miniflux.Nav.IsListing()&&a(c)};d.open("POST","?action=mark-item-removed&id="+b,!0);d.send()},SwitchBookmark:function(c){var b=e(c),f="1"===c.getAttribute("data-item-bookmark")?"0":"1",g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing()&&"bookmarks"===c.getAttribute("data-item-page"))a(c);else if(c.setAttribute("data-item-bookmark",f),Miniflux.Nav.IsListing()){var b=
-a,!0);g.send()}return{MarkAsRead:a,MarkAsUnread:f,MarkAsRemoved:function(c){var a=e(c),d=new XMLHttpRequest;d.onload=function(){Miniflux.Nav.IsListing()&&b(c)};d.open("POST","?action=mark-item-removed&id="+a,!0);d.send()},SwitchBookmark:function(c){var a=e(c),g="1"===c.getAttribute("data-item-bookmark")?"0":"1",k=new XMLHttpRequest;k.onload=function(){if(Miniflux.Nav.IsListing()&&"bookmarks"===c.getAttribute("data-item-page"))b(c);else if(c.setAttribute("data-item-bookmark",g),Miniflux.Nav.IsListing()){var a=
+c.querySelector("a.bookmark");d(b)}else if((b=c.querySelector("a.bookmark-icon"))&&b.hasAttribute("data-reverse-title")){var e=b.getAttribute("title");b.setAttribute("title",b.getAttribute("data-reverse-title"));b.setAttribute("data-reverse-title",e)}};g.open("POST","?action=bookmark&id="+b+"&value="+f,!0);g.send()},SwitchStatus:function(c){var a=c.getAttribute("data-item-status");"read"===a?h(c):"unread"===a&&b(c)},Show:function(c){(c=c.querySelector("a.show"))&&c.click()},OpenOriginal:function(c){var a=
-c.querySelector("a.bookmark");d(a)}else if((a=c.querySelector("a.bookmark-icon"))&&a.hasAttribute("data-reverse-title")){var h=a.getAttribute("title");a.setAttribute("title",a.getAttribute("data-reverse-title"));a.setAttribute("data-reverse-title",h)}};k.open("POST","?action=bookmark&id="+a+"&value="+g,!0);k.send()},SwitchStatus:function(c){var b=c.getAttribute("data-item-status");"read"===b?f(c):"unread"===b&&a(c)},Show:function(a){(a=a.querySelector("a.show"))&&a.click()},OpenOriginal:function(b){var d=
+c.querySelector("a.original");a&&("unread"===c.getAttribute("data-item-status")&&b(c),a.removeAttribute("data-action"),a.click())},DownloadContent:function(c){var a=document.getElementById("download-item");if(a){a.innerHTML=" "+a.getAttribute("data-before-message");a.className="loading-icon";var b=new XMLHttpRequest;b.onload=function(){var c=JSON.parse(b.responseText);a.className="";if(c.result){var d=document.getElementById("item-content");d&&(d.innerHTML=c.content);a.innerHTML=a.getAttribute("data-after-message")}else a.innerHTML=
-b.querySelector("a.original");d&&("unread"===b.getAttribute("data-item-status")&&a(b),d.removeAttribute("data-action"),d.click())},DownloadContent:function(a){var b=document.getElementById("download-item");if(b){a=e(a);var d=b.getAttribute("data-before-message"),k=document.createElement("span");k.appendChild(document.createTextNode("\u2600"));k.className="loading-icon";b.innerHTML="";b.className="downloading";b.appendChild(k);b.appendChild(document.createTextNode(" "+d));var f=setInterval(Miniflux.App.BlinkIcon,
+a.getAttribute("data-failure-message")};c=e(c);b.open("POST","?action=download-item&id="+c,!0);b.send()}},MarkListingAsRead:function(a){for(var b=document.getElementsByTagName("article"),d=[],g=0,h=b.length;g<h;g++)d.push(e(b[g]));b=new XMLHttpRequest;b.onload=function(){window.location.href=a};b.open("POST","?action=mark-items-as-read",!0);b.send(JSON.stringify(d))},ToggleRTLMode:function(){for(var a=["#current-item h1","#item-content","#current-item h2","#current-item .preview"],b=0;b<a.length;b++){var d=
-250),l=new XMLHttpRequest;l.onload=function(){var a=JSON.parse(l.responseText);clearInterval(f);if(a.result){var c=document.getElementById("item-content");c&&(c.innerHTML=a.content);b&&(a=b.getAttribute("data-after-message"),b.innerHTML="",b.appendChild(document.createTextNode(" "+a)))}else b&&(a=b.getAttribute("data-failure-message"),b.innerHTML="",b.appendChild(document.createTextNode(" "+a)))};l.open("POST","?action=download-item&id="+a,!0);l.send()}},MarkListingAsRead:function(a){for(var b=document.getElementsByTagName("article"),
+document.querySelector(a[b]);d&&(d.dir=""==d.dir?"rtl":"")}}}}();
-d=[],f=0,m=b.length;f<m;f++)d.push(e(b[f]));b=new XMLHttpRequest;b.onload=function(){window.location.href=a};b.open("POST","?action=mark-items-as-read",!0);b.send(JSON.stringify(d))},ToggleRTLMode:function(){for(var a=["#current-item h1","#item-content","#current-item h2","#current-item .preview"],b=0;b<a.length;b++){var d=document.querySelector(a[b]);d&&(d.dir=""==d.dir?"rtl":"")}}}}();
+Miniflux.Event=function(){var e=[];return{lastEventType:"",ListenMouseEvents:function(){document.onclick=function(d){var a=d.target.getAttribute("data-action");if(a){Miniflux.Event.lastEventType="mouse";var b;a:{for(element=d.target;element&&element.parentNode;)if(element=element.parentNode,element.tagName&&"article"===element.tagName.toLowerCase()){b=element;break a}b=null}switch(a){case "refresh-all":d.preventDefault();Miniflux.Feed.UpdateAll();break;case "refresh-feed":d.preventDefault();Miniflux.Feed.Update(d.target.getAttribute("data-feed-id"));
-Miniflux.Event=function(){var e=[];return{lastEventType:"",ListenMouseEvents:function(){document.onclick=function(d){var b=d.target.getAttribute("data-action");if(b){Miniflux.Event.lastEventType="mouse";var a;a:{for(element=d.target;element&&element.parentNode;)if(element=element.parentNode,element.tagName&&"article"===element.tagName.toLowerCase()){a=element;break a}a=null}switch(b){case "refresh-all":d.preventDefault();Miniflux.Feed.UpdateAll();break;case "refresh-feed":d.preventDefault();Miniflux.Feed.Update(d.target.getAttribute("data-feed-id"));
+break;case "mark-read":d.preventDefault();Miniflux.Item.MarkAsRead(b);break;case "mark-unread":d.preventDefault();Miniflux.Item.MarkAsUnread(b);break;case "mark-removed":d.preventDefault();Miniflux.Item.MarkAsRemoved(b);break;case "bookmark":d.preventDefault();Miniflux.Item.SwitchBookmark(b);break;case "download-item":d.preventDefault();Miniflux.Item.DownloadContent(b);break;case "original-link":d.preventDefault();Miniflux.Item.OpenOriginal(b);break;case "mark-all-read":d.preventDefault();Miniflux.Item.MarkListingAsRead("?action=unread");
-break;case "mark-read":d.preventDefault();Miniflux.Item.MarkAsRead(a);break;case "mark-unread":d.preventDefault();Miniflux.Item.MarkAsUnread(a);break;case "mark-removed":d.preventDefault();Miniflux.Item.MarkAsRemoved(a);break;case "bookmark":d.preventDefault();Miniflux.Item.SwitchBookmark(a);break;case "download-item":d.preventDefault();Miniflux.Item.DownloadContent(a);break;case "original-link":d.preventDefault();Miniflux.Item.OpenOriginal(a);break;case "mark-all-read":d.preventDefault();Miniflux.Item.MarkListingAsRead("?action=unread");
+break;case "mark-feed-read":d.preventDefault(),Miniflux.Item.MarkListingAsRead("?action=feed-items&feed_id="+d.target.getAttribute("data-feed-id"))}}}},ListenKeyboardEvents:function(){document.onkeypress=function(d){if(63==d.keyCode||!(d.ctrlKey||d.shiftKey||d.altKey||d.metaKey)){var a=d.target||d.srcElement;if("INPUT"!=a.tagName&&"TEXTAREA"!=a.tagName)if(Miniflux.Event.lastEventType="keyboard",e.push(d.keyCode||d.which),103===e[0])switch(e[1]){case void 0:break;case 117:window.location.href="?action=unread";
-break;case "mark-feed-read":d.preventDefault(),Miniflux.Item.MarkListingAsRead("?action=feed-items&feed_id="+d.target.getAttribute("data-feed-id"))}}}},ListenKeyboardEvents:function(){document.onkeypress=function(d){if(63==d.keyCode||!(d.ctrlKey||d.shiftKey||d.altKey||d.metaKey)){var b=d.target||d.srcElement;if("INPUT"!=b.tagName&&"TEXTAREA"!=b.tagName)if(Miniflux.Event.lastEventType="keyboard",e.push(d.keyCode||d.which),103===e[0])switch(e[1]){case void 0:break;case 117:window.location.href="?action=unread";
+e=[];break;case 98:window.location.href="?action=bookmarks";e=[];break;case 104:window.location.href="?action=history";e=[];break;case 115:window.location.href="?action=feeds";e=[];break;case 112:window.location.href="?action=config";e=[];break;default:e=[]}else switch(e=[],a=document.getElementById("current-item"),d.keyCode||d.which){case 100:Miniflux.Item.DownloadContent(a);break;case 112:case 107:Miniflux.Nav.SelectPreviousItem();break;case 110:case 106:Miniflux.Nav.SelectNextItem();break;case 118:Miniflux.Item.OpenOriginal(a);
-e=[];break;case 98:window.location.href="?action=bookmarks";e=[];break;case 104:window.location.href="?action=history";e=[];break;case 115:window.location.href="?action=feeds";e=[];break;case 112:window.location.href="?action=config";e=[];break;default:e=[]}else switch(e=[],b=document.getElementById("current-item"),d.keyCode||d.which){case 100:Miniflux.Item.DownloadContent(b);break;case 112:case 107:Miniflux.Nav.SelectPreviousItem();break;case 110:case 106:Miniflux.Nav.SelectNextItem();break;case 118:Miniflux.Item.OpenOriginal(b);
+break;case 111:Miniflux.Item.Show(a);break;case 109:Miniflux.Item.SwitchStatus(a);break;case 102:Miniflux.Item.SwitchBookmark(a);break;case 104:Miniflux.Nav.OpenPreviousPage();break;case 108:Miniflux.Nav.OpenNextPage();break;case 114:Miniflux.Feed.UpdateAll();break;case 63:Miniflux.Nav.ShowHelp();break;case 122:Miniflux.Item.ToggleRTLMode()}}}}}}();
-break;case 111:Miniflux.Item.Show(b);break;case 109:Miniflux.Item.SwitchStatus(b);break;case 102:Miniflux.Item.SwitchBookmark(b);break;case 104:Miniflux.Nav.OpenPreviousPage();break;case 108:Miniflux.Nav.OpenNextPage();break;case 114:Miniflux.Feed.UpdateAll();break;case 63:Miniflux.Nav.ShowHelp();break;case 122:Miniflux.Item.ToggleRTLMode()}}}}}}();
+Miniflux.Nav=function(){function e(a){var b=pageYOffset+document.documentElement.clientHeight;(0>b-(a.offsetTop+a.offsetHeight)||b-a.offsetTop>document.documentElement.clientHeight)&&window.scrollTo(0,a.offsetTop-10)}function d(){return document.getElementById("listing")?!0:!1}return{OpenNextPage:function(){var a=document.getElementById("next-page");a&&a.click()},OpenPreviousPage:function(){var a=document.getElementById("previous-page");a&&a.click()},SelectNextItem:function(){var a=document.getElementById("next-item");
-Miniflux.Nav=function(){function e(b){var a=pageYOffset+document.documentElement.clientHeight;(0>a-(b.offsetTop+b.offsetHeight)||a-b.offsetTop>document.documentElement.clientHeight)&&window.scrollTo(0,b.offsetTop-10)}function d(){return document.getElementById("listing")?!0:!1}return{OpenNextPage:function(){var b=document.getElementById("next-page");b&&b.click()},OpenPreviousPage:function(){var b=document.getElementById("previous-page");b&&b.click()},SelectNextItem:function(){var b=document.getElementById("next-item");
+if(a)a.click();else if(d())if(a=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var b=0,h=a.length;b<h;b++){if("current-item"===a[b].id){b+1<h&&(a[b].id="item-"+a[b].getAttribute("data-item-id"),a[b+1].id="current-item",e(a[b+1]));break}}else a[0].id="current-item",e(a[0])},SelectPreviousItem:function(){var a=document.getElementById("previous-item");if(a)a.click();else if(d())if(a=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var b=
-if(b)b.click();else if(d())if(b=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var a=0,f=b.length;a<f;a++){if("current-item"===b[a].id){a+1<f&&(b[a].id="item-"+b[a].getAttribute("data-item-id"),b[a+1].id="current-item",e(b[a+1]));break}}else b[0].id="current-item",e(b[0])},SelectPreviousItem:function(){var b=document.getElementById("previous-item");if(b)b.click();else if(d())if(b=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var a=
+a.length-1;0<=b;b--){if("current-item"===a[b].id){0<=b-1&&(a[b].id="item-"+a[b].getAttribute("data-item-id"),a[b-1].id="current-item",e(a[b-1]));break}}else a[a.length-1].id="current-item",e(a[a.length-1])},ShowHelp:function(){open("?action=show-help","Help","width=320,height=450,location=no,scrollbars=no,status=no,toolbar=no")},IsListing:d}}();Miniflux.App.Run();
-b.length-1;0<=a;a--){if("current-item"===b[a].id){0<=a-1&&(b[a].id="item-"+b[a].getAttribute("data-item-id"),b[a-1].id="current-item",e(b[a-1]));break}}else b[b.length-1].id="current-item",e(b[b.length-1])},ShowHelp:function(){open("?action=show-help","Help","width=320,height=450,location=no,scrollbars=no,status=no,toolbar=no")},IsListing:d}}();Miniflux.App.Run();

assets/js/app.js

@@ -3,14 +3,6 @@ var Miniflux = {};
 Miniflux.App = (function() {
 
     return {
-        // Blink the refresh icon to avoid to load an image and just for fun
-        BlinkIcon: function() {
-            var icons = document.querySelectorAll(".loading-icon");
-
-            [].forEach.call(icons, function(icon) {
-                icon.classList.toggle("loading-icon-blink");
-            });
-        },
         Run: function() {
             Miniflux.Event.ListenKeyboardEvents();
             Miniflux.Event.ListenMouseEvents();

assets/js/feed.js

@@ -9,45 +9,6 @@ Miniflux.Feed = (function() {
     // Number of concurrent requests when updating all feeds
     var queue_length = 5;
 
-    // Interval reference for the loading icon
-    var icon_interval;
-
-    // Show the refresh icon when updating a feed
-    function showRefreshIcon(feed_id)
-    {
-        var container = document.getElementById("loading-feed-" + feed_id);
-
-        if (container) {
-            container.appendChild(document.createTextNode("☀"));
-            container.classList.add("loading-icon-blink");
-        }
-
-        if (! icon_interval) {
-            icon_interval = setInterval(Miniflux.App.BlinkIcon, 500);
-        }
-    }
-
-    // Hide the refresh icon after update
-    function hideRefreshIcon(feed_id)
-    {
-        var container = document.getElementById("loading-feed-" + feed_id);
-        if (container) container.innerHTML = "";
-
-        var container = document.getElementById("last-checked-feed-" + feed_id);
-        if (container) container.innerHTML = container.getAttribute("data-after-update");
-    }
-
-    // Get all subscriptions from the feeds page
-    function loadFeeds()
-    {
-        var links = document.getElementsByTagName("a");
-
-        for (var i = 0, ilen = links.length; i < ilen; i++) {
-            var feed_id = links[i].getAttribute('data-feed-id');
-            if (feed_id) feeds.push(parseInt(feed_id));
-        }
-    }
-
     // Update the items unread/total count for the feed
     function updateItemsCounter(feed_id, counts)
     {
@@ -57,52 +18,48 @@ Miniflux.Feed = (function() {
 
     return {
         Update: function(feed_id, callback) {
+            var container = document.getElementById("items-count-" + feed_id);
+            if (! container) return;
 
-            showRefreshIcon(feed_id);
+            //add data-feed-id to article element and couse the first h2
+            container.parentNode.className = "loading-icon";
             
             var request = new XMLHttpRequest();
-
             request.onload = function() {
+                container.parentNode.className = "";
 
-                hideRefreshIcon(feed_id);
+                var response = JSON.parse(this.responseText);
+                if (response.result) updateItemsCounter(feed_id, response.items_count);
                 
-                try {
+                if (callback) callback(response);
-
-                    var response = JSON.parse(this.responseText);
-
-                    if (response.result) updateItemsCounter(feed_id, response.items_count);
-                    if (callback) callback(response);
-                }
-                catch (e) {}
             };
 
             request.open("POST", "?action=refresh-feed&feed_id=" + feed_id, true);
             request.send();
         },
         UpdateAll: function() {
+            var links = document.getElementsByTagName("a");
 
-            loadFeeds();
+            for (var i = 0, ilen = links.length; i < ilen; i++) {
+                var feed_id = links[i].getAttribute('data-feed-id');
+                if (feed_id) feeds.push(parseInt(feed_id));
+            }
 
             var interval = setInterval(function() {
-
                 while (feeds.length > 0 && queue.length < queue_length) {
-
                     var feed_id = feeds.shift();
                     queue.push(feed_id);
 
                     Miniflux.Feed.Update(feed_id, function(response) {
-
                         var index = queue.indexOf(response.feed_id);
                         if (index >= 0) queue.splice(index, 1);
 
-                        if (feeds.length == 0 && queue.length == 0) {
+                        if (feeds.length === 0 && queue.length === 0) {
                             clearInterval(interval);
-                            clearInterval(icon_interval);
                             window.location.href = "?action=unread";
                         }
                     });
                 }
-
             }, 100);
         }
     };

assets/js/item.js

@@ -188,48 +188,27 @@ Miniflux.Item = (function() {
             var container = document.getElementById("download-item");
             if (! container) return;
 
-            var item_id = getItemID(item);
+            container.innerHTML = " " + container.getAttribute("data-before-message");
-            var message = container.getAttribute("data-before-message");
+            container.className = "loading-icon";
-
-            var span = document.createElement("span");
-            span.appendChild(document.createTextNode("☀"));
-            span.className = "loading-icon";
-
-            container.innerHTML = "";
-            container.className = "downloading";
-            container.appendChild(span);
-            container.appendChild(document.createTextNode(" " + message));
-
-            var icon_interval = setInterval(Miniflux.App.BlinkIcon, 250);
             
             var request = new XMLHttpRequest();
-
             request.onload = function() {
 
                 var response = JSON.parse(request.responseText);
-                clearInterval(icon_interval);
+                container.className = "";
                 
                 if (response.result) {
-
                     var content = document.getElementById("item-content");
                     if (content) content.innerHTML = response.content;
                     
-                    if (container) {
+                    container.innerHTML = container.getAttribute("data-after-message");
-                        var message = container.getAttribute("data-after-message");
-                        container.innerHTML = "";
-                        container.appendChild(document.createTextNode(" " + message));
-                    }
                 }
                 else {
-
+                    container.innerHTML = container.getAttribute("data-failure-message");
-                    if (container) {
-                        var message = container.getAttribute("data-failure-message");
-                        container.innerHTML = "";
-                        container.appendChild(document.createTextNode(" " + message));
-                    }
                 }
             };
             
+            var item_id = getItemID(item);
             request.open("POST", "?action=download-item&id=" + item_id, true);
             request.send();
         },

templates/feeds.php

@@ -21,11 +21,9 @@
     <section class="items">
     <?php foreach ($feeds as $feed): ?>
         <article>
-            <h2 class="<?= (! $feed['enabled']) ? 'feed-disabled' : '' ?>">
+            <h2 <?= (! $feed['enabled']) ? 'class="feed-disabled"' : '' ?>>
                 <?php if (! $feed['enabled']): ?>
                     <span title="<?= t('Subscription disabled') ?>">✖</a>
-                <?php else: ?>
-                    <span id="loading-feed-<?= $feed['id'] ?>" class="loading-icon"></span>
                 <?php endif ?>
 
                 <?= Helper\favicon($favicons, $feed['id']) ?>

themes/bootstrap-light/css/app.css

@@ -377,7 +377,7 @@ cite {
   font-style: normal;
 }
 .text-muted,
-.downloading,
+#download-item,
 .feed-last-checked {
   color: #999999;
 }
@@ -5089,6 +5089,21 @@ span[id^="items-count-"]:before {
 span[id^="items-count-"]:after {
   content: ")";
 }
+.loading-icon:before {
+  content: "☀";
+  animation-name: blinker;
+  -webkit-animation-name: blinker;
+  /* Chrome, Safari, Opera */
+  animation-duration: 500ms;
+  -webkit-animation-duration: 500ms;
+  /* Chrome, Safari, Opera */
+  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
+  /* Chrome, Safari, Opera */
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  /* Chrome, Safari, Opera */
+}
 .logo {
   min-width: 100px;
   min-height: 45px;

themes/bootstrap-light/less/miniflux-base.less

@@ -67,6 +67,19 @@ span {
     }
 }
 
+// Loading
+.loading-icon:before {
+    content: "@{icon-loading}";   
+    animation-name: blinker;
+    -webkit-animation-name: blinker; /* Chrome, Safari, Opera */
+    animation-duration: 500ms;
+    -webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
+    animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
+}
+
 // Logo
 .logo {
 	min-width: 100px;
@@ -264,7 +277,7 @@ article ul.item-menu {
 	}
 }
 
-.downloading {
+#download-item {
 	&:extend(.text-muted all);
 }
 

themes/bootstrap-light/less/variables.less

@@ -65,6 +65,7 @@
 @icon-read:                "✔";
 @icon-bookmarked:          "★";
 @icon-not-bookmarked:      "☆";
+@icon-loading:             "☀";
 
 // Components
 // -------------------------

themes/bootswatch-cyborg/css/app.css

@@ -377,7 +377,7 @@ cite {
   font-style: normal;
 }
 .text-muted,
-.downloading,
+#download-item,
 .feed-last-checked {
   color: #888888;
 }
@@ -5089,6 +5089,21 @@ span[id^="items-count-"]:before {
 span[id^="items-count-"]:after {
   content: ")";
 }
+.loading-icon:before {
+  content: "☀";
+  animation-name: blinker;
+  -webkit-animation-name: blinker;
+  /* Chrome, Safari, Opera */
+  animation-duration: 500ms;
+  -webkit-animation-duration: 500ms;
+  /* Chrome, Safari, Opera */
+  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
+  /* Chrome, Safari, Opera */
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  /* Chrome, Safari, Opera */
+}
 .logo {
   min-width: 100px;
   min-height: 45px;

themes/bootswatch-cyborg/less/miniflux-base.less

@@ -67,6 +67,19 @@ span {
     }
 }
 
+// Loading
+.loading-icon:before {
+    content: "@{icon-loading}";   
+    animation-name: blinker;
+    -webkit-animation-name: blinker; /* Chrome, Safari, Opera */
+    animation-duration: 500ms;
+    -webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
+    animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
+}
+
 // Logo
 .logo {
 	min-width: 100px;
@@ -264,7 +277,7 @@ article ul.item-menu {
 	}
 }
 
-.downloading {
+#download-item {
 	&:extend(.text-muted all);
 }
 

themes/bootswatch-cyborg/less/variables.less

@@ -65,6 +65,7 @@
 @icon-read:                "✔";
 @icon-bookmarked:          "★";
 @icon-not-bookmarked:      "☆";
+@icon-loading:             "☀";
 
 // Components
 // -------------------------

themes/hello/css/app.css

@@ -65,6 +65,21 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 header nav li > a:before, .page-header ul li a, .items .item-menu li a:before {
   font-family: "FontAwesome"; }
 
+.loading-icon:before {
+  content: "☀";
+  animation-name: blinker;
+  -webkit-animation-name: blinker;
+  /* Chrome, Safari, Opera */
+  animation-duration: 500ms;
+  -webkit-animation-duration: 500ms;
+  /* Chrome, Safari, Opera */
+  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
+  /* Chrome, Safari, Opera */
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  /* Chrome, Safari, Opera */ }
+
 form {
   background-color: #fFFFFF;
   padding: 10px; }

themes/hello/scss/_common.scss

@@ -38,3 +38,4 @@ $icon-bracket-close: ")";
 $icon-read: "✔";
 $icon-bookmarked: "★";
 $icon-not-bookmarked: "☆";
+$icon-loading: "☀";

themes/hello/scss/_icons.scss

@@ -8,3 +8,16 @@
 %awesome {
 	font-family: "FontAwesome";
 }
+
+// Loading
+.loading-icon:before {
+    content: $icon-loading;
+    animation-name: blinker;
+    -webkit-animation-name: blinker; /* Chrome, Safari, Opera */
+    animation-duration: 500ms;
+    -webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
+    animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
+}

themes/midnight/css/app.css

@@ -149,6 +149,6 @@ textarea:focus {
     color: #fff;
 }
 
-.loading-icon {
+.loading-icon:before {
     color: #fff;
 }

themes/still/css/app.css

@@ -178,6 +178,6 @@ textarea:focus {
     color: #fff;
 }
 
-.loading-icon {
+.loading-icon:before {
     color: #fff;
 }