This content originally appeared on DEV Community and was authored by Tapajyoti Bose
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.
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>
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
opacityto make the impression of fading in & out - Each of the pizza slice also uses
transformtorotate(to the required position to generate the appearance of a complete pizza) andtranslate(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;
}
}
Demo
Project using this Implementation
Pizza Man
Web-app: http://pizza-man-61510.firebaseapp.com/
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
- React: To create the Single Page App
- React-Router: For Routing
- Redux: For State Management
- 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;
Data needs to be stored in the following format:
[
{
name: "CATEGORY NAME",
items: [
{
desc: "PIZZA DESCRIPTION",
id: "ID",
img: "IMAGE LINK",
name…
Thanks for reading
Reach out to me on:
This content originally appeared on DEV Community and was authored by Tapajyoti Bose
Tapajyoti Bose | Sciencx (2021-03-14T03:27:00+00:00) Create Dynamic Spinners only using CSS. Retrieved from https://www.scien.cx/2021/03/14/create-dynamic-spinners-only-using-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.