Water Wave Quick Loading Animation Effects HTML & Pure CSS
In This Blog, This code creates a quick loading animation effect using HTML and CSS. The HTML code includes a div element with the class “loader” which will be use to display the loading animation.
In the CSS code, the universal selector (*), sets the margin, padding and box-sizing properties to 0, which helps ensure that the page layout is consistent across different browsers. The body element is use to display flex, which allows for easy centering of the “loader” div using the justify-content and align-items properties. The minimum height of the body is use to 100vh, ensuring that the entire viewport is cover by the background color (#000).
The “loader” div is style with a width and height of 200px, a background color of #2196f3 (a blue shade), and a border-radius of 50%, which gives it a circular shape. The overflow property is use to hidden, so that anything outside the div is not visible. The box-shadow property adds a subtle inner shadow effect.
Two pseudo-elements, “::before” and “::after” are add to the “loader” div using the content property. Both of these elements have the same size as the “loader” div and are position above it using the top and left properties. They are both use to have a border-radius of 40%, a background color of #111 (a dark shade of gray), and an opacity of less than 1. The “::before” pseudo-element has a longer animation time of 12s, while the “::after” pseudo-element has a shorter animation time of 5s. The animations are define using the keyframes rule, which specifies how the element should be animate over time.
When the user hovers over the “loader” div, the “::before” and “::after” pseudo-elements move upwards by changing their top property, which creates the effect of the animation speeding up.
Video Tutorial of Quick Loading Animation
To see a live demonstration of the Quick Loading Animation, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You may like this:
- Colorful Rain Animation Effects
- Draggable Slider Tab
- Facebook Post Card Clone
- Random Color Palette Generator
- Sticky Navbar With Parallax Effect
- Text To Speech Converter
- Word Counter
- Working Google Search Engine
Quick Loading Animation
HTML:
Create a new file with the name “index.html
” and add the provided code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Quick Loading Animation Effects</title> </head> <body> <div class="loader"></div> </body> </html>
The HTML code is a simple web page that includes a “loader” div element with a class of “loader”. It uses basic HTML structure with head and body sections. The head section contains meta tags for character set, compatibility mode, and viewport, as well as a title element for the page. The CSS for the loader animation is import from an external stylesheet, “style.css”. The loader div uses CSS properties for positioning, sizing, and animation to create a visually pleasing loading animation effect.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .loader{ position: relative; width: 200px; height: 200px; background: #2196f3; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 50px rgba(0, 0, 0, 1); } .loader::before{ content: ''; position: absolute; top: -150%; left: -50%; width: 200%; height: 200%; border-radius: 40%; background: #111; opacity: 0.8; animation: loader 12s linear infinite; transition: 2s; } .loader::after{ content: ''; position: absolute; top: -150%; left: -50%; width: 200%; height: 200%; border-radius: 40%; background: #111; opacity: 0.9; animation: loader2 5s linear infinite; transition: 2s; } .loader:hover::before, .loader:hover::after{ top: -180%; } @keyframes loader{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes loader2{ 0%{ transform: rotate(360deg); } 100%{ transform: rotate(0deg); } }
The CSS code defines the styling and animation for the “loader” div element in the HTML code. The “*” selector is use to apply margin, padding, and box-sizing properties to all elements on the page. The “body” selector centers the loader div using flexbox and sets a black background. The “loader” selector defines the position, size, background color, border radius, box shadow, and overflow properties of the loader div. The “::before” and “::after” pseudo-elements are use to create two overlapping circle shapes that animate in a spinning motion using the “loader” and “loader2” keyframes. The “transition” property is use to create a smooth animation effect. Finally, the “hover” pseudo-selector is use to adjust the position of the circle shapes and create an additional animation effect when the mouse hovers over the loader element.
Summary:
This code creates a quick loading animation effect using HTML and CSS. The HTML file includes a simple structure with a loader div element, while the CSS file contains styling properties for the body, loader, and pseudo-elements before and after. The loader’s size, background, border radius, and box shadow properties are define, and two pseudo-elements are use to create the animation effect. The loader uses keyframe animation with two different durations to create a spinning and pulsing effect. The animation is trigger on page load, and the pseudo-elements transition to an increased position on hover, creating a dynamic and responsive effect. Overall, this code creates a visually appealing loading animation effect that can be easily add to any webpage.