Circle Progress Bar Using Html CSS and SVG | CSS Percentage Circle

[@AlejanroDelHierro]

If you want this to be more dynamic, use animation, like this: .box .percent svg circle:nth-child(2) { stroke-dashoffset: calc(440 - (440 *87) /100); stroke: #03a9f4; opacity: 10; animation: animate-circle 3s cubic-bezier(0,0.23,1,.1); } @keyframes animate-circle { 0% { opacity: 0; stroke-dashoffset: 440; } 30% { opacity: 0.30; stroke-dashoffset: 200; } 80% { opacity: 0.80; stroke-dashoffset: 100; } 100% { opacity: 10; } }

[@AndrewTSq]

This is the best channel for me to learn CSS. CSS and HTML was like a black magic for me, and ive watched different youtuberes tutorials, but I never understood a thing really. Then I found this channel, and things made sense :) I like that we all the time see the updates on the side.

[@XengShi]

Your are genious sir ,❣ I don't have words for you. Aap mahaan hain.....

[@thekokoserver]

thanks you just saved me from headache

[@m1ch3lr0m3r0]

4:59 "Put percent value here", the most obvious thing in the entire video is what gets the most explanation.

[@Mai-karunga-business]

Thank you ❤️

[@Marc1920x1080p]

Thank you so much for this!!

[@tinvo5369]

wow, this is an awesome video! thanks

[@IamManny777]

But that seems static, what's a way to make it dynamic so that its functional? I am not sure if it's possible to pass an arg into css but probably isn't best practice too ?

[@jumalley]

using js

[@zegracamasterelite]

Is completely normal pass args to css via classes binding in js, this change the dom and new styles can be applied, scss and front end frameworks also allow bind dinamic values in style

[@foxmulderqqs]

if you still here i can tell you how to turn dynamic

[@IamManny777]

@@foxmulderqqs sure please do, my front end css work isn't very good but would love to get better.

[@Shyrius]

@@foxmulderqqs can you tell me how to turn this to dynamic?

[@lakshminarayanan9099]

Excellent bro 👌🏻

[@rnahmed4635]

Zajallahu Khairan.

[@mohamedkhalilkhedhri9942]

Came excited left with depression I wish i achieve this lvl one day .. now , the only thing i know is how to do a background image xD

[@stefanienaiser3066]

Wow... it`s amazing.. what´s possible with only CSS! I like your videos... Maybe you can help me to fix a problem... I've made the progress circle according to your instruction... and it works very well on Edge-Browser... but not on firefox. Do you have any idea how to fix that? cheers stef

[@maskman4821]

this is awesome !!!

[@hodaelfi1941]

thank you!!

[@_praba]

if i give r = 100, what should i put for stroke-dasharray, stroke-dashoffset?

[@mi-skal6880]

the formula is 2*r*P. This should be your dasharray and offeset

[@mariannedeasis]

@@mi-skal6880 what is P?

[@satinderkumar2472]

Sir aap ko Web development me kitne salo experience hai please answer your works are awesome

[@anchalsrivastava9763]

Thank you 👏👏

[@westfield90]

Superb

[@jobs408]

How to make it dynamic?

[@sayidinaahmadalqososyi9770]

Add javascript, tinggal mainin di style percentnya via js

[@daidandy]

wow,good man

[@AaronLunaParrado]

The best!

formule circle svg= PI*2*r = range

[@harshvaghanii]

Thanks man

[@codewithdash833]

good smooth music bro can you tell me what is music name ?

[@zyishai]

Just... thank you!!

[@davidmontoya2787]

Me dio de la siguiente forma: stroke-dasharray: 150; stroke-dashoffset: 150; stroke-dashoffset: calc(150 - (150 * 70) / 100);

[@alexalannunes]

👏👏👏👏👏👏 very good awesome But I did not understand this stroke-dasharray and dashoffset yet. I've read on several sites

[@ZariDV]

Amazing! Thank you for this. It was just the right tutorial for the final touch I needed on a section my project. It was a nice base for me to take apart, put together and play around with until I could understand the code fully and implement it.

[@crazycode2578]

Thanks

[@balaji-venkatraman]

This looks perfect but i wanted to increase and decrease the size of Progress bar what are the values i need to change?

[@xhvsh]

stroke-dashoffset: calc(440 - (440 * X) / 100); just change the "X" to the value in %

[@shoaib-je3ny]

Bro your android app is not showing on Playstore

[@shoaib-je3ny]

Irshad bhai android app q nhi a raha hai aap ka Playstore par

[@rootzxc3626]

Can you do it pure CSS only ?

[@_praba]

how can i start the progress to move from top, instead of right???/

[@seifcool]

I have the same question.

[@Str4ky]

Find a way to do it, in the ".box .percent" add a "transform: rotate(-90deg);" to rotate the whole circle and in the ".box .percent .number h2" add a "transform: rotate(90deg);" to put back the number to normal

[@romuloalves9349]

Ótimo vídeo parabéns 👍.

[@YahyaRahimov]

Usin svg callin pure css 🥴🤪🙃

[@sovonic322]

เยี่ยมยอด​

[@BrightCode]

You have already done this before 😑😑 I did the same on my channel but mine I made it so that you will be the one to input the value yourself and the percentage will change

[@OnlineTutorialsYT]

Yes...but this UI is different

[@unknown-bx8my]

plz make how to download canvas image tutoriols😢 why you don't apply my request😭

[@YahyaRahimov]

Yeah but ui is different luuul xD

[@BrightCode]

@@YahyaRahimov 🤷🤷

[@unknown-bx8my]

only color is differnet

[@hossainchowdhury9992]

Why you use the link on the top of css?????

[@BharanidharanB-ti5ct]

How to make the svg responsive?

[@Rj_Punio]

it's svg the S stands for "scalable" so just adapt the size in your css with a media query and it will adapt ;)

[@leonardofibonacci6574]

Hou have to use viewbox attribute. In this case for example viewBox="-10 -10 160 160" Later you can modify the svg dimension with media queries and the circles automatically adapt.

[@Deus-lo-Vuilt]

ty

[@umairathar816]

i am looking for source file!! how i get ???

[@FRANCHISCO]

too bad why because no source code first comment!!!

[@OnlineTutorialsYT]

If you want to learn something then try to write code himself

[@OnlineTutorialsYT]

If you want only source code then join our channel membership...

[@dawidepl7807]

Could you make tutorial on wave shapes?

[@OnlineTutorialsYT]

Ok bro

[@dawidepl7807]

@@OnlineTutorialsYT Thanks!

[@dawidepl7807]

@@CoolScratcher I know, but it's better to make own one, than copy, don't you think?

[@CoolScratcher]

@@dawidepl7807 Using the GUI of getwaves, you are technically making your own...

[@dawidepl7807]

@@CoolScratcher no

[@dundiramesh4086]

This video is nice tq broo. Can you make a video of photo slider with different animations plzzz it helps me a lot. Plzz broo

[@rs-vo1po]

i did so, with js. + transfom.rotate

[@unknown-bx8my]

please i need how to download canvas image turoriols plz plz make it😢😭

[@khushbook2260]

Sir please make a project of css or jquary to make ben 10 omnitrix effect i request you

[@hariommourya2436]

Hey plz make anything satisfying

[@OnlineTutorialsYT]

Ok bro

[@umairathar816]

where is the source code?

[@i_am_a_real_cat1443]

listen to 1.75 speed for remix

[@darkspeed62]

This is so not worth the effrot

[@imtiazahmedbhuiya3068]

superb

[@وليدالنادي-ح3ق]

Thanks