Glowing Cube loader using HTML & CSS Last Updated : 08 Jun, 2023 Comments Improve Suggest changes Like Article Like Report Glowing cube loader can be created using HTML and CSS. We'll use HTML to create the structure and some CSS properties. The loader is the part of an operating system that is responsible for loading programs and libraries. It is one of the essential stages in the process of starting a program, as it places programs into memory and prepares them for execution. So we will create a circle loader using HTML and CSS properties. HTML Code: In this section, we will design the basic structure of the code. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Glowing cube loading</title> <link rel="stylesheet" href='style.css'> </head> <body> <h1>Loading GeeksforGeeks...</h1> <div class="loading"> <span></span> </div> </body> </html> CSS Code: In this section, we will use some CSS property to design a Glowing Cube. We’ll use @keyframes which specifies animation code.The animation is created by gradually changing from one set of CSS styles to another. The style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. We can change the set of CSS styles many times. The syntax for @keyframes is: @keyframes animationname {keyframes-selector {css-styles;}} css body { background: black; } h1 { margin-top: 300px; text-align: center; color: darkgreen; } .loading { width: 50px; height: 50px; margin: 100px auto; position: relative; } .loading span { display: block; position: absolute; bottom: 0; background: yellowgreen; width: 100%; height: 100%; border-radius: 10px; animation: loading 1.5s infinite ease-in-out; } @keyframes loading { 0% { transform: rotate(0deg); background: yellow; box-shadow: 0 0 10px black, 0 0 10px 5px green; } 25% { transform: rotate(80deg); box-shadow: 0 0 10px #9966ff, 0 0 10px 5px black, 0 0 10px 5px yellow; } 100% { transform: rotate(0deg); } } Complete Code: It is the combination of the above two code sections, the CSS code is added internally in the HTML code by using style tag. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Glowing cube loading</title> <style> body { background: black; } h1 { margin-top: 300px; text-align: center; color: darkgreen; } .loading { width: 50px; height: 50px; margin: 100px auto; position: relative; } .loading span { display: block; position: absolute; bottom: 0; background: yellowgreen; width: 100%; height: 100%; border-radius: 10px; animation: loading 1.5s infinite ease-in-out; } @keyframes loading { 0% { transform: rotate(0deg); background: yellow; box-shadow: 0 0 10px black, 0 0 10px 5px green; } 25% { transform: rotate(80deg); box-shadow: 0 0 10px #9966ff, 0 0 10px 5px black, 0 0 10px 5px yellow; } 100% { transform: rotate(0deg); } } </style> </head> <body> <h1>Loading GeeksforGeeks...</h1> <div class="loading"> <span></span> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Loading Text Animation Effect using CSS N nehaahlawat Follow Improve Article Tags : Web Technologies Write From Home Web Templates CSS-Properties Similar Reads Design Animated Google Loader using HTML and CSS The Google Loader consists of 4 circles with blue, red, yellow, and green colors. You can easily create them using HTML and CSS, and animate them to move the same as in the final output. The animation is just translating the circle in the Y axis with .25s time delay. For non-stop and fluid animation 2 min read Apply Glowing Effect to the Image using HTML and CSS While surfing most of the websites you have seen some special effects which can be seen on various images while putting your cursor over them. So, in this article, we are going to implement the same. We can use such images as a card for our website. In this article, you’re going to learn how to app 2 min read Create a Glowing text shadow using HTML and CSS To create a glowing text-shadow, we will use HTML to create the structure and CSS for the styling of the text. With the help of CSS, we can add shadows to text. HTML Code: In this section, we will design the basic structure of the code. html <!DOCTYPE html> <html lang="en"> <head> 2 min read Loading Text Animation Effect using CSS There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim 3 min read How to Create Animated Loader Ring using HTML and CSS? An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use 2 min read How to create windows loading effect using HTML and CSS ? In this article, we are going to create a window loading effect before the lock screen appears using HTML and CSS. Glimpse of the Windows Loading Effect: Approach: Create an HTML file that contains HTML div in which we are giving the loader effect.Then we create 5 span elements which are used for c 4 min read Like