loading.io Open in urlscan Pro
2606:4700:20::681a:6b6  Public Scan

Form analysis
0 forms found in the DOM

Text Content

LOADING.IO

loading.io is now loading ...

LOADING.IO

 * Upload
 * Icon
   Spinner GalleryIcon LibraryTheme Icons
   
   Animate By Upload
 * Text
 * Background
   Loading PatternsLive Backgrounds
 * Progress Bar
 * Color
   Random Palette GeneratorGradient Gallery
   UPCOMING
   ldColorPicker
   UPCOMING
   
   Browse Built-in Palettes ...
 * Libraries
   CSS
   Pure CSS LoadersLoading.cssTransition.cssLoading ButtonsIcon Font
   UPCOMING
   
   JS
   Loading BarldLoaderldCoverldColorPicker
   UPCOMING
   
   ... More
   UPCOMING

 * Pricing
 * Login
 * Sign Up
 * You
   FREE
   
   Upgrade Now
   
   My AssetsSettingsBilling
   
   Logout


Shortcut provides speedy task management, reporting, and collaboration for
developers. Try it free today.ads via Carbon
loading.io


ANIMATION
MADE EASY.

Ajax Loader, Animated Icons, Live Background
... in GIF / SVG / APNG / CSS !

Get Start

ICON LIBRARY

animate any icons from our icon library



YOUR IMAGE

upload and animate image with your own icon



YOUR WORDS

make unique text animation in seconds

more features ...

Draggable
Upload
upload 
Button
Button
Submod
Switch
Font
Switch
Yes
No
Choice
Text
Palette

Color

Number

Animation
Animation...
...


Color

Multi color
ON
OFF
Corner
50
0

100
Bar Width
6
1

100
Bar Height
12
1

100
Bar Count
12
2

100
Radius
20
0

50
Random Seed
Palette

background

Transparent
ON
OFF
speed
1
0.01

10
size
200
1

800

Frame Rate (fps)
30
1

60
Edge Smoothing
ON
OFF
GIF Global Palette
ON
OFF


Download with
free License
GIF
SVG
STATICANIMATED
CSS
PNG
STATICPNG SEQUENCEAPNG
Or
Save as Asset
 * default Opt
 * image Opt

View
My Pals
Edit

Filter
All

ArtworkBrandConcept

GradientQualitativeDivergingColorbrew
USE
EDIT





attack on titan
USE
EDIT





bleach / ブリーチ
USE
EDIT







big hero 6
USE
EDIT








frozen - elsa alt
USE
EDIT







frozen - elsa
USE
EDIT








frozen
USE
EDIT






maleficent
USE
EDIT







the lion king
USE
EDIT








the little mermaid
USE
EDIT










winnie the pooh
USE
EDIT







wreck it ralph
USE
EDIT





dragon ball / ドラゴンボール
USE
EDIT







kung fu panda
USE
EDIT










madagascar
USE
EDIT








penguins of madagascar
USE
EDIT







prince of egypt
USE
EDIT






shrek - alt
USE
EDIT










emerald city
USE
EDIT





neon genesis evangelion / 新世紀エヴァンゲリオン
USE
EDIT





yuu gi ou / 遊☆戯☆王
USE
EDIT





happiness and cyanide
USE
EDIT





涼宮ハルヒ
USE
EDIT





magica madoka / 魔法少女まどか☆マギカ
USE
EDIT









minions alt
USE
EDIT









minions
USE
EDIT







naruto / ナルト
USE
EDIT







one piece / ワンピース
USE
EDIT








spirited away / 千と千尋の神隠し (alt)
USE
EDIT








spirited away / 千と千尋の神隠し
USE
EDIT






your name / 君の名は
USE
EDIT






your name / 君の名は
USE
EDIT







chinese water color / 中國水墨畫
USE
EDIT






great wave off kanagawa / 神奈川沖浪裏
USE
EDIT








liberty leading the people / la liberté guidant le peuple
USE
EDIT








da vinci / mona lisa
USE
EDIT







vincent van gogh / starry night over the rhone
USE
EDIT






edvard munch / the scream / skrik
USE
EDIT



500px
USE
EDIT



7-11
USE
EDIT




7up
USE
EDIT


dribbble
USE
EDIT




lego
USE
EDIT



netflix
USE
EDIT


reactjs
USE
EDIT





acti
USE
EDIT


adobe after effect
USE
EDIT


adobe illustrator
USE
EDIT


adobe bridge
USE
EDIT


adobe lightroom
USE
EDIT


adobe photoshop
USE
EDIT



google adsense
USE
EDIT



google adwords
USE
EDIT



amazon
USE
EDIT


america express
USE
EDIT








arriva
USE
EDIT





asana
Load More

Custom


+-
RGB
HSL
HEX
A RGBA ▾

RGBHSLHCL

Red
232
0

255
Green
97
0

255
Blue
76
0

255

Hue
8
0

360
Saturation
0.77
0

1
Luminance
0.6
0

1

Hue
37
0

360
Chroma
66
0

230
Luminance
59
0

100


--------------------------------------------------------------------------------

Use This Palette
Save as Asset

Undo
Go Pro to Unlock All
No Animation
static

Popular Animation
blink

bounce

bounce-in

bounce-out

breath

fade

flip (horizontally)

float-in (bottom to top)

slide (left to right)

spin

tremble

Repeat Animation
beat

blink

blur

bounce

bounceAlt

breath

clock

coin (horizontally)

coin (vertically)

cycle

cycle-alt

damage

dim

fade

flip

flip (horizontally)

flip (vertically)

float

heartbeat

hit

jelly

jelly-alt

jingle

jump

measure

metronome

move (bottom to top)

move faded (bottom to top)

move faded (left to right)

move faded (right to left)

move faded (top to bottom)

move (left to right)

move (right to left)

move (top to bottom)

orbit

pulse

rubber (horizontally)

rubber (vertically)

rush (bottom to top)

rush (left to right)

rush (right to left)

rush (top to bottom)

shake (horizontally)

shake (vertically)

shiver

skew

skew-alt

slide (bottom to top)

slide (left to right)

slide (right to left)

slide (top to bottom)

smash

spin

spin-fast

squeeze

surprise

swim

swing

tick

tick-alt

tremble

vortex

vortex-alt

wander (horizontally)

wander (vertically)

wrench

Transition
blur-in

blur-out

bounce-alt-in

bounce-alt-out

bounce-in

bounce-out

fade-in

fade-out

fall-in (bottom to top)

fall-in (left to right)

fall-in (right to left)

fall-in (top to bottom)

flip-in (horizontally)

flip-out (horizontally)

flip-in (vertically)

flip-out (vertically)

float-in (bottom to top)

float-out (bottom to top)

float-in (left to right)

float-out (left to right)

float-in (right to left)

float-out (right to left)

float-in (top to bottom)

float-out (top to bottom)

grow-in (bottom to top)

grow-out (bottom to top)

grow-in (left to right)

grow-out (left to right)

grow-in (right to left)

grow-out (right to left)

grow-in (top to bottom)

grow-out (top to bottom)

jump-alt-in

jump-alt-out

jump-in

jump-out

power-off

power-on

rush-in (bottom to top)

rush-in (left to right)

rush-in (right to left)

rush-in (top to bottom)

slide-in (bottom to top)

slide-out (bottom to top)

slide-in (left to right)

slide-out (left to right)

slide-in (right to left)

slide-out (right to left)

slide-in (top to bottom)

slide-out (top to bottom)

spring-in (bottom to top)

spring-in (left to right)

spring-in (right to left)

spring-in (top to bottom)

throw-in (bottom to top)

throw-in (left to right)

throw-in (right to left)

throw-in (top to bottom)

vortex-alt-in

vortex-alt-out

vortex-in

vortex-out

zoom-in

zoom-out

Category ...
AllSerifSans SerifDisplayHandwritingMonospaceChinese
or
Use Your Own Font

go Pro to unlock all fonts
Upgrade Now




Download
Close

FREE
$1.99

NEED MORE? VIEW ALL SPINNERS IN OUR PRELOADER GALLERY!




MORE THAN PRELOADERS.

Animate what you need. Text, Patterns, or Backgrounds.

PATTERN

seamless repeatable animated patterns online.

see all »

BACKGROUND

full-sized, delicate animated background in vector format.

see all »

TEXT

animate your own text easily and quickly

input your text »

UPLOAD

animate your own images, even in layers!

upload now »


WE MAKE ICONS, YOU ANIMATE.

all icons are also available in static form released under loading.io BY
license.

find more icons in loading.io's icon library »



YOU DESIGN, WE HOST.

save your customization in your loading.io account for sharing, collaboration
and for your future use.



looking for more?
Search


MEET LOADING.IO

the simple enough animation service for you

Loading is a typical situation to use animation, but never the least. With
loading.io, making animation becomes so easy that you will probably want to
animate everything that can be animated.

With semantic animations and our dedicated online editor, loading.io helps you
quickly customize and generate your own animations without worrying about the
complex timeline thing. Furthermore, animations are provided in various formats
so it won't be a problem to use them in different platforms or framworks.


ANIMATABLE & CUSTOMIZABLE

Resources on loading.io, including icons, patterns and texts, are all by default
animatable and customizable.

You can customize any of them by your own style and save the configurations
directly in loading.io for future use.


VECTOR FORMAT IMAGE

Images are all based on the loseless vector format SVG to optimize the image
quality and file size.

In addition to SVG format, we also provide other formats including PNG, GIF and
CSS for you to download, depending on the resource type you are working on.




SERVICE AT COST

Premium features & content are available in both subscription/one-time purchase,
with 7 days refund guarantee and friendly cancellation policy.

Save your time and money over huge software if you don't want to spend hours in
tutorials and functions you'll never use.

... learn more about features & pricing »


NO JAVASCRIPT REQUIRED

Animated SVG is natively supported by all modern browsers*. Save your loading
time and bandwidth from yet another JS Library.

Need compatibility of older browsers like IE? we also provide GIF format and PNG
Sequence for you to make sprite animation in PNG.

* Latest Microsoft Edge had already supported animated SVG.





WE ALSO PROVIDE ...

You can find more animation-related stuffs here.

UPLOAD EDITOR

Upload and animate your own images! Supports both raster format ( PNG, JPG or
GIF ) or vectorized SVG format.

PURE CSS SPINNER

If you only want some free css spinner, Pure CSS Spinner provide a set of free
spinner in pure css, released under CC0 License.

AJAX SPINNER

Ajax loaders and spinners for indicating ajax or website loading status, shipped
in 4 formats with both free and premium content.

ANIMATED ICONS

A complete icon library empowered by animation with loading.io's online editor.
Static icons are free and released under Loading.io BY License.

LOADING PATTERN

Seamless repeatable SVG patterns that are animatable, available in vector format
SVG and raster formats PNG and GIF.

LOADING BACKGROUND

Full-sized, live images dedicated for the background of your next project.
Avaiable in vector format SVG and raster format PNG ( static form )

LOADING TEXT

Animate your own words with loading.io's animated text generator. Support 800+
fonts and a list of style presets for you to choose.

LOADING BAR

SVG-based progress bar library in JavaScript. Highly customizable and requires
no JS, while also provides a set of handy JS API.

LOADING.CSS

A set of seamless repeatable semantic animations in CSS for different kind of
purpose, along with several pure css loaders bundled inside.

TRANSITION.CSS

A set of pre-built, semantic animations in CSS for transitional effect, such as
scene entering, exiting, dialog toggling.

LOADING BUTTONS

A tiny css library for adding loading state on your button. Compatible across
different frameworks, such as Bootstrap, Semantic UI, or Pure CSS.

LOADING BUTTONS GENERATOR

Online CSS button generator for generating loading buttons with different
styles. A list of button preset is also provided for you to choose.

FLEXBOX GENERATOR

A playground for quickly prototyping and generation of flexbox-powered CSS code.
This generator is built with a easy-to-use interface.

RANDOM COLOR PALETTE GENERATOR

Randomly generate palette for you based on given images, colors, keywords or
even another palette. Use it to customize an unique design of your own.

OPEN SOURCE PROJECTS

We also provide various open source projects that are related to animation.
Check our github repository for more information.


MORE ON THE WAY...

Anything you'd like to see in loading.io? Just contact us and share with us your
thought!






HOWTO

Brief guide on using animation images, with ajax preloaders as example.

--------------------------------------------------------------------------------

Animation is a powerful way to hint and notify users about events, progress or
simply catching users' eyes. For example, preloaders are commonly used to hint
users about the loading status of an app or web page.

Animated images in different formats are slightly different in the way to use
them, and furthermore, the compatibility in different environment. Here we will
cover 4 different types of animation formats and show how to use them in
websites.


SVG LOADERS

You can simply use SVG loaders as an image in web page. For example,

<img src="hourglass.svg"/>

However, while being widely adopted, SVG loaders don't work in older browsers
like IE and older Microsoft Edge.


CSS LOADERS

Every CSS loader contains two part: HTML part and CSS part. All css spinners in
loading.io are generated in the way that you can copy & paste them directly into
your HTML, but you can also separate them into HTML and CSS files manually to
increase its reusability.

CSS preloader can only be used in web sites or any container that supports HTML
and CSS animation.

Result
HTML
CSS
<div class="loadingio-eclipse"> <div class="ldio-rpinwye8j0b"> <div> </div>
</div> </div>
@keyframes ldio-rpinwye8j0b { 0% { transform: rotate(0deg) } 50% { transform:
rotate(180deg) } 100% { transform: rotate(360deg) } } .ldio-rpinwye8j0b div {
position: absolute; animation: ldio-rpinwye8j0b 1s linear infinite; width:
160px; height: 160px; top: 20px; left: 20px; border-radius: 50%; box-shadow: 0
4px 0 0 #e15b64; transform-origin: 80px 82px; } .loadingio-eclipse { width:
200px; height: 200px; display: inline-block; overflow: hidden; }
.ldio-rpinwye8j0b { width: 100%; height: 100%; position: relative; transform:
translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; /*
see note above */ } .ldio-rpinwye8j0b div { box-sizing: content-box; }


GIF LOADERS

--------------------------------------------------------------------------------

GIF preloaders can be used simply as a normal image with <img> tag. It's the
format with the best compatibility across devices and browsers, but works poor
regarding image quality.

<img src="hourglass.gif"/>


APNG LOADERS

--------------------------------------------------------------------------------

APNG loader can be used directly in <img> tag too, and it has the better quality
than GIF loaders. Alas, not all browsers support it, especially the older
browsers. Fortunately, APNG has been supported by Microsoft Edge with the latest
version.

APNG is compatible with PNG so when you find the file extension .apng doesn't
work in some situation, you can simply rename it to .png.

<img src="hourglass.apng"/>


MORE ABOUT ANIMATION

You can learn more about using animation by reading following articles:

 * A how-to guide about choosing a good animated image format that fits best for
   your project
 * Let's talk about GIF image quality and some simple approaches to make your
   GIF look better


COMMENTS

Any questions or suggestion? Feel free to leave comment here. :)



older comments are available via facebook social plugins. View all »




JAGGED EDGES?

turning off the edge smoothing option might help


By its design, GIF is quite limited in quality especially with transparency on.
If you got GIF with colored border around edges of generated image, you can
turning off Edge Smoothing option and try again.

This option will give crispy edges around generated image, but might lead to
pixelated result, so please use it at your discretion. For more information,
check our guide about improving GIF image quality.


Close This Popup


IMPORT COLORS

update palette with picked colors in editor


This will bring up the palette editor with a new palette from all colors you
have picked in this editor. Current chosen palette won't be replaced before you
click "Use This Palette".

Are you sure to do this?


Yes, Do It
Cancel


OOOPS!

We failed to build the requested resources for you.


This might be caused by internal bugs, side effects of browser plugins, or
unsupported browsers. You could try to resolve this with following:

 * Reload this page and try again.
 * Disable some browser plugins, such as AdBlock.
 * Try with another browser or computer.
 * Contact us and report this issue.

Sorry about this inconvenience!


Close This Popup


BUILDING COMPLETED.

copy/right click to save or click download button


Download
Close
hints about GIF image quality


NOW BUILDING

Your image will be ready soon

The request resource is now being built. Soon the file will be ready with a link
for downloading popup for you to download.

0

Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.

Details
OK


LOGIN FAILED.

You might have signed up with another email / password before. please try:

 * try other password / login methods
 * check spelling in your email
 * reset your password
 * contact us directly


PRO LICENSE DOWNLOAD

Download after paying or upgrading to Pro with your loading.io account.


DOWNLOAD,
FOR FREE.

You are downloading free license item. Sign in to proceed.

* some items require payment before download


LOADING.IO

Save your works, design and share with others by logging in loading.io.

Service Provided by PlotDB Ltd.
 * SIGNUP
 * LOGIN

Email
not a valid email
Display Name
should not be empty
Password
invalid password
by sign-in, you agree to our Terms and Privacy Policy
LOGINSIGN UP

forget password? »
subscribe newsletter

or login with
Facebook
Google


LOADING.IO


FAQ
Payment / Refund
Term of Use
Privacy Policy
License
Contact Us
About Us

Spinners
Animated Icons
Uploader
Animated Text
Seamless Pattern
Live Background
Palette Generator

Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons,
live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: contact@loading.io
LOADING.IO



+-
RGB
HSL
HEX
A RGBA ▾


+-
RGB
HSL
HEX
A RGBA ▾