Yogesh Chauhan's Blog

Add animation to your skills bar using CSS

in CSS on July 31, 2021

Similar Post

Learn to create your skill bar using CSS

Let’s add some basic animation to the skills bar from the post above. Also, let’s polish elements with some styles too.

Let’s discuss a few CSS rules that will be used to add animation.

This code will create an animation using @keyframes that you can use for containers.

Using scaleX you can scale the element on x-axis which is what we want for the skill bars.


@keyframes fill {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

Also, you need to set the transform-origin property to left. It will force the animation to start from left.


transform-origin: left;

Demo


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
2 Ways We Can Write Multiple Line Commands in PHPPHPCurrencyPipe in Angular 9 with ExamplesAngularSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscellaneousHow Do You Make a Private VPN?MiscellaneousAggregate Functions Examples in Postgres for BeginnersPostgresHow to modify the latest post array using get_posts() in WordPress?WordPressHow to create a simple tab interaction using CSS?CSSDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSuser_can vs current_user_can in WordPressWordPressHow to implement NSNumberFormatter in Swift for currency?SwiftHow to create a full screen loader using CSS and JavaScript?CSSHow to create a function in SCSS (Sass)?SCSS