Loading Loop

Developer
Ariana Lynn
Size
2,798 Kb
Views
20,240
  1. Loading Loop Previews
  2. Loading Loop HTML Codes
  3. Loading Loop CSS Codes

How do I make an loading loop?

With No JS. Messed up with CSS but, absolutely zero JS.Comment on any bugs, if you must..... What is a loading loop? How do you make a loading loop? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.

Loading Loop Previews
IQ Test

Loading Loop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Loop</title> <link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</body>
</html>

Loading Loop - Script Codes CSS Codes

body { background: #1e1e1e;
}
figure { width: 20px; height: 20px; margin: 0; border-radius: 100%; position: fixed; top: calc(50% - 10px); left: calc(50% - 180px);
}
body:after { content: "LOADING..."; background: linear-gradient(to right, #f5a352, #79bfa1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: cursive; position: fixed; top: calc(50% + 40px); left: 50%; transform: translate(-50%); color: #fff; font-size: 23px; font-family: 'Luckiest Guy', cursive; letter-spacing: 2px;
}
figure:nth-of-type(10) { background: #f5a352; margin-left: 300px; -webkit-animation: Move10 1.5s infinite;
}
@-webkit-keyframes Move10 { 0%, 100% { top: calc(50% - 10px); } 70% { top: calc(50% - 100px); }
}
figure:nth-of-type(9) { background: #79bfa1; margin-left: 270px; -webkit-animation: Move9 1.5s infinite;
}
@-webkit-keyframes Move9 { 0%, 100% { top: calc(50% - 10px); } 65% { top: calc(50% - 100px); }
}
figure:nth-of-type(8) { background: #c5aaf5; margin-left: 240px; -webkit-animation: Move8 1.5s infinite;
}
@-webkit-keyframes Move8 { 0%, 100% { top: calc(50% - 10px); } 60% { top: calc(50% - 100px); }
}
figure:nth-of-type(7) { background: #c5aaf5; margin-left: 210px; -webkit-animation: Move7 1.5s infinite;
}
@-webkit-keyframes Move7 { 0%, 100% { top: calc(50% - 10px); } 55% { top: calc(50% - 100px); }
}
figure:nth-of-type(6) { background: #fb7374; margin-left: 180px; -webkit-animation: Move6 1.5s infinite;
}
@-webkit-keyframes Move6 { 0%, 100% { top: calc(50% - 10px); } 50% { top: calc(50% - 100px); }
}
figure:nth-of-type(5) { background: #a3cbf1; margin-left: 150px; -webkit-animation: Move5 1.5s infinite;
}
@-webkit-keyframes Move5 { 0%, 100% { top: calc(50% - 10px); } 45% { top: calc(50% - 100px); }
}
figure:nth-of-type(4) { background: #a3cbf1; margin-left: 120px; -webkit-animation: Move4 1.5s infinite;
}
@-webkit-keyframes Move4 { 0%, 100% { top: calc(50% - 10px); } 40% { top: calc(50% - 100px); }
}
figure:nth-of-type(3) { background: #79bfa1; margin-left: 90px; -webkit-animation: Move3 1.5s infinite;
}
@-webkit-keyframes Move3 { 0%, 100% { top: calc(50% - 10px); } 35% { top: calc(50% - 100px); }
}
figure:nth-of-type(2) { background: #c5aaf5; margin-left: 60px; -webkit-animation: Move2 1.5s infinite;
}
@-webkit-keyframes Move2 { 0%, 100% { top: calc(50% - 10px); } 30% { top: calc(50% - 100px); }
}
figure:nth-of-type(1) { background: #c5aaf5; margin-left: 30px; -webkit-animation: Move1 1.5s infinite;
}
@-webkit-keyframes Move1 { 0%, 100% { top: calc(50% - 10px); } 25% { top: calc(50% - 100px); }
}
Loading Loop - Script Codes
Loading Loop - Script Codes
Home Page Home
Developer Ariana Lynn
Username arianalynn
Uploaded September 05, 2022
Rating 4
Size 2,798 Kb
Views 20,240
Do you need developer help for Loading Loop?

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!

Ariana Lynn (arianalynn) Script Codes
Name
Google Material Sliders
Menu Animated Dropdown and Icon
Material Buttons.css
Bubbles in the Sky
Live Chat
Canvas Cloth with Strings
Fireworks Show
-Webkit-Filter Demo
Material Note App
Dots and Shapes
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!