DEV Community

Cover image for Create Dynamic Spinners only using CSS
Tapajyoti Bose
Tapajyoti Bose

Posted on • Edited on

Create Dynamic Spinners only using CSS

#css #html #webdev #ux

In this blog we will be creating the Pizza Spinner depicted in the Cover Image.

Getting Started

We would be using the following image of a Pizza Slice to generate the entire pizza.

Pizza Slice

The shell of the HTML would be

<div class="spinner"> <img src="<link to image>" class="pizza-part pizza-part-1" /> <img src="<link to image>" class="pizza-part pizza-part-2" /> <img src="<link to image>" class="pizza-part pizza-part-3" /> <img src="<link to image>" class="pizza-part pizza-part-4" /> </div>
Enter fullscreen mode Exit fullscreen mode

Breaking Down the Animation

Any complex animation can be broken down into a series of simple animations. Let's breaking down the animation into the corresponding components:

  • Each of the pizza slice uses opacity to make the impression of fading in & out
  • Each of the pizza slice also uses transform to rotate (to the required position to generate the appearance of a complete pizza) and translate (to generate the animation of picking the slice off the pizza)
  • The main container spins about its center making it look even more dynamic

The CSS for the spinner would be

.spinner { width: 160px; height: 160px; margin: 0; display: flex; flex-wrap: wrap; animation: spin 4s linear infinite; } .pizza-part { width: 80px; height: 80px; } .pizza-part-1 { animation: pizza1 2s ease-in-out infinite; } .pizza-part-2 { animation: pizza2 2s ease-in-out infinite; } .pizza-part-3 { animation: pizza4 2s ease-in-out infinite; } .pizza-part-4 { animation: pizza3 2s ease-in-out infinite; } /* animations */ @keyframes spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @keyframes pizza1 { 0% { transform: translate(-20%, -20%); opacity: 0; } 10% { transform: translate(0%, 0%); opacity: 1; } 50% { transform: translate(0%, 0%); opacity: 1; } 60% { transform: translate(-20%, -20%); opacity: 0; } 100% { transform: translate(-20%, -20%); opacity: 0; } } @keyframes pizza2 { 0% { transform: translate(20%, -20%) rotateZ(90deg); opacity: 0; } 10% { transform: translate(20%, -20%) rotateZ(90deg); opacity: 0; } 20% { transform: translate(0%, 0%) rotateZ(90deg); opacity: 1; } 60% { transform: translate(0%, 0%) rotateZ(90deg); opacity: 1; } 70% { transform: translate(20%, -20%) rotateZ(90deg); opacity: 0; } 100% { transform: translate(20%, -20%) rotateZ(90deg); opacity: 0; } } @keyframes pizza3 { 0% { transform: translate(20%, 20%) rotateZ(180deg); opacity: 0; } 20% { transform: translate(20%, 20%) rotateZ(180deg); opacity: 0; } 30% { transform: translate(0%, 0%) rotateZ(180deg); opacity: 1; } 70% { transform: translate(0%, 0%) rotateZ(180deg); opacity: 1; } 80% { transform: translate(20%, 20%) rotateZ(180deg); opacity: 0; } 100% { transform: translate(20%, 20%) rotateZ(180deg); opacity: 0; } } @keyframes pizza4 { 0% { transform: translate(-20%, 20%) rotateZ(-90deg); opacity: 0; } 30% { transform: translate(-20%, 20%) rotateZ(-90deg); opacity: 0; } 40% { transform: translate(0%, 0%) rotateZ(-90deg); opacity: 1; } 80% { transform: translate(0%, 0%) rotateZ(-90deg); opacity: 1; } 90% { transform: translate(-20%, 20%) rotateZ(-90deg); opacity: 0; } 100% { transform: translate(-20%, 20%) rotateZ(-90deg); opacity: 0; } }
Enter fullscreen mode Exit fullscreen mode

Demo

Project using this Implementation

Pizza Man

Web-app: http://pizza-man-61510.firebaseapp.com/

GitHub logo ruppysuppy / Pizza-Man

🍕🛒 An e-commerce website to order pizza online

Pizza Man Project

An E-Commerce website for ordering Pizza Online

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Tools used

  1. React: To create the Single Page App
  2. React-Router: For Routing
  3. Redux: For State Management
  4. Firebase: As a DataBase

Firebase Setup

You need to create a firebase configeration file holding the firebase settings in the path /src/firebase/config.js. The required format is:

const firebaseConfig = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN.firebaseapp.com", databaseURL: "DATABASE-URL.firebaseio.com", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET.appspot.com", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID", measurementId: "MEASUREMENT-ID", }; export default firebaseConfig;
Enter fullscreen mode Exit fullscreen mode

Data needs to be stored in the following format:

[ { name: "CATEGORY NAME", items: [ { desc: "PIZZA DESCRIPTION", id: "ID", img: "IMAGE LINK", name
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Thanks for reading

Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow my blogs for bi-weekly new Tidbits on Medium

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Buzz words
    2. Front End Development Roadmap
    3. Front End Project Ideas
    4. Transition from a Beginner to an Intermediate Frontend Developer

  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Top comments (9)

Collapse
 
georgedoescode profile image
George Francis •

So good!

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Thankyou! :)

Collapse
 
arvindsridharan profile image
arvindsridharan •

Hey Tap! That's a cool post. Amazing.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Thanks a lot! :)

Collapse
 
fernandoboza profile image
Fernando Boza •

i love it, it's so cute

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Thanks!

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • • Edited

A small suggestion, use svg instead of png (unlike what's done here as dev.to doesn't support svg images in blogs), its smaller in size & scales as well