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.....

[@m1ch3lr0m3r0]

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

[@thekokoserver]

thanks you just saved me from headache

[@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 👌🏻

[@davidmontoya2787]

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

[@_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?

[@anchalsrivastava9763]

Thank you 👏👏

[@maskman4821]

this is awesome !!!

[@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

[@hodaelfi1941]

thank you!!

[@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

[@daidandy]

wow,good man

[@rnahmed4635]

Zajallahu Khairan.

[@AaronLunaParrado]

The best!

[@harshvaghanii]

Thanks man

[@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

[@alexalannunes]

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

[@zyishai]

Just... thank you!!

[@rootzxc3626]

Can you do it pure CSS only ?

[@codewithdash833]

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

[@jobs408]

How to make it dynamic?

[@sayidinaahmadalqososyi9770]

Add javascript, tinggal mainin di style percentnya via js

[@romuloalves9349]

Ótimo vídeo parabéns 👍.

[@satinderkumar2472]

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

[@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 %

[@westfield90]

Superb

[@sovonic322]

เยี่ยมยอด​

[@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

[@crazycode2578]

Thanks

formule circle svg= PI*2*r = range

[@hossainchowdhury9992]

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

[@_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

[@Deus-lo-Vuilt]

ty

[@YahyaRahimov]

Usin svg callin pure css 🥴🤪🙃

[@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...

[@rs-vo1po]

i did so, with js. + transfom.rotate

[@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 ;)

[@nicolaciaco]

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.

[@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.

[@khushbook2260]

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

[@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

[@unknown-bx8my]

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

[@umairathar816]

where is the source code?

[@hariommourya2436]

Hey plz make anything satisfying

[@OnlineTutorialsYT]

Ok bro

[@i_am_a_real_cat1443]

listen to 1.75 speed for remix

[@darkspeed62]

This is so not worth the effrot

[@imtiazahmedbhuiya3068]

superb

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

Thanks