This content originally appeared on DEV Community and was authored by CristoferK
Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working!
This content originally appeared on DEV Community and was authored by CristoferK
CristoferK | Sciencx (2021-04-19T16:36:55+00:00) Simple CSS Animation!. Retrieved from https://www.scien.cx/2021/04/19/simple-css-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.