Enjoying the Wait with Chris Dermody

As the world continues to provide more instantaneous gratification in a myriad of areas, so too grows the need to let a user know when something may take a short period of time before it is ready. When people can view video or read articles or make purchased with a few keystrokes or the click of a button, it becomes easy to forget that some tasks require more than a few seconds. This is where loading screens come into play.

Chris Dermody was developing his online portfolio when he found that some of his projects needed time to load. Instead of leaving possible employers and other coders waiting with a blank screen, he turned his attention to creating a simple loading animation to run while the behind-the-scenes actions took place. Instead of a simple loading bar that increased in percentage from zero to one hundred, he chose to make a scrolling code snippet using the color palette of his most often used tool. The idea was to show the website was processing code by showing an animation of generating code. This gave his creation something of a fourth wall break for those that understand the mechanics behind the interface.

Dermody started with SVG (Scalable Vector Graphics) elements that worked quite well. Ultimately he chose to develop a CSS version to avoid lack of support for SVG elements and cross-browser compatibility issues. The CSS version also is significantly more lightweight which reduces the amount of time needed to load. The loading animation has received a very positive response from the rest of the coding communities and was followed with a blog explaining each step taken for others to include their own versions on their own websites. Though this has brought Derbrody some acclaim, he still expresses that loading screens are something of a side project that helps him keep from being too overly focused on his main projects. Regardless, this elegant approach to loading screens will be around for quite some time and be one of his marks on the coding community at large.