Pure CSS Circular Progress Bar | Html CSS & SVG

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

[@OnlineTutorialsYT]

Source Code : www.patreon.com/posts/36809715

[@RaveKev]

Danke!

[@OnlineTutorialsYT]

Thanks

[@SalmanAli-if9ds]

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 ?

[@danzarifin]

I am very inspired by you and I really like your work, after I finish my training, I will create content about programming languages.

[@vicsystems]

I just want to say I love you sir. Your skills are divine. God bless you for this

[@Madalinmitosis]

Why god should blesss him for this 😂😂

[@adib8426]

@@Madalinmitosis maybe he used it on a project and made it look 10x better idk

[@Madalinmitosis]

@Chris Kelly god doesnt even exist helo

[@Madalinmitosis]

@Chris Kelly nobody knows, sometimes i think that we arent even real

[@hasantanvirshahriar]

Your skill at HTML is 100% Your skill at CSS is 999% ‌‌‌‌‌ But my skill is less then 0.0000001%

[@alexalannunes]

Fantastic🥳🥳👏👏 I'm was looking for this

[@tauchcall5223]

You have hight level skills bro

[@fatehalrabeai3110]

Your videos are amazing bro. They helped me a lot in my my work. So brilliant. Thank you .

[@Opyjoestudio]

wow! your css skill is amazing

[@r.kprajapati188]

Excellent God level javascript css and html

[@Dxazcat]

That was all i needed. Great tutorial, bravo !

[@shshafayet112]

bravo

[@mahiabdulkadir2936]

By the way you helped me a lot for making and designing designing websites... Thank you for everything 💕

[@edersantana4798]

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.

[@only_polaroid]

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

[@spacecss6636]

Ae cara tmj!!!

[@chrody]

Wonderful

[@aryankumar7596]

Awesome..........thanx bro

[@golamrabby6911]

This channel is very creative but i cannot understand it easily .....

[@akabillah3307]

thank you so much nice video

[@technoallMz]

Awesome bro

[@stuartharcourt]

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

[@vicsystems]

Too bad

[@fabioluiz430]

Fantastic! thanks

[@anujjhamb6664]

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

[@oasisvideos2944]

Thats really great. I have just got one subscriber

[@b.o.t7888]

Awesome video, you rock!!!

[@djdada4148]

Outstanding

[@nwdesigns5634]

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?

[@suharsh96]

beautiful!

[@beelow-Eg]

God gob Love javascript

[@ahamedbasith3620]

Great

[@manukrishnan_p]

I can't help but notice the bgm is awesome credits to NCS

[@vanshitasingh6251]

is this responsive?

[@craigadavison77]

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?

[@VolkerAndres1]

440: 2 * PI * 70

[@rafafsantos86]

Thanks. But how to start the bar from 12 o'clock ?

[@Влад-о5х6ъ]

you Content Amazing 😉 😍😍😍😍

[@WhatHappenedToThem]

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.

[@leshbot1779]

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.

[@paulshort1312]

did you ever solve this problem? if yes, could you please share your solution? that'd be cool bro

[@ansari4me]

which text editor ? ...plz iam new ..

[@josephvogulys]

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?

[@dustysatterlee2247]

The glow doesn't work if you have a background image. Would you have any suggestions on that?

[@allymfs]

Thank you, nice tutorial. I've added in svg { ... transform: rotate(270deg); }

[@Aditya-gi2nl]

What is @import URL()???

[@curtis9701]

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?

[@nictomancer]

Really cool, thanks

[@alamin-dm5xg]

Brother many many thanks. But some problem Mozilla Fire Fox browser calc() invalid property error. Brother Please help me.

[@大花猫-i3o]

why my nth:child(2) selector not working

[@gastonemilianoyoung6742]

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.

[@OnlineTutorialsYT]

Source Code : www.patreon.com/posts/36809715

[@FirdavsiGameDev]

Awesome thank you

[@kirillurazov6195]

Thanks helped me

[@ishrakhossain2414]

nice tutorial though i had to make some changes to compete mine can you tell me why did that happen?

[@MrCuteguylol]

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 :)

[@blackwins7397]

what recording software did you use?

[@Neha-vf9fi]

i want source code...your not giving source code.....so what is the benefit of membership

[@OnlineTutorialsYT]

please provide me your email id

[@Neha-vf9fi]

[e-mail]

[@purbayonsarkar2810]

Please provide the import link that you used to import the google fonts

[@anony88]

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.

[@adjighg4736]

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?

[@mdalekzandar1759]

may be incomplite!!!!!!!!!!!!!!!!!!!

[@adjighg4736]

Md Alekzandar what do you mean

[@AlsoLarry]

What's the full URL for the beginning of the CSS?

[@josephvogulys]

the same questuion

[@ChrisPollard]

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.

[@Dev_UI]

nice

[@MdFahim-fd6vi]

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

[@eon2554]

@@simulationtheory101 really?

[@MdFahim-fd6vi]

Madsaur Madsaur..... OMA....How it's possible..?

[@eon2554]

@@MdFahim-fd6vi I just searched it up. codepen is open source learning environment so no problem there.

[@irfanansari85]

how to use this circle with database

[@lovelinmangang435]

Request next tutorial, how to CSS Image Sprites?

[@samuelgunawan405]

Whats the software used in this video? The software thats used to create the website

[@nickolasjoe]

Samuel Gunawan Sublime Text.

[@samuelgunawan405]

@@nickolasjoe Great thank u

[@ahmedrashed5567]

thank you so much but how can pass number from text to calc() in css ??

[@Max-kr4ie]

Thank you!

[@test-ep4ez]

I hope that you will make it jump from 1 to 65%, completely or animated, when you enter the website page.

[@unlimited_code]

Hi, thanks for everything ... I have a question, how to make it dynamic with js vanilla?

[@nareshramini1796]

You should make CSS or style changes to SVG via JavaScript.

[@nereacabiedasmoreno941]

En algunos navegadores(safari y firefox) no se me muestran bien los círculos , ¿alguien podría ayudarme?

[@furiousgamer04]

Hello , I am facing some issue regarding the invalid property of stroke-dashoffset: calc(440 - (440 * 90%) / 100), please help me with the solution.

[@ramonolivar4176]

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:

[@jashmorekar]

remove "%" from 90 and it'll work

[@furiousgamer04]

If i remove the % but still it only works in chrome not in firefox

[@leshbot1779]

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

[@Aadhix328]

Which app are you using.. i mean software

[@TheScrewdriver]

BlackMarket he is using sublime

[@AppGeek]

Why you don't share a code?

[@claudiorigollet5820]

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.

[@leshbot1779]

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.

[@fatsheep9230]

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 ?

[@AbdulHanan-xk6hf]

stroke-dashoffset: calc(440- (440*10) / 100); dosent work for me

[@OnlineTutorialsYT]

Add space between mathematical operations

[@AbdulHanan-xk6hf]

@@OnlineTutorialsYT thank you

[@kt3152]

Awesome, but, how set percents in html? PHP don't access to .css file.

[@kt3152]

@

[@kt3152]

data attribute limited to the content property. Still can't see way to use in non-static content

[@kt3152]

It's working solution. Need replace stroke and stroke-dashoffset from css file

[@chickenboysdonath]

somebody tell me why 440????

[@mohamadiqbal5645]

Terima kasih banyak,tapi bisakan anda untuk membuat untuk tampilan responsivenya pada layar mobile..thanks

[@abhishekrawat8579]

loved it♥️

[@vcatalina]

8:45

[@fareedmurad4331]

source code please

[@giovankoulits8602]

Thanks Much appreciated!

[@yangjacj8920]

could you share the code? Thank you!

[@muhammadanus8416]

PoKA

[@TVGAMING0169]

source code ?

[@aliyanahmed4521]

I need source code?

[@theaveragestudent6025]

Sir why you shouldn't teach us html and css effect

[@MrCuteguylol]

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

[@MrCuteguylol]

at somewhere in 3:43

[@mylearn734]

What about Emmet?)))

[@bootstrap_4184]

thanks

[@veeresh4441]

Im a beginner, how to get perfect in this field. Suggest a book for complete reference,that could be helpful 😊

[@supindersingh8882]

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.

[@supindersingh8882]

@Hilbert França yeah, whatever suits you best, go for that.

[@veeresh4441]

@Hilbert França is that a website or book . Could u give full name of website or book ur mentioning. Thanks for reply

[@gamerzera4265]

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

[@someonenew1018]

@@veeresh4441 just Google mdn or w3c and click the first link :)

[@karnailsinghbhau6299]

Please name of text editor

[@karthikbharathi9070]

This SVG element is overlapping my header which is fixed how to resolve that bro

[@daltonadams651]

svg{ overflow: overflow: visible;} ---This should fix it.

[@syediqbalahmed3176]

straight ...

[@BestFoodReviewFeatured]

What is svg?

[@kt3152]

Scalable vector graphics

[@hanifhisamuddin7105]

what is the import url on css

[@indrakhatiwada9860]

Importing font from google font

[@mahiabdulkadir2936]

Do you have the source code for this progress bar? I would appreciate it if you give me the link or anything

[@norbertsoos7132]

Sorry! This isn't work the css svg circle part..... why?

[@leshbot1779]

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.

[@nikachkhobadze7710]

Ah you have to buy source code?...

[@quabynaclaire501]

This was a good work but you need to know that anyone who came here wanted to know how to make a circular progress bar. Making three instances simultaneously and fancy text and unnecessary customization made it unnecessarily complex to follow. we can make as may as we need once we can make one but you chose to make difficult to follow. Next time plan properly on the approach to delivering your content

[@javeriashx1169]

I have a problem in output kindly help me to solve this error

[@OnlineTutorialsYT]

Send your code to my facebook page inbox

[@SalmanAli-if9ds]

Sir are u American or indian

[@mdnaushadansari9882]

Indian

[@karayldz9075]

Dowland link ?

[@jockeyfernandez6800]

Dude can u do a pie chart ? please

[@window.location]

U can achieve this using chart.js And its very easy ( max 30 min to learn)

[@jockeyfernandez6800]

@@window.location want to create without any libraries

[@YevhenRud]

Why does you use a big nesting of selector???? Don't do that.

[@yassershahine7445]

to make it easier .... do you**