Animated Skills Bars Using HTML CSS & Jquery

◘ Code Editor: VS Code

[peter-wallacemathebula]

Hi how would you activate animation when the content scrolls into view instead of refreshing the page to activate the animation?

[qpdwocl]

This is awesome. Could you please do a video on making an entire website in a way you would do it? I just want to see how the finishing product would look, would be really cool to see.

[babaljeet-singh]

Hey how can we make animation when we scroll the page down to progress section ?

[LabhamJain]

I Can make This Thing in Pure CSS No JS or JQuery BTW Nice Idea I'll Use This In My Portfolio

[lona]

Dark Code, you are the best! 😍❤
I've learnt so much from your videos. Thank you very much!! ❤❤

[thecodecatalyst]

Great work! As always very innovative. Try using vanilla JS instead of jQuery. Thanks!

[dineshchandra]

Bro please tell the code editor in which result is shown directly like in your pc please please

[simple_coders]

The tutorial is amazing....
is this possible to change the percentage number with indicator.

[sumitkesarvani]

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: #0fbcf9;
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;
}

[blakwhait]

Hello my friend, can I know how your live view works in the application, and not on Google browser

[hjax]

Hi Darkcode, can you make a videk where you create a draggable dialog form?

[brutaljai]

Bro can u make a video on how to make a mini gaming website??

[Everythingever]

Which editor did you use your video. Animated login form using only html & css

[LundyPrd]

Darkcode, i learn html and css in Sololearn, what do you think about Sololearn?

[tienkhanhnguyen]

How to the browser auto change when you coding?

[istotazyjaca]

Hi. Can you show how to make interesting "dealing cards" animation?

[sfunny]

DARKCODE in this video which software you use and how to show HTML preview.

[RahulYadav-ygzh]

How to make thumbnail like you please 🙏🙏

[omkaratyalkar]

next video plz customized phone cover use html, css, jq /js

[osamaali]

Please tell me all song name in this video