Generate Animated Loading… Images

We’ve all seen animated images on the screen as a video or slideshow is being downloaded and set up for us to view. Sometimes the word “loading…” is the animation itself. Sometimes there’s a horizontal bar or spinning world that alerts us to wait for the media to be loaded.

A few websites provide a way to generate your own animated loading image. They’re online and they’re free. If you’re tired of the same old circular or horizontal animated images, give the following sites a try.

Preloaders.net

It’s easy to generate a multitude of preloader images at preloaders.net, which is by far the most complete animated image generator available. All you do is choose the category of preloaders that you like and then select one preloader image from the spin box. From there you can alter several parameters of the image.

Several categories of preloaders differentiate preloaders.net from its competition, including three-dimensional, astronomy, people, religion signs, rectangular, smileys, social bookmarks, and zodiac signs.

You can choose between a GIF and an APNG image. Specify any color for the foreground and background colors or select a transparent background. Here’s an example animated clock made at preloaders.net: animated 3d clock

A slider lets you change the animation speed from slow to very fast. The slowest speed wasn’t quite slow enough and the fastest speed was way too fast, at least for my liking.

The dimensions of the preloader image can be specified as width and height values. A tick can be removed from the “constrain proportions” box to introduce some interesting effects to the animation. Advanced options include means to flip the image, reverse the animation, and inverse the colors.

LoadInfo.net

Loadinfo.net offers a variety of circular, clock-like and spinning images. The foreground and background colors can be any color you choose and the background could be transparent, too. Select one of the three thumbnail sizes (16×16, 24×24, 48×48) for your image and click on ‘generate’ to create it. animated ying-yang symbol If you like the image as presented on the screen, download the free image. GIFs created there did not have transparent backgrounds when I tried it, even though the ‘transparent’ feature was selected. The spinning ying-yang symbol seen here was given a white background for a little fake transparency.

ajaxload.info

Ajaxload.info provides a standard set of clocks, bars and flowers that can be modified with respect to foreground and background color. animated blue flower You’re stuck with the speed of the animation and the size of the image, but the background can be transparent. That’s not too many options, but sometimes a simple loading image is all that’s needed.

LoadingAPNG.com

LoadingAPNG is a free online animation generator that offers a few dozen circular and horizontal bar type of animated PNG. The foreground and background colors, width, height and transparency can be modified to suit. hearts horizontal bar animated

Chimply.com

Chimply offers several clocks or spinners and animated bars that you can modify with respect to colors, transparency and size. Unique to this free online image generator is that several images can be created and temporarily stored in a workspace on the website before wrapping them in a .zip file for easy download. animated spinning clock If you click on “Last generated images” near the bottom of the screen, you can see the images that other users have created. GIFs and SWFs can be downloaded.

CSSload.net

Timur Gafforov figured out how to present an animated image using pure CSS. Once HTML5 and CSS3 are more widely accepted and used by browsers everywhere, cssload.net is a source to remember. At the time of this writing CSS3 usage is in its infancy, so for now we’ll rely on small animated GIFs or APNG images to indicate that media is Loading….

CanvasLoader.js

Another way to show animated images on your site is to use pure javascript via CanvasLoader. Use the CanvasLoader Creator to build a script that will create your animated image on the fly. It’s a clock-like oval, spiral, square, rectangle or rounded rectangle that spins around in this animated image. Set the image diameter, density, range, frames per second, speed, and colors. Then, copy the code snippet to create a new CanvasLoader object using javascript.

Make sure to download the CanvasLoader UI library. The minified .js file is less than 6 kb. The custom snippet to produce an animated image is only 8 lines long.

Well, there we have seven sites that can help us make our websites stand out from the crowd. Take caution though, some of these animated images bring back visions of the early Internet, when scrolling marquees were thought to be cool. It’s best to avoid wacky-looking spinning objects unless they suit the style of your site. If you have a game site, maybe a twirling hat or an animated string of cats is appropriate for a loading image. For a more professional look stick to the more common horizontal bars, clocks or circular moving images and modify the colors to match your site.

jQuery Plugin Tips: ColorBox

ColorBox is described as “A lightweight customizable lightbox plugin for jQuery 1.3+”. As of this writing the ColorBox jQuery plugin is being actively supported as Version 1.3.19 was issued on 8 Dec 2011. It’s an open source work released with the MIT license and it’s one of the top ten jQuery plugins used around the world.

To use ColorBox first download the plugin, unpack the .zip file, and inspect the example directories. The index page in each example folder presents a series of links to slideshows with different features, such as elastic transitions, fade transitions, or using other content types. The colorbox directory contains a minified .js file and a non-minified JScript file.

ColorBox requires that its stylesheet be included in the <head> before its javascript source, which must be included after the javascript library. In the head of an HTML page call colorbox.css, jQuery library, and then any jQuery plugins — in that order. If you don’t call jquery.js before the plugin, nothing happens on the page where you’re wanting to view a lightbox or slideshow. You’ll see a “jQuery is not defined” error if you’re using the Firebug development tool.

We want the webpage to be fully constructed before running any scripts, so put <script>s near the end of the HTML, just before the closing body tag, </body>. That way, when elements are called for in the script, they will already be present.

You don’t want the scripts near the top of the document because of the way a web page is constructed. HTML is parsed by the browser until it comes across a script. When a script is encountered the parsing is paused and the script is then executed. If a script precedes the elements that it calls for, the script won’t work as intended.

Alternatively, the script could be wrapped in a ready() method like so:

Using the ready() function assures that the DOM is completely constructed before modifying it with the script.

ColorBox works on any jQuery selectable object. It’s a simple matter to create a slideshow by grouping images with the “rel” attribute or with a common class name, like so:

A simple, one-line script is all that’s needed to create a slideshow from the images grouped by their common class name, in this case .group1.

When the image link is clicked this script will center each image in a lightbox and shadow the rest of the page behind the image. Clicking on the page, or close button, will bring back the page as it was before clicking on the image.

To create a slideshow complete with previous, next and close buttons, add ‘rel=group1’ as a css key:value pair inside curly braces in the parentheses for the colorbox function.

Any number of key:value pairs can be added here to make your slideshow really stand out.

Other content types can be used with ColorBox, like HTML, Flash, video, or external webpages. Of course, that means you can let your imagination run wild and use ColorBox to your advantage in creating beautifully modern websites.

Most Popular jQuery Plugins

jQuery is one of the most popular JavaScript libraries in use on the Internet today. Over 50% of the top 10,000 websites rely on it, as do 30% of the top million sites, according to gary at BuiltWith.

JavaScript functionality is extended with the jQuery library which is in turn extended via plugins. There are thousands of plugins to choose from depending on the functionality that’s required. The most popular plugins are well written, ready for the masses, secure, and really useful with a minimum of work.

The top ten most popular jQuery plugins are listed below with the approximate percentage of the top sites using them.

  • UI ~30%
  • Form ~20%
  • Cycle ~20%
  • Tools ~5%
  • Easing ~5%
  • Cookie ~5%
  • PrettyPhoto ~5%
  • ColorBox ~5%
  • Bgiframe ~5%
  • Validate ~5%

Enhance your skills as a developer by becoming familiar with these jQuery plugins.

Paths For Building WordPress Themes or Plugins

When tinkering with the code that runs WordPress it’s very important to get the correct path to a file. Of course it is or else the files can’t be found and your new functionality won’t work.

According to the Codex –

In Version 2.6, users were given the ability to move their /wp-content/ directory to anywhere they want, and many users already keep all WordPress files (like /wp-admin/ and /wp-includes/) in an unusual place.

In case you’ve moved the files for your WP installation, you probably have a good handle on paths and how to traverse them. For those who don’t, it can be a hair-pulling experience to find the right path. Once the right path is found, work can continue.

WordPress Paths

To help avoid those DUH! moments, here are some functions and constants that WordPress has defined regarding paths. Once you’re familiar with these functions, writing useful and working code should become easier. Optional parameters may be of use in modifying the output for several of the following templates, including $path, $file or $scheme.

plugin_basename()
Usage: plugin_basename(__FILE__); Returns: the name of the plugin and file, such as “myPlugin/myPlugin.php”
get_theme_root()
Usage: get_theme_root(); Returns: path to themes directory. No trailing slash.
get_theme_root_uri()
Usage: get_theme_root_uri(); Returns: URI for themes directory. No trailing slash.
get_theme_roots()
Usage: get_theme_roots(); Returns: Themes directory with a leading slash, like “/themes”.
site_url()
Usage: site_url(); Returns: Site directory with no trailing slash.
http://www.site.com OR http://www.site.com/wordpress
admin_url()
Usage: admin_url(); Returns: Admin directory with trailing slash.
http://www.site.com/wp-admin/
content_url()
Usage: content_url(); Returns: Content directory with trailing slash.
http://www.site.com/wp-content/
plugins_url()
Usage: plugins_url(); Returns: Plugins directory with trailing slash.
http://www.site.com/wp-content/plugins/
includes_url()
Usage: includes_url(); Returns: Includes directory with trailing slash.
http://www.site.com/wp-includes/
home_url()
Usage: home_url(); Returns: Home directory with no trailing slash.
http://www.site.com
ABSPATH (constant)
Usage: ABSPATH. Returns: Home directory with no trailing slash.
TEMPLATEPATH (constant)
Usage: TEMPLATEPATH. Returns: Path to current theme with no trailing slash.

There are a few more functions for multisite installations and backwards capability specified in the Codex.

PHP Paths

Some PHP functions worth noting –

  • __FILE__ returns the filename of the script that is currently being run
  • dirname() returns parent directory’s path for a given filename with no trailing slash
  • basename() returns the filename component of path without any parent directories
  • getcwd() returns current working directory

Use the functions or constants indicated to build your paths instead of hard-coding them. You’ll save yourself a LOT of trouble when it comes time to move your WordPress installation to a new server or directory.