What are CSS3 Animations?
CSS3 animations are quite powerful and many unimaginable animations can be created using CSS3. With a little knowledge of CSS3 one can create simple animations, and an in-depth knowledge of CSS3 can open doors for creating some really complex animations. We are all quite familiar with the loader shown on any website while the page is loading. The most commonly used ways to display loader are a spinner (a GIF image), loading text or a progress bar. CSS3 can take this to another level and can give a whole new user experience to this loading process with different, neat, simple, and unique animations.
This post is a collection of 15 purely CSS3-based loading animations which will simply bring a “WOW” factor to your page. These loading animations are different and unique from each other in terms of animation, design, and behavior. These loading animations play with loading text, wave effects, circles, squares, and many other objects. Another advantage is that you can easily modify the design and colors to match your website’s color guidelines. Enjoy…
Please note that all these examples are taken from Codepen.
1. CSS loading animation by Max
https://codepen.io/MyXoToD/pen/Djnbq
This wave like loading animation is quite stunning! This animation is eye-catching and very neatly done. It uses horizontal lines with some gradient effects to generate a wave. The CSS3 code makes use of the @keyframe rule which specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
See the Pen CSS3 Loading Animation by Max (@MyXoToD) on CodePen.
2. Colorful circles turning into Square loading animation
https://codepen.io/MyXoToD/pen/zbgAm
This loading animation uses 8 colored circles that turn into a square and then back to a circle to show the loading process. The colors used for the animations are quite vibrant and you can easily change them to match with your website theme. The CSS code uses @keyframe rules, plays with the border radius, scales them and finally rotates them to create this effect. See the Pen CSS3 Loading Animation by Max (@MyXoToD) on CodePen.
3. CSS loading animation by patrikhjelm
https://codepen.io/patrikhjelm/pen/hItqn
This CSS3-based loading animation pen uses seven different colored dots to create a loading effect. The movement of these dots creates an animation where you would feel like a snake is moving. The CSS code sets different positions for each dot and then animates them using transform properties to create a continuous animation. The dots move from left to right at different positions to create a beautiful effect. The CSS3 code uses the translate property to change the position of dots. See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.
4. Wavy dot style CSS loading animation
https://codepen.io/rajarju/pen/pFrIt
This pen is another classic example of using dots to create loading animations. The dots jump slightly one after the other to create a horizontal wave and gradually change their color also. While jumping, the dots change their color and revert while coming down. The CSS3 implementation is quite easy to understand! The CSS3 uses the translate property to make the dots jump and at the same time change their color. See the Pen CSS3 Loading Animation by Arjun Raj (@rajarju) on CodePen.
5. 10 different CSS3 loading animation by Manoz
https://codepen.io/Manoz/pen/pydxK
This pen demonstrates 10 different ways of showing the loading animation. The loading effects are created using animated bars, circles, lines, squares, loading spinners and loading text. The CSS3 code uses properties like transform, rotate and scale to generate loading effects. You can choose any of them as per your requirement and easily incorporate them with a few lines of CSS3 code. See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.6. Circle turning into a planet style loading animation https://codepen.io/isuttell/pen/RNqqWE This simple and neatly-created loading animation turns a medium size black color circle into a planet and then back to a circle in a continuous manner. The animation uses 2 circle objects where one appears after every few seconds and the other circle flips itself and shrinks it to create a planet effect. The CSS code is written in SCSS, so the code takes advantage of SCSS features like @mixin, @include and loops. See the Pen CSS3 Loading Animation by Max (@MyXoToD) on CodePen.
7. Little waves loader animation
https://codepen.io/terotic/pen/pBolv
It’s a cute little animation which creates a small wave on the screen. The white color lines simply turn into a tiny wave to show a loading process. There is also “loading” text displayed below the wave. This can be an ideal choice, for example, for the website of any beach resorts or cafés near beaches to show loading on their website. The code is based on SCSS and uses CSS3 @keyframe rules along with border radius property. See the Pen Little waves loader animation by Tero Tikkanen (@terotic) on CodePen.8. Strange loading animation https://codepen.io/thecuriousdev/pen/pCKhF This is a quite familiar animation and can remind you of your childhood. A ball rolls inside a rectangular shaped object which itself flips its position upside down, which gives animation where the ball falls from the top. An ideal choice for games, movies, or funky websites. The CSS code sets a different position at every 10% to create this animation. See the Pen CSS3 Loading Animation by The Curious Developer (@thecuriousdev) on CodePen.
9. Square Blink Animation
https://codepen.io/trungk18/pen/yJggrL
This pen shows 3 different types of square blink animations. In this first animation, there are 4 squares where one blinks after the other. In the second animation, a small square blinks one after the other to create a big square, while the third animation simply shrinks and zooms the two small squares. The CSS code changes the opacity of the squares and uses the translate property to change their positions. See the Pen CSS3 Loading – Square Blink by Vo Tuan Trung (@trungk18) on CodePen.10. Animated loading text https://codepen.io/irshad1990/pen/GrmjmX This pen shows “Loading” text in an animated way. The text initially appears in grey color and later uses 3D effects to zoom every single letter in yellow color and to complete the animation, the text becomes grey again. The CSS code animates every single letter and adds an animation delay to it. It also uses @keyframe rules to animate the text at the 0%, 25%, and 100% positions. See the Pen Css3 Loading effect by Muhammad Irshad (@irshad1990) on CodePen.
11. Beautiful simple CSS3 Loading spinner
https://codepen.io/NitrodeXXer/pen/YxrQer
This is a beautifully-designed loading spinner having loading text in the center and rounded, colorful lines rotating 360 degrees around the text to create a closed circle. The lines’ rotation starts slowly and then moves at a quick speed to complete the circle. The CSS code is also very simple and easy to understand. It uses @keyframe rules and rotate properties to rotate the lines. See the Pen Most beautiful simple CSS3 Loading spinner by -.VLG (@NitrodeXXer) on CodePen.12. Round clock-style loading animation https://codepen.io/jing0908/pen/ytmxl This is a round clock-style loading animation where the clock rotates 360 degrees and inside the circle. There is another animation which connects the circle dots to each other. This animation is also based on SCSS and uses the advanced features of SCSS to create this awesome animation in CSS. It uses the transform property to rotate the circle and connect the dots. See the Pen css3 loading by jing0908 (@jing0908) on CodePen.
13. 3D Loading text
https://codepen.io/el3zahaby/pen/ryEEdx
This loading animation animates the “Loading” text in a 3D effect. The “Loading” text is placed inside a rounded rectangle and every letter also has a border around it. The code zooms-in and zooms-out every single letter for a few milliseconds to give it a 3D effect and in turn also creates a wave like effect. It uses CSS3 @keyframe rule to put 3D effects using the scale3D property. It scales out the letters after certain percentages to create that zoom-in and zoom-out effect. See the Pen Loading page by Abdulrhman El – zahaby (@el3zahaby) on CodePen.14. Dots moving out of the screen https://codepen.io/curthusting/pen/Bswpe This is a very simple and interesting concept to show loading. There are 7 white colored small sized dots, which first push each other and then push out of the screen from the right side and come back again from the left side of the screen. All this happens at a very quick speed, which makes it look good. The CSS code defines 7 different @keyframe rules and then uses those rules for every circle to get this effect. See the Pen css3 Loading animation by Curt Husting (@curthusting) on CodePen.
15. Juggling balls loading effect
https://codepen.io/tgideas/pen/qmcyH
You must have seen jugglers doing juggling with three or more balls? This is a similar effect created with CSS3 where 5 colored balls juggle automatically. The basic idea is to change the position of the balls and when all the balls changes their position at the same time, the juggling effect gets created. The CSS uses after and before selectors for each ball and uses different @keyframe rules to scale, translate on the x and y axis, and employ the fade-in effect. See the Pen HTML5/CSS3 Juggling balls Loading effect by tgideas (@tgideas) on CodePen.
Conclusion
These are some unique and different ways of showing loading animations on your website. These CSS3-based loading animations are lightweight due to no dependency on JavaScript or jQuery to manipulate the animation. Since they are purely based on CSS3, the design and color can be easily modified to fit your website theme.