loader image

Example – 7

example-1-2-2

EXAMPLE 1

Loader – Spinning Sun (CSS3 Animation)
Progress – Loading Bar. Position middle
Ending Transition – Split Horizontally

example-2-2

EXAMPLE 2

Loader – Wave (CSS3 Animation)
Progress – None
Ending Transition – Fade

example-3-2

EXAMPLE 3

Loader – Rainbow (CSS3 Animation)
Progress – Percentage. Below Loader
Ending Transition – Split Horizontally

example-4-2-2

EXAMPLE 4

Loader – Waterfilling (CSS3 Animation)
Progress – Loading Bar. Position Top
Ending Transition – Split Vertically

example-5-2

EXAMPLE 5

Loader – Crystal (CSS3 Animation)
Progress – Percentage. Position Middle
Ending Transition – Slide Up

example-6-2

EXAMPLE 6

Loader – Custom Image Bouncing
Progress – Loading Bar. Position Bottom
Ending Transition – Fade

example-7-2-3

EXAMPLE 7

Loader – Custom Static Image
Progress – Percentage. Position Middle
Ending Transition – Slide Up
With Gradient Background

example-8-3

EXAMPLE 8

Loader – Custom Image Loading
Progress – Loading Bar. Position Middle
Ending Transition – Slide to Right
With Gradient Background

example-9-2

EXAMPLE 9

Loader – Custom Image Loading
Progress – None
Ending Transition – Split Horizontally
With Custom Message

example-10-2

EXAMPLE 10

Loader – Drawing Frame with Custom Image
Progress – Percentage
Ending Transition – Shrink & Fade

With Custom Message on Top

example-11-2

EXAMPLE 11

Loader – Custom Image Rotating
Progress – Percentage
Ending Transition – Slide to Left

example-12-2

EXAMPLE 12

Loader – Custom Image Bouncing
Progress – Percentage
Ending Transition – Fade
Repeating Pattern Background

example-13-2

EXAMPLE 13

Loader – None
With custom message
Progress – Loading Bar
Ending Transition – Shrink & Fade
Full Background Image

example-14-2

EXAMPLE 14

Loader – Custom Image Loading
With custom message
Progress – Loading Bar on Top
Ending Transition – Split Horizontally
Full Background Image

example-15-2

EXAMPLE 15

Loader – Custom Image Fading
With custom message + Random Message
Progress – Loading Bar + Number
Ending Transition – Split & Reveal Vertically
Gradient Background Color

example-16-2

EXAMPLE 16

Loader – Beating
With custom message
Progress – None
Ending Transition – Split & Reveal Horizontally
Full Background Image

example-17-2

EXAMPLE 17

Loader – Incomplete Ring
Progress – Percentage
Ending Transition – Split Diagonally (Horizontally)
Repeating Pattern Background

example-18-2

EXAMPLE 18

Loader – Custom HTML Loader
Progress – Loading Bar + Number
Ending Transition – Split Horizontally