Feedback

GIFs and Transparency

Spinners usually are GIFs because GIFs are portable and compressed. However, there is a downside... GIFs do not support partial transparency

The GIF filetype has an alpha channel which only supports 1 or 0 (on or off). Since each line of the spinner needs to blend with the background behind it, you must choose the color that the spinner is blending with (the 'matte' color). This looks great while the background color matches the matte. However, if the background color changes, it looks unpleasant:

Matte artifacts are noticible in many websites. For example, Apple has the same loading spinner but different colored backgrounds for different product pages:

Taken on 2/20/2013

SpiffyGif avoids the matte altogether. The "Halo" feature is specifically for this purpose. Halo crops the background of your spinner into a circle around your GIF to provide a better aesthetic if the background color changes. This is what it would look like in action:

With halo effect. Hover to see hover state support.

This is especially useful for support of application hover states. Hover over the examples to see the result.

This can also be done with CSS background-color and border-radius, but since IE 8 doesn't support border radius, halo provides a consistent cross-browser experience. See below for additional CSS recommendations.

PNG Sprite animations

Docs coming soon. See this example for now.

GIF Examples

SpiffyGif License

  • You are free to copy and redistribute any images generated from SpiffyGif in any medium or format, even commercially.
  • You are permitted to remix, transform, and build upon images generated from SpiffyGif for any purpose, even commercially.

THIS SOFTWARE AND GENERATED IMAGE FILES ARE PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.