Bounce Delay Loader

Developer
Joni Trythall
Size
2,894 Kb
Views
18,216
  1. Bounce Delay Loader Previews
  2. Bounce Delay Loader HTML Codes
  3. Bounce Delay Loader CSS Codes

How do I make an bounce delay loader?

What is a bounce delay loader? How do you make a bounce delay loader? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

Bounce Delay Loader Previews
IQ Test

Bounce Delay Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bounce Delay Loader</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='contain'> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg>
</div>
</body>
</html>

Bounce Delay Loader - Script Codes CSS Codes

.contain { position: relative; margin: 155px auto; width: 200px;
}
svg { position: absolute;
}
svg ellipse { -webkit-transform-origin: center; transform-origin: center;
}
svg:nth-of-type(1) ellipse { stroke: #F1725D; cx: 25px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 0ms; animation-delay: 0ms;
}
svg:nth-of-type(2) ellipse { stroke: #38BDAB; cx: 65px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 75ms; animation-delay: 75ms;
}
svg:nth-of-type(3) ellipse { stroke: #9D30A5; cx: 105px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
svg:nth-of-type(4) ellipse { stroke: #B779E2; cx: 145px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 225ms; animation-delay: 225ms;
}
svg:nth-of-type(5) ellipse { stroke: #683893; cx: 185px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
svg:nth-of-type(6) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 25px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 0ms; animation-delay: 0ms;
}
svg:nth-of-type(7) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 65px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 75ms; animation-delay: 75ms;
}
svg:nth-of-type(8) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 105px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
svg:nth-of-type(9) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 145px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 225ms; animation-delay: 225ms;
}
svg:nth-of-type(10) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 185px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
@-webkit-keyframes jump { 40% { -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3); opacity: .9; } 40% { rx: 10px; ry: 10px; stroke-width: 3px; } 45% { rx: 15px; ry: 7px; stroke-width: 4px; } 55% { rx: 10px; ry: 10px; }
}
@keyframes jump { 40% { -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3); opacity: .9; } 40% { rx: 10px; ry: 10px; stroke-width: 3px; } 45% { rx: 15px; ry: 7px; stroke-width: 4px; } 55% { rx: 10px; ry: 10px; }
}
@-webkit-keyframes shadow { 45% { opacity: .15; rx: 10px; ry: 3px; -webkit-transform: translateY(5px) scale(1.3); transform: translateY(5px) scale(1.3); }
}
@keyframes shadow { 45% { opacity: .15; rx: 10px; ry: 3px; -webkit-transform: translateY(5px) scale(1.3); transform: translateY(5px) scale(1.3); }
}
Bounce Delay Loader - Script Codes
Bounce Delay Loader - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4.5
Size 2,894 Kb
Views 18,216
Do you need developer help for Bounce Delay Loader?

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!

Joni Trythall (jonitrythall) Script Codes
Name
Meat Selection
SVG Loaders
Weird Circle Loader
Brian The CSS Bee
Frosted Glass Quote
Animated Shopping Cart Icons
CSS Pencil Scoop Logo
Rainbow Loader
Hinged Twitter Button
Blurred Gear Loader
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!