Improve user experience on your website by creating a Gooey Effect loader with HTML and CSS. Follow our beginner-friendly guide for step-by-step instructions.
Table of Contents
In the world of web development, loading animations play a crucial role in enhancing user experience. They provide a visual cue to the user that the website is in the process of loading and can help to alleviate frustration and impatience. One type of loading animation that has gained popularity in recent years is the Gooey Effect loader.
A Gooey Effect is a type of animation that creates a stretchy, elastic effect using circles or other shapes. This effect is achieved through the use of CSS animation and transition properties, which manipulate the shape and size of the circles. The circles expand and contract in a fluid, organic motion, giving the impression of a gooey or jelly-like substance.
Gooey Effects are often used in loading animations, as they provide an engaging and visually interesting experience for the user. They can also be used in other types of animations, such as button hover effects or menu transitions. Overall, the Gooey Effect is a fun and unique way to add a touch of whimsy and creativity to your website.
A Gooey Effect loader is an animation that uses a stretchy, elastic effect to create a fun and engaging loading experience. The animation involves a series of circles that expand and contract in a fluid, organic motion. This type of loader not only captures the user's attention but also adds an element of visual interest to the website.
In this blog post, we will guide you through the process of creating a Gooey Effect loader using HTML and CSS. We will provide step-by-step instructions and code snippets to make the process easy to follow. Whether you are a beginner or an experienced web developer, you will be able to follow along and create a Gooey Effect loader for your own website.
Let's start making an amazing loader with the Gooey effect using HTML, and CSS step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our loader.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The document begins with the declaration of the document type and the language used, which is English in this case.
The head section of the document contains the title of the page, the character set used, the viewport settings, and a link to an external stylesheet named "styles.css" which presumably contains the style definitions for the loader and other elements on the page.
The body section of the document contains the HTML elements that create the loader. There is a div element with a class of "blobs" that contains two child div elements. The first child div has the classes "blob", "four", and "move" and the second child div has the classes "blob" and "one". These classes are presumably used by the CSS styles defined in the external stylesheet to create the visual appearance of the loader.
The final element in the body section is an SVG element that defines a filter with an id of "goo". This filter applies a Gaussian blur effect to the SourceGraphic element (the element it is applied to), a color matrix transformation to adjust the colors, and then blends the result with the SourceGraphic element using the feBlend element. The result is a gooey effect that can be applied to elements on the page, such as the loader created in this document.
This is the basic structure of our loader indicator using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the laoder is in place, the next step is to add styling to the loader using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our gooey effect loader.
Below is a CSS code for creating an animated background with blobs and a moon.
The body selector sets the background color of the webpage to a light blue color, #BBDEFB. It also applies an animation called sky that lasts for 20 seconds and repeats infinitely in a linear fashion.
The .blobs selector is used to create the blobs. It applies a filter called goo which is defined in the HTML file using an SVG filter. It is fixed in position to cover the entire screen and has a class called one that is used to animate the moon.
The .one selector positions the moon in the center of the screen and applies an animation called moon. The moon animation lasts for 20 seconds and repeats infinitely in a linear fashion. It changes the background position of the moon image to give the impression of it moving across the sky.
The .four selector is used to create a larger blob with a number "4" in the center. It is positioned to the left of the screen and scaled down by 50%. It also applies an animation called loader that lasts for 20 seconds and repeats infinitely with an ease function. The loader animation moves the blob from the right side of the screen to the left and back again.
The @-webkit-keyframes selectors define the keyframes used in the animations. The loader animation moves the blob horizontally using the translate function and scales it down slightly. The moon animation changes the background position of the moon image to give the impression of it moving across the sky. The sky animation changes the background color of the webpage.
The .blob selector is used to style the individual blobs. It applies a gradient background that starts with white and transitions through shades of gray to a dark blue color. It is positioned in the center of the screen and has a circular shape. The norm class is used to add a slight blur effect to the blob.
This will give our gooey effect loader an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
background: #BBDEFB;
animation: sky 20s infinite linear;
}
.blobs{
filter:url('#goo');
position:fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.one {
left: 50%;
animation: moon 20s infinite linear;
}
.four {
left: calc(50% - 50px);
transform: scale(0.5);
animation: loader 20s infinite ease;
filter: blur(25px);
opacity: 1 !important;
background: rgba(255,255,255,1) !important;
}
@-webkit-keyframes loader {
0% {transform: translate(500px, 0px) scale(0.9);}
25% {transform: translate(45px, 0px) scale(0.9);}
50% {transform: translate(-375px, 0px) scale(0.9);}
75% {transform: translate(45px, 0px) scale(0.9);}
100% {transform: translate(500px, 0px) scale(0.9);}
}
@-webkit-keyframes moon {
0% {background-position: 100% 50%;}
17% {background-position: 50% 50%;}
25% {background-position: 50% 50%;}
50% {background-position: 0% 50%;}
67% {background-position: 50% 50%;}
75% {background-position: 50% 50%;}
100% {background-position: 100% 50%;}
}
@-webkit-keyframes sky {
0% {background: #BBDEFB;}
17.5% {background: #07202C;}
25% {background: #07202C;}
50% {background: #BBDEFB;}
67.5% {background: #07202C;}
75% {background: #07202C;}
100% {background: #BBDEFB;}
}
.blob{
position:fixed;
background: linear-gradient(90deg,#fff, #ECEFF1, #CFD8DC, #263238, #263238, #CFD8DC, #ECEFF1, #fff);
background-size: 1000% 1000%;
top:50%;
width:100px;
height:100px;
line-height:100px;
text-align:center;
color:white;
font-size:40px;
border-radius:100%;
margin-top:-50px;
margin-left:-50px;
}
.norm {
filter: blur(1px);
} Final Output:
Conclusion:
In conclusion, creating a Gooey Effect loader using HTML and CSS can greatly enhance the user experience on your website. This type of loading animation not only provides a visual cue that the website is loading, but also captures the user's attention and adds an element of visual interest to the website.
In this blog post, we have provided a step-by-step guide for creating a Gooey Effect loader, from creating the HTML structure to adding the necessary CSS styling.
As a web developer, it is important to pay attention to user experience and loading animations are a key element in this regard. We encourage you to experiment with different types of loaders and animations, including the Gooey Effect, to create a unique and engaging experience for your users.
By following our beginner-friendly guide, you now have the knowledge and tools to create your own Gooey Effect loader using HTML and CSS. We hope you found this blog post helpful and informative, and we look forward to seeing your creative implementations of the Gooey Effect in your web development projects.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
