[wp-trac] [WordPress Trac] #21456: Replace animated spinner gifs with spin.js

Fri Aug 24 15:14:08 UTC 2012

#21456: Replace animated spinner gifs with spin.js
-------------------------+------------------
 Reporter:  nacin        |       Owner:
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  3.5
Component:  UI           |     Version:
 Severity:  normal       |  Resolution:
 Keywords:               |
-------------------------+------------------

Comment (by lessbloat):

 Something like this also works allowing us to use a png instead of a gif
 (to avoid the gif artifacts on different colored backgrounds):

 {{{
 <html>
         <head>
                 <title>Spin me</title>
                 <style type="text/css">
                         .spin {
                                 background: url('spinner.png') no-repeat;
                                 width: 20px;
                                 height: 20px;
                                 -webkit-animation: spin 0.7s infinite
 linear;
                                 -moz-animation: spin 0.7s infinite linear;
                                 -o-animation: spin 0.7s infinite linear;
                                 -ms-animation: spin 0.7s infinite linear;
                         }
                         @media only screen and (-moz-min-device-pixel-
 ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen
 and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-
 pixel-ratio: 1.5) {
                                 .spin {
                                         background-image: url(spinner-
 2x.png);
                                         background-size: 20px 20px;
                                 }
                         }
                         @-webkit-keyframes spin {
                                 0% { -webkit-transform: rotate(0deg);}
                                 100% { -webkit-transform: rotate(360deg);}
                         }
                         @-moz-keyframes spin {
                                 0% { -moz-transform: rotate(0deg);}
                                 100% { -moz-transform: rotate(360deg);}
                         }
                         @-o-keyframes spin {
                                 0% { -o-transform: rotate(0deg);}
                                 100% { -o-transform: rotate(360deg);}
                         }
                         @-ms-keyframes spin {
                                 0% { -ms-transform: rotate(0deg);}
                                 100% { -ms-transform: rotate(360deg);}
                         }
                         @keyframes spin {
                                 0% { transform: rotate(0deg);}
                                 100% { transform: rotate(360deg);}
                         }
                 </style>
         </head>
         <body>
                 <div class="spin"></div>
         </body>
 </html>
 }}}

 However, when I compare the performance of this block of code against
 http://neteye.github.com/activity-indicator.html, they are about the same.
 At this point, I'm leaning towards switching the current gif to use
 http://neteye.github.com/activity-indicator.html.

 Unless of course, we come up with anything better.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21456#comment:8>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software