Grow your CSS skills. Land your dream job.

Rebuilding CSSLoad.net

Published by Chris Coyier

The following is a guest post by Timur Gafforov. Timur is the creator of CSSLoad.net - a site for building custom loading graphics. He ran another site that did this with GIFs, but was inspired to re-do it with CSS animation. This is that story.

Background

The idea of CSSLoad.net appeared when I first learned about the keyframe animations in CSS. I had already had a project dedicated to loading animation graphics at the time, but this was much more inspiring as with native animations there are fewer limits than there is with raster images. Any size, any speed, any colors and other features with no server load. All the animations run with the loading of the page. This is what my users of preloaders.net had been requesting for years.

I created a first version of the site, but it was not very useful as it provided to little control over animations. A year after the launch, idea for a second version of the project came to me after seeing "Bouncy Animated Loading Animation" article here on CSS-Tricks. That gave me the inspiration to rework the CSSload.net project and launch the second version. The big idea was to provide users not only with the loading animations in pure CSS, but also give them more freedom to generate the animation they need with the least effort. And, voila, the second version is ready!

Thanks to Chris for the idea and Jacques for providing the Window 8 loading animation idea in the same post. Let us dig a little deeper now.

Reusing Tools

As I said, I had experience in loading image animations generator development, so I thought: why re-invent the wheel? I took some form goodies I used on preloaders.net - jQuery, Color Picker, Tigra Slider and some code snippets of my own (like my own "size scroller"). As a matter of fact, I make my own plugins often as this can be very useful in terms of code productivity and reduced code size. Only coding exactly what you need is often better than using one-size-fits-all solutions.

Now the form controls for choosing loader components are ready. I will skip that code here, as you can see it one the website and it's pretty boring. We can move on to the "cream" of the application: the CSS animations generator.

Picking Options

Having taken some ideas from my own image animations and others from around the web I created several CSS loaders. I made a list of what should be changable by the user:

  • colors
  • animation speed
  • size
  • ability to reverse the animation
chooser
The UI for all choices.

Simple Example

Here is an example of one specific loader animation. I'll keep the code un-prefixed for simplicity, but the code the site generates uses all the proper prefixes.

#noTrespassingOuterBarG {
  height: 20px;
  width: 160px;
  border: 1px solid #000000;
  overflow: hidden;
  background-color: #FFFFFF;
}

.noTrespassingBarLineG {
  background-color: #000000;
  float: left;
  width: 14px;
  height: 120px;
  margin-right: 24px;
  margin-top: -28px;
  transform: rotate(45deg);
}

.noTrespassingAnimationG {
  width: 236px;
  animation-name: noTrespassingAnimationG;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes noTrespassingAnimationG {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left:- 38px;
  }
}
<div id="noTrespassingOuterBarG">
  <div id="noTrespassingFrontBarG" class="noTrespassingAnimationG">
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
  </div>
</div>

More Considerations

Before developing any application, you must consider constraints and limits. In this case I decided these were reasonable:

  • Total animation duration can not be less than 0.
  • The size of the main and inner DIVs can not be less than 5px.
  • The animation should be work in as many browsers as possible.
  • The names of CSS classes must be different from what a user would usually use. I added a "G" as in Generated to the end of each class name.

A Function Per Animation

Everything else is pretty simple. Each animation has it's own function with the same list of parameters: firstColor, secondColor, width, height, animationSpeed, isReverse and one common function that decides what function to call. Each control calls this common function upon change. Here is an example function:

function noTrespassing(firstColor, secondColor, width, height, animationSpeed, isReverse) {

  var toReturn='';

  if (isReverse) {
    var begin = Math.round(width*38/160) * (-1);
    var end = 0;
  }
  else {
    var begin = 0;
    var end = Math.round(width*38/160) * (-1);
  }

  toReturn += '<style>#noTrespassingOuterBarG{height:'+height+'px;width:'+width+'px;border:'+Math.ceil(height/20)+'px solid #'+firstColor+';overflow:hidden;background-color:#'+secondColor+'}.noTrespassingBarLineG{background-color:#'+firstColor+';float:left;width:'+Math.round(width*14/160)+'px;height:'+Math.round(width*120/160)+'px;margin-right:'+Math.round(width*24/160)+'px;margin-top:-'+Math.round(width*28/160)+'px;';

  toReturn += addPrefix('[prefix]transform:rotate(45deg);');

  toReturn += '}.noTrespassingAnimationG{width:'+Math.round(width*236/160)+'px;';

  toReturn += addPrefix('[prefix]animation-name:noTrespassingAnimationG;[prefix]animation-duration:'+animationSpeed+'s;[prefix]animation-iteration-count:infinite;[prefix]animation-timing-function:linear;');

  toReturn += '}#noTrespassingFrontBarG{}';

  toReturn += addPrefix('@[prefix]keyframes noTrespassingAnimationG{0%{margin-left:'+begin+'px;}100%{margin-left:'+end+'px;}}');

  toReturn += '</style><div id="noTrespassingOuterBarG"><div id="noTrespassingFrontBarG" class="noTrespassingAnimationG"><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div></div></div>';

  return toReturn;
}

The variables in this function speak for themselves. You can see how the code of the animation is changed in regards to a particular form element change event. I guess there is no need to go deep into detail here, except for the addPrefix function. This function simply replaces the [prefix] part of the code with required prefixes through a loop of global prefixes array variable that is changed upon selection in the code dialog box.

That's it! The rest you can find in the code source code of the project. We hope to receive some suggestions, questions, and of course, criticism.

Comments

  1. Bilal
    Permalink to comment#

    This is cool.

    If it can look better than a 5kb gif then i think it is worth it. Especially when you need larger sized loaders.

  2. Justin
    Permalink to comment#

    Really neat! CSS animations really aren’t used as much as I think they could be.

    It’s Just a bummer that browsers event as recent as IE9 don’t support it… It makes it hard to consider using this for more than a cool addition…

    • Permalink to comment#

      Well, I think it’s just a matter of time :) I am sure people will switch to new browsers very soon and forget their incredibly long love for IE6 (and well for other antique software). New technologies will always prevail

  3. I’ve used preloaders.net several times before, but when I found out about aPNG (Wikipedia, MozillaWiki, caniuse.com*) I immediately contacted them letting them know about it.

    Timur immediately replied back letting me know they were going to add the aPNG feature to preloaders.net right away. I was fortunate enough to help them test the new features and usability of the site together with some design recommendations.

    Timur and team did an awesome job adding the aPNG feature to prealoaders.net

    Then I found CSSLoad.net and knew that like prelaoders.net, it was an awesome service.

    *aPNG files have incredibly little support at the moment of this writing (12/08/12): Only Firefox since version 3.0, Opera since version 9.5, and Opera Mobile since version 10 support it. Google Chrome has never support it so far no has Safari. Don’t even dare ask if any IE.

    Which in turn, makes you think if actually CSS loaders can be the way to go today with simple GIFs as fallbacks, since they have way more support than aPNGs.

    • Permalink to comment#

      Hello Ricardo :) Glad you visited this article.

      Yes, Ricardo really did help us a lot and we are very thankful for that. Pity APNG is not supported by Chrome yet. It’s becoming more and more popular, which is also true for CSS animations. More and more people download animations from CSSLoad everyday, which really looks like they are not just a fancy thingy anymore. They are becoming popular in development practice

  4. Permalink to comment#

    That’s impressive! (and seems easy to implement :) Can’t wait to try to test it on my site!

  5. Asme
    Permalink to comment#

    Nice and Very simple.
    It’s possible animate a text (with a given font if possible)?

    (Between, My First post on this great site that help me a lot in :) )

  6. Permalink to comment#

    Hi Timur, your second version of cssload.net is pretty impressive. Thanks for sharing your experience. Learned something new today.

    • Permalink to comment#

      Thanks a lot for the assessment, Wilson :) hope to do even better in the nearest future

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".