Flat Facebook - Build GIF, SVG and CSS Preloaders with Loading.io
{{n.message}}
By continuing to browse this site, you are agreeing to our latest Privacy Policy and Term of Use. OK Detail..




{{build.progress || 0}}%
Almost There
looks like it takes longer than usual. larger images will need more time to build...actually a neural network is running for color quantization here
so it would take some time...
we will keep optimizing this step, which is made possible with your support.and don't worry, generating SVG, APNG and PNG sequence will be much faster. or you can first try with a smaller size, then use larger size when your design is ready.perhaps it's time for a break. why not just go and find yourself a cup of coffee?
{{build.name}}

You don't have any palette. Make one now
currently, only latest 10 are shown. make another palette
{{c.value|prettyColorHex}}
Use this Palette
 
Save and Use
    Create by Upload Image or Keyword
Flat Facebook
pulsing bars used by facebook, flat design version
 

Hover to
See All
{{(edit.values[k] && 'On') || 'Off'}}
upload
{{pals.pal[0]}}
Yes
No
current in maintenance mode. come back later
buy to unlock
{{mod.license || 'CC-BY'}} LICENSE
valid before {{buy.validDate || '??'}}
GIF
SVG
CSS
Save Config





Download

{{mod.name}}

{{tag}}
trademark
It's {{mod.name}}'s trademark. follow their guideline when use.

{{mod.desc}}

this is released under
CC0 License / free use for any purpose
Free Download





this is released under
CC-BY License / attribute this page when use
Free Download with Attribution



this is a
Trademark logo / follow their guideline when use
Free Download





this is released under
RF License / download after purchased
building GIF from icon is a
building animation SVG from icon is a
generate PNG sequence from icon is a
building APNG from icon is a
attribution free is a
Pro Feature / unlock with following:

  $9.99 / month
  $39.99 / year

 or

  $1.99
Currency in USD. Will be converted to equvilent TWD when charging.

example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476

Invoice Information

physical invoice only applicable in Taiwan
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}
* Payment will be made with TWD after converting from USD with the latest rate
We won't store your card number.Transactions are processed by our partner TapPay™ under PCI-DSS Level 1 compliance and SSL 2048bit encryption.





with

Trademark Logo

follow {{icon.name}}'s logo usage guideline
with

CC-BY License

Attribution is need to this page
free use for any purpose
with

CC0 License

free use for any purpose
with

Yearly Plan

you got:
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized
priority in support
cancel anytime7 days refund guarantee
with

Monthly Plan

you got:
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized
cancel anytime7 days refund guarantee
with

Pay Per Icon

you got:
no need to attribute
all features for this resource
2 days pass to customize and download
lifetime use right for downloaded images
7 days refund guarantee


Subscribed!

It's great to have you here! It's time for unlimited animation from our service!







Thanks, I'm cool

Invoice Setting

physical invoice only applicable in Taiwan
Update

Cancel Subscription

after canceling subscription, you will need to pay each time for downloading RF license icons or use advanced features after this billing period ends. Are you sure?


  Proceed  
   
Maybe Next Time

Change Payment Method

example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476

Invoice Information

physical invoice only applicable in Taiwan
 {{payPanels.method.cc.config.action || 'Use This Credit Card' || 'Purchase'}}
* Payment will be made with TWD after converting from USD with the latest rate
You will be charged 1$ to verify this credit card. It will be returned immediately.

Subscription is now Beta Testing!



advanced feature and subscription will be available soon.
come back then!



OK!

Your Choice

Weekly
6.99
7 days unlimited access
fully licensed
no attribution needed
access to all RF License resources

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
1.99
your name in about page
help us sustain

Current Plan
Subscribe

cancel anytime
You will be charged now and periodically when your account automatically renews.






example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476

Invoice Information

physical invoice only applicable in Taiwan
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}
* Payment will be made with TWD after converting from USD with the latest rate

Bring Your Work Alive

suppercharge with unlimited animations, advanced functionalities and support us to make more great stuff!


Free Plan
Free
access to CC Spinners
access to static CC icons

Current Plan
Canceled

start after this period ends
Stop Future Billing

still pro until next period start
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
GIF size optimized
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime




want more? check out these loaders, too!



Sample Result


pulsing bars used by facebook, flat design version
pulsing bars used by facebook, flat design version
pulsing bars used by facebook, flat design version

pulsing bars used by facebook, flat design version

Additional Information

Compatibility

tl;dr - simply use GIF for browser compatibility, or use SVG by default + GIF fallback for IE



Quick Comparison


GIFSVGCSS
IE Support (all version)
IE Support (>=10)
Small File Size
Image Quality
Responsive
Easy to Use


Explained in Detail

SVG

smallest and most flexible one. They scale well, and are 95% smaller than GIFs. Yet, we use SMIL to animate SVG, but SMIL is not supported by all versions of IE, so don't use SVG if you have to support IE/Edge.

CSS

CSS loaders are as small as SVG and supported by newer version IE. However, only part of icons in loading.io support CSS format, and you need to code HTML and CSS to use it, and it still does not work in IE<=9.

GIF

GIFs have the best compatibility in all browsers but are 20x larger than SVG/CSS even after compressed, and they have the worst quality and only work well in specific size and single color background.



Future of SMIL

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.

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. Once eveyrone is using it, vendors like Microsoft will eventually have to support SMIL.






Load Comments




Sign Into Loading.io
By clicking {{auth.isSignIn && 'LOGIN' || 'SIGNUP'}}, you agree to our Terms and Privacy Policy.
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »