DEV Community

skptricks
skptricks

Posted on

9 3

Facebook loading animation using CSS3

Post Link : https://www.skptricks.com/2017/12/facebook-loading-animation-using-css3.html

Today we are going to discuss Facebook loading animation using CSS3. If you observed that when you open Facebook in web application it shows a content loading placeholder like below screenshots.
How the Facebook content placeholder works
To display loading effect in webpage based application, you need some ideas on CSS3. Here we are using CSS3 Keyframes to create desire effect.
Content Placeholder Animation like Facebook using Shimmer
Lets start with loading animation.
Animation 1 :
Here we are using animation1.css file to display loading effect in webpage.

Facebook loading animation using CSS3

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay