Gooey Light Rings Loader

Developer
Victor Freire
Size
3,230 Kb
Views
40,480
  1. Gooey Light Rings Loader Previews
  2. Gooey Light Rings Loader HTML Codes
  3. Gooey Light Rings Loader CSS Codes
  4. Gooey Light Rings Loader JS Codes

How do I make an gooey light rings loader?

Applying gooey effect to HTML content with SVG filter.. What is a gooey light rings loader? How do you make a gooey light rings loader? This script and codes were developed by Victor Freire on 15 September 2022, Thursday.

Gooey Light Rings Loader Previews
IQ Test

Gooey Light Rings Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gooey Light Rings Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="svg_1"> <filter id="gooey"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooey" /> <feBlend in="SourceGraphic" in2="gooey" /> </filter> </svg> <main> <i class="sphere"></i> <i class="sphere"></i> <i class="sphere"></i> <i class="sphere"></i> <i class="sphere"></i> </main> <script src="js/index.js"></script>
</body>
</html>

Gooey Light Rings Loader - Script Codes CSS Codes

@keyframes sphere_1 { 0% { width: 10vmin; transform-origin: 21vmin; } 20% { width: 12vmin; } 40%, 60% { width: 14vmin; transform: rotate(180deg); transform-origin: 21vmin; } 80% { width: 10vmin; } 100% { transform: rotate(360deg); transform-origin: 21vmin; }
}
@keyframes sphere_3 { 0% { width: 10vmin; transform-origin: 21vmin; } 40%, 60% { width: 14vmin; transform: rotate(-180deg); transform-origin: 21vmin; } 80% { width: 10vmin; } 100% { transform-origin: 21vmin; }
}
@keyframes sphere_5 { 0% { width: 10vmin; transform-origin: -21vmin; } 40% { width: 14vmin; transform: rotate(-180deg); transform-origin: -21vmin; } 60% { width: 10vmin; } 100% { transform-origin: -12vmin; }
}
* { margin: 0; padding: 0; outline: 0; overflow: hidden; box-sizing: border-box;
}
html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at bottom, #082f2c 0%, #0e1e2f 100%);
}
main { width: 100vmax; height: 100vmin; -webkit-filter: url("#gooey"); filter: url("#gooey");
}
.sphere { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 14vmin; height: 14vmin; background: transparent; border-radius: 50%; box-shadow: inset 0 0 3vmin 0 white, inset 0 0 2.9vmin 0 white, inset 0 0 2.8vmin 0 white, inset 0 0 2.7vmin 0 white, inset 0 0 2.6vmin 0 white, inset 0 0 2.5vmin 0 white, inset 0 0 2.4vmin 0 white, 0 0 18vmin 0 white; -webkit-box-shadow: inset 0 0 7vmin 0 white, inset 0 0 6vmin 0 white, inset 0 0 5vmin 0 white, inset 0 0 4vmin 0 white, inset 0 0 3vmin 0 white, inset 0 0 2vmin 0 white, inset 0 0 1vmin 0 white, 0 0 30vmin 0 white; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sphere:nth-child(1) { left: -56vmin; animation-name: sphere_1; animation-delay: 2s;
}
.sphere:nth-child(2) { left: -28vmin;
}
.sphere:nth-child(3) { animation-name: sphere_3; animation-delay: 2.4s;
}
.sphere:nth-child(4) { left: 28vmin;
}
.sphere:nth-child(5) { left: 56vmin; animation-name: sphere_5; animation-delay: 2.8s;
}
#svg_1 { position: absolute;
}

Gooey Light Rings Loader - Script Codes JS Codes

// Best viewed on Google Chrome :/
Gooey Light Rings Loader - Script Codes
Gooey Light Rings Loader - Script Codes
Home Page Home
Developer Victor Freire
Username victorfreire
Uploaded September 15, 2022
Rating 4.5
Size 3,230 Kb
Views 40,480
Do you need developer help for Gooey Light Rings 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!

Victor Freire (victorfreire) Script Codes
Name
Search Box and Button Animated
SCSS Grid
Clip-Path Polygons
Wi-Fi Icon Spinner inspired by Material Design
Archery
Save for later...
Google Dots Radio Buttons
Create amazing web 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!