Skip to main content

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

Related Articles:
  1. XEO CSS: HTML Editor, Visual Editor & Auto Code Generator For CSS
  2. Add Shadow Effect To Images With CSS3 Auto Code Generator
  3. Create GIF Animations On The Go With Gifinator For Android

CSS Load: Create & Auto Generate CSS Code For Site Load Animations
Mon, 03 Oct 2011 10:57:38 GMT

Popular posts from this blog

Apple Launches Web Tool to Deregister Phone Numbers from iMessage

Apple today released a new web tool for users to deregister their phone number from iMessage in the event they switched to a non-Apple device. To deregister a phone number from iMessage, users simply enter their phone number in Apple's web tool, receive a free text message containing a code, and submit the code to complete the process. Users who still have their original iPhone can also transfer their SIM card back to the device and go to Settings -> Messages to turn iMessage off. 

Users switching from an iPhone to another device were often unable to receive SMS messages from another iPhone due to their phone number still being linked to iMessage. These specific errors with iMessage have been a well-known issue since 2011, which is when the messaging service debuted with iOS 5. They were also made even more apparent this past May, where a server glitch caused widespread message delivery problems. Apple was even sued over the matter in a California court, although the company cla…

Microsoft acquires iPhone email app Acompli

After accidentally announcing it a little early, Microsoft is officially confirming it has acquired email startup Acompli. The surprise acquisition means Microsoft is picking up a powerful email client for iPhone and Android in another move that further cements CEO Satya Nadella’s focus on cross-platform technologies. The Verge’s Casey Newton called Acompl "the Outlook for iPhone that Microsoft hasn’t yet built," and it seems Microsoft was equally impressed with the powerhouse email app. "We’re excited about what’s possible as we build on the app’s success and bring it together with work currently in progress by the Outlook team," the company said in a statement. "Our goal is to deliver fantastic cross-platform apps that support the variety of email services people use today and help them accomplish more." Recode first reportedthat Microsoft would make its latest acquisition official today; the company is said to be paying over $200 million for Acompli. A…

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…