How to create a skill / progress bar with JavaScript

Skill Bar

With the help of the JavaScript programming language, we can easily create skillbar animations. The skill bar shows the skills we have in the form of bars and the tooltip display shows the number of skills in the form of percentages. How do you do it then? Open your computer and do some of the simple steps below to use JavaScript to animation the skill bar.

Tutorials

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

          Cara Membuat Skill Bar                    
HTML
CSS
Javascript

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named SkillBar – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / SkillBar.

4. Enter the following CSS code to clean up and display the Skills Bar.

body{  margin: 0;  padding: 0;  font-family: 'Open Sans',sans-serif;  min-height: 100vh;  display: flex;  align-items: center;  justify-content: center;  background: #f1f1f1;}.skills{  width: 100%;  max-width: 600px;  padding: 0 20px;}.skill-name{  font-size: 18px;  font-weight: 700;  text-transform: uppercase;  margin: 20px 0;}.skill-bar{  height: 20px;  background: #cacaca;  border-radius: 8px;}.skill-per{  height: 20px;  background-color: #32cd32;  border-radius: 8px;  width: 0;  transition: 1s linear;  position: relative;}.skill-per::before{  content: attr(per);  position: absolute;  padding: 4px 6px;  background-color: #000;  color: #fff;  font-size: 12px;  border-radius: 4px;  top: -35px;  right: 0;  transform: translateX(50%);}.skill-per::after{  content: '';  position: absolute;  width: 10px;  height: 10px;  background-color: #000;  top: -16px;  right: 0;  transform: translateX(50%) rotate(45deg);  border-radius: 2px;}

Save the CSS code in the xampplite folder – htdocs – create a new folder named SkillBar – Save the CSS code under the name style.css.

5. Reload the URL address: http: // localhost / SkillBar. The skill bar was initially showing, but the skill bar did not show the value.

6. To make the score appear in the Skills Bar, paste the JavaScript code into the index.html file. Enter JavaScript code .

    

Don’t forget Ctrl + S.

7. Reload the URL address: http: // localhost / SkillBar. The skill bar display with tooltip display shows the number of skills in percent.

8. Done. Very interesting, isn’t it?

Hence the explanation of the tutorial ‘How to create a skill bar with JavaScript’. Much luck.






Leave a Reply

Your email address will not be published.