Your Planet is Loading...

Developer
Joe Harry
Size
4,051 Kb
Views
28,336
  1. Your Planet is Loading... Previews
  2. Your Planet is Loading... HTML Codes
  3. Your Planet is Loading... CSS Codes
  4. Your Planet is Loading... JS Codes

How do I make an your planet is loading...?

What is a your planet is loading...? How do you make a your planet is loading...? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

Your Planet is Loading... Previews
IQ Test

Your Planet is Loading... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Your Planet is Loading...</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="planet"> <div class="circle"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Your Planet is Loading... - Script Codes CSS Codes

body{	background-color: #000000; background-image: url(data:image/png;base64,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);
}
#container{	width: 200px;	height: 200px;	position: relative;	top: 50vh;	margin: -100px auto 0 auto; -webkit-animation: float 40s alternate ease-out infinite; animation: float 40s alternate ease-out infinite;
}
#planet{	width: 100px;	height: 100px;	border-radius: 50%; background:-webkit-repeating-linear-gradient( 60deg, #1976d2, #1de9b6 ); background:repeating-linear-gradient( 30deg, #1976d2, #1de9b6 );	display: -webkit-box;	display: -ms-flexbox;	display: flex; box-shadow: 0px 0px 8px -2px #FFFFFF;
}
.circle{	width: 20px;	height: 20px;	border-radius: 50%;	background-color: #ffffff;	margin: 0 auto 0 auto; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; box-shadow: 0px 0px 8px -2px #CCCCCC; margin-left:-32px; z-index: 1; opacity: 0.8;
}
@-webkit-keyframes float { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } 25% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 60% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 80% {	-webkit-transform:rotate(-26deg); transform:rotate(-26deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
}
@keyframes float { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } 25% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 60% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 80% {	-webkit-transform:rotate(-26deg); transform:rotate(-26deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
}

Your Planet is Loading... - Script Codes JS Codes

$(document).ready(function() {	var tl = new TimelineMax({repeat:-1});	var tlSizeUp = new TimelineMax();	var tlSizeDown = new TimelineMax();	var circle = $('.circle');	var tweenRight = TweenMax.to(circle, 0.4, {x:150,ease: Sine.easeInOut});	var tweenLeft = TweenMax.to(circle, 0.4, {x:0, ease: Sine.easeInOut});	var sizeSmall = TweenMax.to(circle, 0.2, {scale:1.4});	var sizeLarge = TweenMax.to(circle, 0.2, {scale:0.7});	var sizeReset = TweenMax.to(circle, 0.2, {scale:1});	tlSizeUp.add(sizeSmall)	.add(sizeReset);	tlSizeDown.add(sizeLarge)	.add(sizeReset);	tl.add([tweenRight, tlSizeUp]) .set(circle, {css:{zIndex:-1}}) .add([tweenLeft, tlSizeDown]) .set(circle, {css:{zIndex:1}});
});
Your Planet is Loading... - Script Codes
Your Planet is Loading... - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 4
Size 4,051 Kb
Views 28,336
Do you need developer help for Your Planet is 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!

Joe Harry (woodwork) Script Codes
Name
Loading Christmas...
Video Loading
Flower Spinner
Long Live Ziggy Stardust
Fake 3D
Stronger Together
Typophile
TTMM Pebble Clock
Samsung TV Loader
Social Links Plugin
Create amazing SEO content 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!