Floating Loading Animation

Developer
Mario Duarte
Size
3,660 Kb
Views
26,312
  1. Floating Loading Animation Previews
  2. Floating Loading Animation HTML Codes
  3. Floating Loading Animation CSS Codes
  4. Floating Loading Animation JS Codes

How do I make an floating loading animation?

Simple floating loading animation mas with CSS in a flat design feel.. What is a floating loading animation? How do you make a floating loading animation? This script and codes were developed by Mario Duarte on 11 November 2022, Friday.

Floating Loading Animation Previews
IQ Test

Floating Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Loading Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Floating Loader -->
<div class="loader"></div>
<div class="shadow"></div>
<!-- Like what you see? why not visit my website for more awesome work -->
<div class="logo">	<a href="https://mariodesigns.co.uk/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/MDlogo.svg" alt="Mario Designs"></a>
</div> <script src="js/index.js"></script>
</body>
</html>

Floating Loading Animation - Script Codes CSS Codes

@-webkit-keyframes mainAnimation { 0% { width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 40% { width: 150px; -webkit-transform: translateX(-50px) translateY(0px) rotate(0deg); transform: translateX(-50px) translateY(0px) rotate(0deg); } 60% { width: 150px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: translateX(-150px) translateY(0px) rotate(90deg); transform: translateX(-150px) translateY(0px) rotate(90deg); } 80% { width: 50px; -webkit-transform: translateX(-25px) translateY(0px) rotate(90deg); transform: translateX(-25px) translateY(0px) rotate(90deg); } 100% { width: 50px; -webkit-transform: translateX(-50px) translateY(0px) rotate(90deg); transform: translateX(-50px) translateY(0px) rotate(90deg); }
}
@keyframes mainAnimation { 0% { width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 40% { width: 150px; -webkit-transform: translateX(-50px) translateY(0px) rotate(0deg); transform: translateX(-50px) translateY(0px) rotate(0deg); } 60% { width: 150px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: translateX(-150px) translateY(0px) rotate(90deg); transform: translateX(-150px) translateY(0px) rotate(90deg); } 80% { width: 50px; -webkit-transform: translateX(-25px) translateY(0px) rotate(90deg); transform: translateX(-25px) translateY(0px) rotate(90deg); } 100% { width: 50px; -webkit-transform: translateX(-50px) translateY(0px) rotate(90deg); transform: translateX(-50px) translateY(0px) rotate(90deg); }
}
@-webkit-keyframes secundaryAnimation { 0% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); } 40% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); } 60% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 80% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 100% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); }
}
@keyframes secundaryAnimation { 0% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); } 40% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); } 60% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 80% { -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); } 100% { -webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg); }
}
@-webkit-keyframes shadowAnimation { 0% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); } 20% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 40% { width: 200px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); } 60% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 80% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 100% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); }
}
@keyframes shadowAnimation { 0% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); } 20% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 40% { width: 200px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); } 60% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 80% { width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg); } 100% { width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg); }
}
@-webkit-keyframes float { 0% { top: 50%; } 50% { top: 51%; } 100% { top: 50%; }
}
@keyframes float { 0% { top: 50%; } 50% { top: 51%; } 100% { top: 50%; }
}
html, body { height: 100%;
}
body { position: relative; background: #99d2e4; background: -webkit-linear-gradient(315deg, #99d2e4 0%, #ffd4da 100%); background: linear-gradient(135deg, #99d2e4 0%, #ffd4da 100%);
}
.loader { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; background-color: #FFF5A5; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards; animation: mainAnimation 2.6s ease 0s infinite forwards; z-index: 2;
}
.loader:after { content: ''; display: inline-block; position: absolute; width: 50px; height: 50px; top: 0; left: -50px; background-color: #FFF5A5; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards; animation: secundaryAnimation 2.6s ease 0s infinite forwards;
}
.shadow { position: absolute; width: 100px; height: 10px; top: 50%; left: 50%; margin-top: 50px; margin-left: -75px; border-radius: 50%; background-color: #95a5a6; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; z-index: 1;
}
.logo { position: absolute; bottom: 20px; left: 50%; width: 42px; height: 42px; padding: 12px 5px; margin-left: -21px; box-sizing: border-box; background-color: white; border-radius: 50%; -webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.logo:hover { -webkit-transform: scale(1.4); transform: scale(1.4);
}
.logo img { width: 100%; height: auto; margin: 0 auto;
}

Floating Loading Animation - Script Codes JS Codes

// No JS Here...
"use strict";
Floating Loading Animation - Script Codes
Floating Loading Animation - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded November 11, 2022
Rating 4.5
Size 3,660 Kb
Views 26,312
Do you need developer help for Floating Loading Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Duarte (MarioDesigns) Script Codes
Name
Console Simulator
Minimalist Mobile Mockup
Floating Animation - CSS
CodePen Logo Animation
3D Pyramid Animation
The Dark - CSS animated background
SoundCloud Custom Player
Hamburger Menu Animation
Element Card - Group 11 element
JavaScript Lesson - Todo list
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!