Pure CSS Circular Progress Bar | Html CSS & SVG
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Source Code : / 36809715
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
------------------
Music Credit
Track: Tobu - Roots [NCS Release]
Music provided by NoCopyrightSounds.
• Tobu - Roots | House |...
Source Code : www.patreon.com/posts/36809715
I am very inspired by you and I really like your work, after I finish my training, I will create content about programming languages.
At first i did not how to link html and css after i watched your vedio i have done how to link css and html and first time i create a web page i was able to do this because of you thanx u very much ?
I just want to say I love you sir. Your skills are divine. God bless you for this
Why god should blesss him for this 😂😂
@@Madalinmitosis maybe he used it on a project and made it look 10x better idk
@Chris Kelly god doesnt even exist helo
@Chris Kelly nobody knows, sometimes i think that we arent even real
Seus vídeos são incríveis top de mais... Quando eu crescer quero ver bom ou excelente em programação igual a você. Muito obrigado por compartilhar conhecimento.
Boa cara,muito bom você pensar assim e se inspirar nesse tipo de conteúdo, esse tipo de coisa que gera um bom futuro pra uma pessoa, conhecimento
Ae cara tmj!!!
Your videos are amazing bro. They helped me a lot in my my work. So brilliant. Thank you .
By the way you helped me a lot for making and designing designing websites... Thank you for everything 💕
Wonderful
Thank you, nice tutorial. I've added in
svg {
...
transform: rotate(270deg);
}
What is @import URL()???
Danke!
Thanks
Fantastic🥳🥳👏👏 I'm was looking for this
wow! your css skill is amazing
Great
Love the Tutorials - but the stroke-dashoffset calc does not work in Safari on the Mac. It just flood fills the circle with the colour. Works fine in Chrome opening the same file. To get around this you have to manually do the calculation yourself and enter the final value (440) - (440 *0.90) = 44
Too bad
Thank you so much for the video. It is working well. But the only issue I am facing is the mobile UI. It is not responsive. Can you please tell me how to make it mobile friendly
You have hight level skills bro
That was all i needed. Great tutorial, bravo !
bravo
I can't help but notice the bgm is awesome credits to NCS
Awesome..........thanx bro
For some reason, this does not work in my firefox browser but it's perfect in chrome. Do you have a fix for firefox and to make it work in all browsers? It seems to be the calc that does not work.
Yeah you just need to delete where we calculated the circles offset and do the calculations by yourself and then just change the calc(....) to the answer.
did you ever solve this problem? if yes, could you please share your solution? that'd be cool bro
Your skill at HTML is 100%
Your skill at CSS is 999%
But my skill is less then 0.0000001%
thank you so much nice video
The stroke-dashoffset code doesn't work. It turns the circle completely to the base colour. It also applies this to every circle. Any suggestions on how to fix this?
God gob
Love javascript
Two things; firstly a critique, the order in which you coded the elements was off, the video was about the progress bar, all the fancy animations were the icing on the cake. Don't get me wrong your icing is pretty damned nice but it would be good if there was a focus on the subject of the video then the icing that made it look quite beautiful. Also it would be good to have some explanation of why you do certain things. Which leads me on to...
Secondly, why 440?
440: 2 * PI * 70
Outstanding
Fantastic! thanks
It seems that you can't set a stroke-dashoffset with a calc() in firefox. So you would have to set the value another way in said case.
Source Code : www.patreon.com/posts/36809715
Thats really great. I have just got one subscriber
I hope that you will make it jump from 1 to 65%, completely or animated, when you enter the website page.
beautiful!
This channel is very creative but i cannot understand it easily .....
The progress bar has the color which we defined in
.card:nth-child(1) svg circle:nth-child(2) {
stroke: #00ff43
}.
But my problem is that the progress bar is completely in this color, but i typed in 90.
Solutions?
may be incomplite!!!!!!!!!!!!!!!!!!!
Md Alekzandar what do you mean
Really cool, thanks
Awesome bro
Awesome video, you rock!!!
Thanks helped me
Hi, thanks for everything ... I have a question, how to make it dynamic with js vanilla?
You should make CSS or style changes to SVG via JavaScript.
I would like to know how did you move Html css js to center of your cards without using flex direction property? I would be grateful :)
you Content Amazing 😉 😍😍😍😍
Awesome thank you
Excellent
God level javascript css and html
Thank you!
thank you so much
but how can pass number from text to calc() in css ??
nice tutorial though i had to make some changes to compete mine can you tell me why did that happen?
can you teach us how to use js animation code from Github in the html/css document...such as animation on scroll fade-in and fade-out ?
The glow doesn't work if you have a background image. Would you have any suggestions on that?
Can someone help,
For some reason, this does not work in my firefox browser but it's perfect in chrome. Do you have a fix for firefox and to make it work in all browsers? It seems to be the calc that does not work.
Yeah you just need to delete where we calculated the circles offset and do the calculations by yourself then just change the calc(....) to the answer.
What's the full URL for the beginning of the CSS?
the same questuion
Request next tutorial, how to CSS Image Sprites?
It would be amazing it you mentioned that since 440 is the total circumference of the circle, 220 is half of the circumference. So the stroke dasharray will create a circle half of its circumference
at somewhere in 3:43
En algunos navegadores(safari y firefox) no se me muestran bien los círculos , ¿alguien podría ayudarme?
nice
Thanks
Much appreciated!
hello a have an important question my friend. I can get the date from java in my html, that variable is changing, but is not posible change the color automaticly at the same time, how can i get the variable in my css?
Thanks. But how to start the bar from 12 o'clock ?
straight ...
why my nth:child(2) selector not working
Please provide the import link that you used to import the google fonts
Terima kasih banyak,tapi bisakan anda untuk membuat untuk tampilan responsivenya pada layar mobile..thanks
Brother many many thanks. But some problem Mozilla Fire Fox browser calc() invalid property error.
Brother Please help me.
Many expert web devs will say not to rate yourself on your own portfolio.. It's not something you'd do on a resume. Let your projects do the speaking. Cool effect though.
what recording software did you use?
i want source code...your not giving source code.....so what is the benefit of membership
please provide me your email id
nehar.khartadkar@gmail.com
You are a web-design guru, bro how you have created a clear conceft about web-design..plz tell me??..I want to be a web designer like you..!!
@@cebolaloco really?
Madsaur Madsaur..... OMA....How it's possible..?
@@MdFahim-fd6vi I just searched it up. codepen is open source learning environment so no problem there.
8:45
thanks
loved it♥️
I know taking other peoples code from the internet is frowned upon, but how do you feel about other people using your tutorials? not like straight copy and paste but mimic it very closely?
which text editor ?
...plz iam new ..
how to use this circle with database
could you share the code? Thank you!
PoKA
is this responsive?
Hello , I am facing some issue regarding the invalid property of stroke-dashoffset: calc(440 - (440 * 90%) / 100), please help me with the solution.
it seems to depend of the framework you're using, in my case i'm using Angular 8, my solution was implement a binding to a variable in the typescript like this:
remove "%" from 90 and it'll work
If i remove the % but still it only works in chrome not in firefox
@@furiousgamer04 Yeah you just need to delete where we calculated the circles offset and do the calculations by yourself and then just change the calc(....) to the answer.
Do you have the source code for this progress bar? I would appreciate it if you give me the link or anything
stroke-dashoffset: calc(440- (440*10) / 100); dosent work for me
Add space between mathematical operations
@@OnlineTutorialsYT thank you
Awesome, but, how set percents in html? PHP don't access to .css file.
@
data attribute limited to the content property. Still can't see way to use in non-static content
It's working solution. Need replace stroke and stroke-dashoffset from css file
Why you don't share a code?
This SVG element is overlapping my header which is fixed how to resolve that bro
svg{ overflow: overflow: visible;} ---This should fix it.
Which app are you using.. i mean software
BlackMarket he is using sublime
Would be a much better video if there was less blaring music and more discussion on what you're doing and why. Very cool CSS, but disappointed by the video format.
Whats the software used in this video? The software thats used to create the website
Samuel Gunawan Sublime Text.
@@nickolasjoe Great thank u
Im a beginner, how to get perfect in this field. Suggest a book for complete reference,that could be helpful 😊
According to my experience, first learn basics of HTML and CSS from some good source like W3schools. No need of book, just start with small projects, practice will make you perfect. Do mistakes and learn from them.
@Hilbert França yeah, whatever suits you best, go for that.
@Hilbert França is that a website or book . Could u give full name of website or book ur mentioning. Thanks for reply
@@veeresh4441 that's a network suppose you wanna know what is class in css just type on google "mdn class" without quote and you will get answer for it
@@veeresh4441 just Google mdn or w3c and click the first link :)
Please name of text editor
somebody tell me why 440????
This Doesn't work for me for some reason. Could you give a source code link for this?
Source Code : www.patreon.com/posts/36809715
@@OnlineTutorialsYT Thank you alot
What about Emmet?)))
Sorry! This isn't work the css svg circle part..... why?
Yeah you just need to delete where we calculated the circles offset and do the calculations by yourself and then just change the calc(....) to the answer.
Dowland link ?
I need source code?
source code please
I have a problem in output kindly help me to solve this error
Send your code to my facebook page inbox
source code ?
i don't understand the maths behind that svg calculation..can anyone explain?
Me also. The progress bar has the color which we defined in
.card:nth-child(1) svg circle:nth-child(2) {
stroke: #00ff43
}.
But my problem is that the the progress bar is completely in this color, but i typed in 90.
Solutions?
@@adjighg4736 @
Awekening Bro
Yeah you just need to delete where we calculated the circles offset and do the calculations by yourself and then just change the calc(....) to the answer.
What is svg?
Scalable vector graphics
what is the import url on css
Importing font from google font
Dude can u do a pie chart ? please
U can achieve this using chart.js
And its very easy ( max 30 min to learn)
@@window.location want to create without any libraries
Sir why you shouldn't teach us html and css effect
Why does you use a big nesting of selector???? Don't do that.
to make it easier ....
do you**
F