#preloaders

50+ Pure CSS3 Preloaders

Pure CSS3 preloaders with functionality to add “LOADING…” text below preloader. That is why it is a smoother, lightweight, faster and easy to use product which gives you nice and new kind of preloaders for your web page loading screen. It displays a loading animation until the browser fetched the whole web content of your web page.

Demo: https://codecanyon.net/item/50-pure-css3…

.btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; color: #ffffff !important; } .conts img{max-width:500px;} .conts a.but{margin-bottom:15px;} .conts a.btn{margin-bottom:25px; display:block;} .conts a.btn:first-child{background:none;border:0;}

Download Now

awesome preLoader collection, perfect usable for ajax loading and or website pre-loader. It will give freshness to your website! Collection of preloader friendly to mobile devices.

Instruction

Awesome Css3 PreLoader Collection is installed in few easy steps:

< head > < link rel="stylesheet" href="animate.css" > < link rel="stylesheet" href="preloader-style.css" > < /head >

Finally you need to add one of the following classes:

.ts_preloading_box #ts-preloader-absolute01

.ts_preloading_box #ts-preloader-absolute02

.ts_preloading_box #ts-preloader-absolute03

.ts_preloading_box #ts-preloader-absolute04

.ts_preloading_box #ts-preloader-absolute05

That’s it! Full Example

<div class="ts_preloading_box"> <div id="ts-preloader-absolute01"> <div class="tsperloader1" id="tsperloader1_four"></div> <div class="tsperloader1" id="tsperloader1_three"></div> <div class="tsperloader1" id="tsperloader1_two"></div> <div class="tsperloader1" id="tsperloader1_one"></div> </div> </div>

Main features

Colors and size are easy to change.

Autoload function

Major browser support

Lightweight

50 + collection of loading

Customizable CSS3 Transitions

Queue Support

Mobile & Retina Friendly

Demo page included

Credits

animate.css

bootstrap

Support

Awesome PreLoader Collection (Animations and Effects)

Purchase $6.00 awesome preLoader collection, perfect usable for ajax loading and or website pre-loader. It will give freshness to your website! Collection of preloader friendly to mobile devices. Instruction Awesome Css3 PreLoader Collection is installed in few easy steps: Finally you need to add one of the following classes: .ts_preloading_box #ts-preloader-absolute01 .ts_preloading_box…