Last Updated September 14th, 2019
How to create an Android Style Loading Indicator with CSS
The Android loading indicator as seen on mobile applications is one of the simplest (in its design) and most recognized loading indicators in UI designs.
With lots of loading icon styles to choose from (check out https://loading.io), I still find the Android loading style more appealing and complementary in my designs.
Besides, using only CSS ensures that your website doesn’t make extra HTTP requests for loading gifs which is a good thing.
In this tutorial, I’d be showing you how easy it is to implement an Android loading icon or indicator in your website projects using only the :before and :after pseudo-elements and CSS keyframe animation.
We will only require two files for this demo just to keep things very simple. With your favourite code editor, create two files namely index.html and main.css then follow along.
#index.html <html> <head> <meta charset="UTF-8"> <title>Android Loading Icon</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="wrapper"> ... </div> </body> </html>
This forms the basic structure of our index.html file.
Now moving on the fun part of this tutorial, open your main.css file and copy and paste the code below.
We can now add the .is-loading class to the .wrapper div or any element of our choice to indicate a loading activity.
You can also customize the loading icon by fiddling with the CSS properties such as the size, border width, color and animation speed.
Hope you found this helpful? If you have any questions, please feel free to ask in the comment section below.