The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS.
HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some span tags inside of it.
CSS Code: In this section first we will create the dots structure using some basic CSS properties and then in order to create the animation we will use @keyframes rule and use the transformX() function to produce the desired effect.
Complete Code: It is the combination of the above two code sections.
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Animation Loading Bar using CSS ?
- Loading Text Animation Effect using CSS
- How to show Page Loading div until the page has finished loading?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to Create Border Animation using CSS ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to create text-fill animation using CSS ?
- How to select html element using ID in jQuery when ID contains a dot character ?
- Rubber Band Text animation using HTML and CSS
- Text Animation with changing the color of the text using HTML & CSS
- How to create text stagger animation using TypographyMotion plugin ?
- jQuery | Vertical Dot Navigation Plugin
- How to design lazy loading of images/videos for mobiles using jQuery Plugin?
- Cartoon animation loader using CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.