«

Disk

rotating disk with a little ball over it. used by Wordpress


Supported Formats
gif
svg
css
License & Price
free License
Draggable
upload 
Button
Font
Yes
No
...
Load More
Red
Green
Blue
Hue
Saturation
Luminance
Hue
Chroma
Luminance

Use This Palette
Save as Asset
Undo
Go Pro to Unlock All
go Pro to unlock all fonts
Upgrade Now

want more? check out these loaders, too!


rotating disk with a little ball over it. used by Wordpress
Sample Frame
rotating disk with a little ball over it. used by Wordpress
Sample GIF


Disk

rotating disk with a little ball over it. used by Wordpress


Disk is one of loading.io's high quality ajax preloader shipped in GIF, SVG and APNG formats.

All loading.io's preloaders are designed to be used as loading state indicator during the ajax calls or content loading in your website or apps. But, you can still them for other purpose, such as a simple animated icons.

Usage

GIF, APNG and SVG

It's quite simple and straightforward to use an ajax loader with GIF, APNG and SVG. First, insert downloaded image into your webpage with <img> tag, then simply show the icons when loading, and hide them after task is done.

<img src="your-loader-url" />
CSS

To use a CSS loader, copy the generated CSS code and paste it in the HTML where you'd like to use it. The CSS loader behaves as an inline block element with desired size, but you can always overwrite it with your own CSS code.

API

While it's easy to control the loader's visibility with your own code, loading.io provides a handy JS library ldLoader which helps you manage your loaders. Following is an example of using a GIF loader with ldLoader:

<script> var ldld = new ldLoader({root: '.ldld'}); </script> <div onclick="ldld.toggle()"> Toggle Loader </div> <img class="ldld" src="your-loader-url">
Toggle Loader

For more information about how to use ldLoader, please check out ldLoader's documentation directly.

Formats

All loading spinner in loading.io can be generated in SVG / APNG / GIF formats, while PNG sequence or static PNG are also available. To choose the right format for yourself, you should check the compatibility and quality of these file format before using them.

GIF

Provides the best compatibility, while big in size and low in quality. supports only up to 256 colors at most.

Supported by all browsers, even by old browser such as IE5 or Netscape.

SVG

Gives the best quality and file size but is CPU-intensive to render. Animation is more likely to lag when browser is busy

Animated SVG is not supported by IE or Edge.

APNG

Provides similar quality to SVG and is supported by most modern browsers, including Microsoft Edge.

However, its file size is proportional to image size, and isn't supported by older browser like IE.

TL;DR - We suggest you to use SVG, with GIF fallback when older browser is detected.

Here is a comparison of different features in each format.

GIFSVGAPNGCSS
Is it supported in latest version of Microsoft Edge?
Is it supported in IE version >=10?
Is it supported in IE version >= 6?
Is the file size small?
Is the image quality good?
Is the image responsive?
Is it easy to use?
Does it work in <img> tag or background-image CSS style?
Is it available for every spinner?

SMIL consideration

We use SVG SMIL when animating our SVG spinner, and you might have noticed that Chrome once deprecated SMIL several years ago.

Although Chrome tended to deprecate SMIL, this action was suspended. SMIL includes features that can not be replaced with CSS Animation, and there are still people using SMIL all over the world. Furthermore, since Microsoft Edge has officially changed it's engine to Chromium, you can think SMIL as it has been supported by all modern browsers.

Since we provide GIF / CSS as alternatives to the SVG animation, you are free to choose what format to use in your own projects; however, we still think SMIL is a powerful language, and you can help it to gain more popularity by using SMIL with your project.

License

The "Disk" spinner is released under loading.io free License. To know more about the license, please check our license page for more informtion.

Comments

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

loader





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

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.


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

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 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: [email protected]
LOADING.IO