CSS Load: Create & Auto Generate CSS Code For Site Load Animations

We’ve reviewed many CSS code generators; some that apply effects to different elements like boxes and layers or the most recent one, XEO CSS, that allow you to edit the CSS by using a visual editor and passing on coding altogether. CSS Load is yet another web application that auto generates CSS code. The code generated is meant for your site load animation. It allows you to pick site load animations from eight templates and customize its color and speed.

A site load animation is like a progress bar projected by a website for users so they know the site is loading. While browsers too give users a clue as to whether or not the site is loading, if you’re designing a site that might take a little longer to load, giving the user some assurance from your end might be a good idea. The app allows you to pick from eight different site load animations and customize them.

To get started, pick an animation style from the small scrollable panel on the right. The animation template consists of bar and disc designs. Some templates support two while others support single colors. The template you choose will load on the right under Your Animation Preview.

CSS Load

To begin customization, click the color code field next to First Color and a color picker will open. Select the color from the circular disc and set brightness levels from the square in the middle. Select a Second Color if the load animation you’ve chosen supports two. The option to select a second color will appear regardless of whether or not the animation you’ve selected supports two colors or not. Once you’ve selected the colors, select the speed of the animation by moving the knob on the horizontal Animation Speed bar.


 

CSS Load set colors

Changes are reflected as you make them, however, if they aren’t, click Generate Preview and the changes will start to appear on the right where the animation first loaded. To get code for the animation, click Get Code. Copy the code to your HTML or CSS file and your Site is loading animation is ready to load.

Visit CSS Load

Advertisement
  • Timur

    Nice!

    You have a missing page on the “generators” link you provided in the article. Also, I think http://preloaders.net and http://iconizer.net would be interesting to your readers too :).

    Thanks for the article