HTML5 & CSS3

An overview of design elements created by me

On this page I will continuously add CSS3-styled HTML(5) components created by me, with instruction manuals and download links.

Project Description

I had the idea for this CSS experiment when I was contemplating how to visualize the loading animation for the gallery slider that was in development for this web site's portfolio page. The result is this neat little HTML construct that uses transitions, transformations and a little keyframe animation to display a block of markup as a spinning hourglass icon while its content is still loading. When a CSS class gets removed from that container via JavaScript, it smoothly transforms into a content block (or reveals one when used as an overlay). After completion I immediately integrated it into the coding pages as well, as you can test right below this text by clicking the live demo button. The demo block uses the overlay variant while the demo is loaded and the demo itself shows the wrapper variant.

Used Technologies:

CSS3, HTML, jQuery

Project Files:

  • hourglass-loader_demo-files.zip

    All components of the demo you can view here, just slightly modified so it can work without external dependencies.

  • hourglass-loader.css

    If you are only interested in the core functionality, the CSS file alone is sufficient enough.

Project Description

The purpose of this animated overlay, as is the case with more or less all others like it out there, is to prevent users from accidentally initializing an action that loads new content into a web page twice in a row by doing two things at the same time:
First, the animation provides a visual clue to the user that their input is actually being processed. Ajax requests run in the backgrund and if they happen to take a long time, because of slow networks and/or large amounts of data being loaded, users might get the impression that nothing happened when they initiated a page interaction. Thus, unless it is communicated to them visually, they might get inclined to repeat that interaction again, which can lead to unwanted complications.
Second, the overlay sits in front of everything else on the page, effectively blocking access to all page components until loading the new content has been completed. This is an additional safety net in case someone either doesn't get the visual clue or clicks twice by accident.

The version of this overlay used on this website is just one amongst various others, as I designed its visuals in a way that can be changed in a modular fashion. I did this to be able to test various themes for it to find out which one of them would best fit this website's visual style. Yet, when I found the most fitting one, I didn't throw away the rest, I kept all of it with the intent to provide all possible combinations for public use.

Used Technologies:

HTML5, CSS3, JavaScript, jQuery, Ajax

Project Files: