Website Programming: How to Make Glowing Loading Animation Pure HTML and CSS in Responsive Way

 

      Bandung, Indonesia, October 19, 2020, 14:56PM-When a visitor clicks on a button or link on your website, they expect to see feedback, right? This animation lets the user know that loading is relevant to the information. But if nothing happens then it's just an animation. So what is this loading Animation on the website? Just like the name, it's an animation that responds when someone goes on your website, like live wallpaper, it shows animation like makes waiting. 

    There are many different types of loading but supported by visitors animation has to use some effect so visitors won't bored to see the animation. Do you know those loading animations also known as loading spinners or infinite loop animation? Just like gif file the animation will do the action again and again until you close the website and do you know that in this blog there's another article which explains loading animation but in different type, different effect, and different coding? Curious? Go and check it out on my blog.

HTML

First, we have to adjust the first section of HTML (Head). In the picture, we used 3 main elements :

1. <meta charset = "UTF-8"> this code contains the flexibility of programming language, so the website can accommodate pages in a mixture of other languages.

2. <meta name = "viewport" content="width=device-width, initial-scale=1.0"> in this code consist of 2 main code. The first, viewport (viewport means the flexibility of the website, so whenever you open the website in different screen size, the website can adjust the proximity of the screen size). the second is content="width=device-width, initial-scale=1.0"> (using this the part to adjust the set of initial zoom level when the page, basically with those codes a website can be mobile friendly). To put in simply, those codes are a responsive coding circle.

3.<link rel = "stylesheet" href = "style.css">, this code contains the external link, has simple function to connect HTML to other file (usually Bootstrap, CSS and JavaScript)

This is the body, the place where you put content on your website. In the picture, I put many <span> inside (there're 20 in total) the function of those codes is to make the dot on the loading element using --I as the labeling to connect to CSS.

CSS ( style.css ) external

In the first section of CSS, we directly adjust the common settings on the body and started making the hue gradient. I used animation: animate(the label) in 10s and will be running with a linear infinite type(loop). Also, I used @keyframes to set the timeline from 0%(start frame) with 0 deg color to 100%(stop frame) with 360 deg color(so the color will changes).

In this part, we start to adjust the margin, size, and the transform of the loading. By using the transform: rotate(calc(18deg * var(--i))); means I'm going to make it rotate with calculation 18 degrees of the axis using a variable named --i (we made his in HTML)

 This is the advance of the coloring in the first section, in this part we will play with box-shadow so when the color changes the color will spread around the circle, like a candle in the night. Also, I used the @keyframes, these keyframes are used to maintain the circle at first for 2 seconds before it starts to run.

Okay, that's all for this lesson hope you enjoyed the article and improve the lesson so you can make many other animations on your website. Also, I recommended using Visual Studio Code as the software for the website, because there're many helpful features like automatic coloring codes.

That's all for the lesson
Thank you for reading my blog and see you in the next article