CSS 3D loading

Developer
Mario Duarte
Size
2,261 Kb
Views
68,816
  1. CSS 3D loading Previews
  2. CSS 3D loading HTML Codes
  3. CSS 3D loading CSS Codes

How do I make an css 3d loading?

3D loading screen with css. What is a css 3d loading? How do you make a css 3d loading? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

CSS 3D loading Previews
IQ Test

CSS 3D loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS 3D loading</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> <div class="container"> <div class="circle-1"></div> <div class="circle-2"></div>
</div>
</body>
</html>

CSS 3D loading - Script Codes CSS Codes

html, body { margin: 0; padding: 0;
}
@-webkit-keyframes cirle { 0% { left: 100px; } 50% { left: 50px; } 100% { left: 100px; }
}
@keyframes cirle { 0% { left: 100px; } 50% { left: 50px; } 100% { left: 100px; }
}
@-webkit-keyframes secundCirle { 0% { left: 50px; } 50% { left: 100px; } 100% { left: 50px; }
}
@keyframes secundCirle { 0% { left: 50px; } 50% { left: 100px; } 100% { left: 50px; }
}
@-webkit-keyframes changeIndex { 0% { z-index: 1; } 50% { z-index: 3; } 100% { z-index: 3; }
}
@keyframes changeIndex { 0% { z-index: 1; } 50% { z-index: 3; } 100% { z-index: 3; }
}
.container { width: 200px; height: 200px; position: relative; margin: 100px auto 0 auto; background-color: #eee; border-radius: 100%;
}
.circle-1 { width: 50px; height: 50px; position: absolute; top: 75px; left: 100px; background-color: #e74c3c; border-radius: 100%; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); -webkit-animation: cirle 2s 0s infinite; animation: cirle 2s 0s infinite; z-index: 2;
}
.circle-2 { width: 50px; height: 50px; position: absolute; top: 75px; left: 50px; background-color: #3498db; border-radius: 100%; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); -webkit-animation: secundCirle 2s 0s infinite, changeIndex 2s steps(1) infinite; animation: secundCirle 2s 0s infinite, changeIndex 2s steps(1) infinite;
}
CSS 3D loading - Script Codes
CSS 3D loading - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 2,261 Kb
Views 68,816
Do you need developer help for CSS 3D loading?

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
Colour Game
SoundCloud Custom Player
Hamburger Menu Animation
Minimalist Mobile Mockup
JavaScript Lesson - Todo list
Carbon Atom Animation
Console Simulator
MDesigns Animated Background
Relative Mouse Position
Floating Loading Animation
Create amazing marketing copy 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!