Animated Progress Bar in CSS
With the power of CSS transitions
Ferenc Almasi • 
2021 November 11 • 
10 min readLearn how you can make a progress bar animation entirely in CSS, with the help of JavaScript to also track progress.
CSS Animations Roadmap Other roadmaps
Learn how to build CSS animations with our guided roadmap📚 6 lessons • 📖 0.60 hours read in total
CSS animations are a powerful technique that enable the transformation and movement of HTML elements, enhancing user experience by adding visually engaging content. It allows us to create captivating interactive elements, improve usability and make websites more engaging and immersive overall.
This roadmap will guide you through some commonly used CSS animations that you can implement yourself in your project. If you are new to CSS, be sure to take a look at our CSS tutorials first. If you want to explore more tutorials without a direction, you can filter for the tutorials you are interested in on our search page.
What is covered?
Animation keyframes- Transitions and transforms
- Working with opacity
- Animation timings
- Timing functions (easings)
- Scale and rotation
Day and Night Toggle Switch
With CSS and a bit of vanilla JavascriptFerenc Almasi • 2021 November 11 • 8 min readLearn how you can make an animated day and night toggle switch with CSS to switch between a light and a dark theme.
How to 3D Flip Images in CSS
Flipping images with CSS transformsFerenc Almasi • 2022 November 04 • 3 min readLearn how you can 3D flip images with CSS with the help of transform rules.
Material Circle Loader
Animated loader created with SVG and pure CSSFerenc Almasi • 2022 July 05 • 5 min readLearn how you can create a material circle loader in pure CSS with SVG. Full source code is also provided for the tutorial.
Skeleton Loaders in CSS
Optimize your perceived performanceFerenc Almasi • 2021 November 11 • 5 min readA skeleton loader can act as a placeholder for information that is still loading. Learn how you can create and animate them in CSS.
Jumping Box Animation
Exploring CSS AnimationsFerenc Almasi • 2021 November 11 • 5 min readLearn how you can use CSS animation keyframes to create striking CTAs in the form of a jumping treasure box.
🗺️ Related roadmaps
Continue learning
HTML Roadmap
Learn how to work with HTML using our guided roadmapThe roadmap for guiding you through the fundamentals of working with HTML. Learn how you can write semantic, SEO-friendly HTML documents.
JavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap takes you through the essential concepts in JavaScript, from basic syntax to advanced concepts like functional and asynchronous programming.
📚 More Webtips
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
CSS - The Complete Guide (including Flexbox, Grid and Sass)
Including Flexbox, Grid, and Sass
Whether you're learning CSS for the first time or brushing up on your CSS skills and diving even deeper, this course is for you. Every web developer has to know CSS.
The HTML & CSS Bootcamp
From Zero to Expert!
This course covers flexbox, CSS grid, animations, responsive design, and much more! You will find tons of exercises & projects inside this course.
The Creative HTML5 & CSS3 Course
Build Awesome Websites
Learn HTML5 and CSS3 by creating three amazing, well-designed and animated websites from scratch.
Recommended
How to Create a Configurable Tabs Component in React
With TypeScript and HTML content support
Ferenc Almasi • 2024 February 23 • 11 min read • React v18.2
How to Create a Responsive Timeline Component in React
With the help of CSS pseudo elements
Ferenc Almasi • 2024 February 13 • 10 min read • React v18.2
How to Create Dynamic Routes in Astro
Generating different pages based on server-side data
Ferenc Almasi • 2024 January 16 • 9 min read