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.
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
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.
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 ?
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
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
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
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.
![ปฏิเสธไม่ไหว (Crush on you) - LIPTA feat. No One Else [TEASER MV]](http://i.ytimg.com/vi/VC689EgdSIw/mqdefault.jpg)
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;
}
}
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.
Your are genious sir ,❣ I don't have words for you.
Aap mahaan hain.....
thanks you just saved me from headache
4:59 "Put percent value here", the most obvious thing in the entire video is what gets the most explanation.
formule circle svg= PI*2*r = range
Thank you ❤️
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
Thank you so much for this!!
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
Zajallahu Khairan.
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.
wow, this is an awesome video! thanks
Excellent bro 👌🏻
Sir aap ko Web development me kitne salo experience hai please answer your works are awesome
thank you!!
Thank you 👏👏
👏👏👏👏👏👏 very good awesome
But I did not understand this stroke-dasharray and dashoffset yet.
I've read on several sites
if i give r = 100, what should i put for stroke-dasharray, stroke-dashoffset?
the formula is 2*r*P. This should be your dasharray and offeset
@@mi-skal6880 what is P?
this is awesome !!!
The best!
Superb
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 ?
using js
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
if you still here i can tell you how to turn dynamic
@@foxmulderqqs sure please do, my front end css work isn't very good but would love to get better.
@@foxmulderqqs can you tell me how to turn this to dynamic?
Thanks man
wow,good man
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
Yes...but this UI is different
plz make how to download canvas image tutoriols😢
why you don't apply my request😭
Yeah but ui is different luuul xD
@@YahyaRahimov 🤷🤷
only color is differnet
เยี่ยมยอด
Me dio de la siguiente forma:
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-dashoffset: calc(150 - (150 * 70) / 100);
Just... thank you!!
good smooth music bro can you tell me what is music name ?
Ótimo vídeo parabéns 👍.
This looks perfect but i wanted to increase and decrease the size of Progress bar what are the values i need to change?
stroke-dashoffset: calc(440 - (440 * X) / 100);
just change the "X" to the value in %
Thanks
How to make it dynamic?
Add javascript, tinggal mainin di style percentnya via js
ty
Can you do it pure CSS only ?
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
too bad why because no source code first comment!!!
If you want to learn something then try to write code himself
If you want only source code then join our channel membership...
i did so, with js. + transfom.rotate
Usin svg callin pure css 🥴🤪🙃
Could you make tutorial on wave shapes?
Ok bro
@@OnlineTutorialsYT Thanks!
@@CoolScratcher I know, but it's better to make own one, than copy, don't you think?
@@dawidepl7807 Using the GUI of getwaves, you are technically making your own...
@@CoolScratcher no
listen to 1.75 speed for remix
how can i start the progress to move from top, instead of right???/
I have the same question.
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
Hey plz make anything satisfying
Ok bro
Bro your android app is not showing on Playstore
i am looking for source file!! how i get ???
Why you use the link on the top of css?????
Sir please make a project of css or jquary to make ben 10 omnitrix effect i request you
How to make the svg responsive?
it's svg
the S stands for "scalable" so just adapt the size in your css with a media query and it will adapt ;)
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.
Irshad bhai android app q nhi a raha hai aap ka Playstore par
please i need how to download canvas image turoriols
plz plz make it😢😭
where is the source code?
This is so not worth the effrot
superb
Thanks