CSS loading bars

Generatable animated horizontal bars with the means of CSS and HTML

Go to page 2
Text to animate
First color
Second color
Width
Height
Speed
Size
Get code
How to create css preloaders
  • - Select your css animation template
  • - Set 2 colors of your preloader
  • - Select desired preloader size (sizes are set by constrained proportions)
  • - Choose your animation speed
  • - Set "Yes" in Reverse animation for backwards animation
Loading animation...
Copied... Copied... Copy HTML Copy CSS
« Back to generator
?
The prefixes given are for the following browsers:
-moz- Firefox 5+
-webkit- Google Chrome, Safari 4+, Safari for IPhone, other browsers with webkit prefix
-o- Opera 12 - 12.10 (not including 12.10)
-ms- Internet Explorer 10 (initial versions)
No prefix Opera 12.10+, Internet Explorer 10+, Firefox 3.7+, Safari 4.1+, iOS3.3+, Android 2.4+, Google Chrome
Select all
Include prefixes:
?
The prefixes given are for the following browsers:
-moz- Firefox 5+
-webkit- Google Chrome, Safari 4+, Safari for IPhone, other browsers with webkit prefix
-o- Opera 12 - 12.10 (not including 12.10)
-ms- Internet Explorer 10 (initial versions)
No prefix Opera 12.10+, Internet Explorer 10+, Firefox 3.7+, Safari 4.1+, iOS3.3+, Android 2.4+, Google Chrome