Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

A CSS, HTML and jQuery circular preloader

September 5th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, jQuery | Tags: , , , , , , , , , ,

I decided to do a little sketching on my iPad mini on the way in to work one day…after getting frustrated with not being able to get some code to function.

This is what I drew:
IMG_4981This was drawn on a train in to London, please excuse the scruffiness

What is this all about?
I wanted to get my mind off the other work so I looked at creating a minimal preloader, using only CSS, HTML and little jQuery. I started with taking on the traditional “straight line” preloader and playing with the thickness of lines and their opacity. This was looking great, but I wanted to create something a little more exciting for the visitor – who wants to wait to view a site anyway? I wanted to make that wait a little more bearable.

I looked at creating a circular pre-loader, yes this is traditional again, but making this in CSS-only would prove to be a challenge and something that I know that could be re-used in an upcoming project.

Screen Shot 2013-09-05 at 08.58.37

Screen Shot 2013-09-05 at 08.58.37The final design made in Photoshop after importing the image from the iPad so I could get that red/orange background color

Lets get started, shall we:

All credit goes to this website which I used to make all of the animation.

The html

The circle is split in to four squares, I’m not totally sure why but I’m guessing it’s to do with the math and transformations occurring in the background when the jQuery rotates the inner, loading, circle – I’m experimenting with this and getting some very funky shapes!

The CSS

WOW – where do I even start with this lot. I understand all of this but explaining it here is going to be difficult!

The jQuery

Here it is in action via instagram:


#webdev #html #css #jquery Circular loading animation. Started from an iPad idea. by @scriptedpixels

and via JSFiddle:

Just to get this out the door I’m going to end this post here. I’ll figure out a way to annotate all the code in a nice legible and logical way as I’d like to highlight what I’ve done.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd