Animated Circular Progress Bar Using Html CSS Only | Dynamic SVG Progress Bar

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

ความคิดเห็น • 61

  • @lytrunghuy
    @lytrunghuy 2 ปีที่แล้ว +3

    I like your way to use the pointer to explain the problems and solve them without any words 😂

  • @alanromero8018
    @alanromero8018 2 ปีที่แล้ว +3

    Excelente. Saludos desde Argentina!!

  • @drenathor
    @drenathor 9 วันที่ผ่านมา

    BTW, for anyone stumbling across this video in the future, you can simplify the math for the strokes by setting the path length of the SVG line to 1. Then no matter how long or short your line is, you only have to set the dash properties to 1 or 0 to turn the stroke on or off.

  • @alaingoyette7103
    @alaingoyette7103 7 หลายเดือนก่อน

    Impressive !!!! I will use this for my arduino project. THX

  • @amie_freebird6336
    @amie_freebird6336 2 ปีที่แล้ว +3

    Soo good....
    ❤each and evey programming

  • @АртёмИсамиддинов
    @АртёмИсамиддинов 2 ปีที่แล้ว +1

    Thanks for the great example, I rewrote it in vuejs, I'm sitting happy))

  • @-elektrostahl_1338
    @-elektrostahl_1338 ปีที่แล้ว

    This is amazing, sir! This tutorial helped me a lot. Thank you for your great work !!!

  • @bdinfo3960
    @bdinfo3960 2 ปีที่แล้ว +1

    Nice Tutorial Without Java Script Animated Circular Progress Bar

  • @diegoquadra6546
    @diegoquadra6546 2 ปีที่แล้ว +1

    Amazing!! Thank you for sharing the full process

  • @amadeoconflores
    @amadeoconflores 2 ปีที่แล้ว +1

    Amazing, I'm learning a lot with your videos💜✨

  • @Shizetse
    @Shizetse ปีที่แล้ว +1

    Great video! I would like it even more if there was a tutorial segment on using some sort of media query to make it so the bars only load when in view of the user. I'm struggling with that

    • @rodrigo-uluwatu
      @rodrigo-uluwatu ปีที่แล้ว

      you could easily do that with intersectionObserver

  • @pranjalshukla1693
    @pranjalshukla1693 2 ปีที่แล้ว +2

    Great work 🔥

  • @SANJEEV.VERMA.
    @SANJEEV.VERMA. 2 ปีที่แล้ว +8

    I will try to make number text animated too. From 0% to that %.

    • @princefowzan
      @princefowzan 2 ปีที่แล้ว +1

      good luck

    • @SANJEEV.VERMA.
      @SANJEEV.VERMA. 2 ปีที่แล้ว +1

      @@princefowzan bruh I'm newbie here

  • @Just_Enter
    @Just_Enter 2 ปีที่แล้ว +1

    great work keep it up

  • @yours_positively
    @yours_positively 2 ปีที่แล้ว

    Dynamic video want more a more 💓

  • @sonamohialdin3376
    @sonamohialdin3376 2 ปีที่แล้ว +1

    So good tutorial

  • @stefekjarzabek8789
    @stefekjarzabek8789 ปีที่แล้ว +1

    So cool, but Safari doesn't animate the Dot and position is wrong :( Any ideas why? :)
    Chrome animate without any problem.

  • @bangladesh6809
    @bangladesh6809 ปีที่แล้ว

    I want to give you a challenge, can you do this using only html and css?you may use js too. (By the way, I admit that you are a talented guy)

  • @namesurname-ss8vx
    @namesurname-ss8vx 2 ปีที่แล้ว +1

    Nice! 🔥🔥🔥🔥🔥

  • @tosinoyewoleolamilekan9143
    @tosinoyewoleolamilekan9143 2 ปีที่แล้ว +1

    Hello sir, I really appreciate all your tutorial and they are amazing. what am having an issue with is that you did always start the video by entering the Code editor which still gives me confusion about how I can be able to practice the tutorial, sir.

  • @pedropetiz1468
    @pedropetiz1468 ปีที่แล้ว

    Nice video man! do you know how can i add some glow to the green part of the circle? just like u did on the dot

  • @NuNaKri
    @NuNaKri 2 ปีที่แล้ว

    Awesome! 😍

  • @diaryforlife
    @diaryforlife 2 ปีที่แล้ว

    Nice, bro!

  • @SaiKrishna-zg9wg
    @SaiKrishna-zg9wg 2 ปีที่แล้ว

    Thank you sir

  • @ibroximfoundation
    @ibroximfoundation ปีที่แล้ว

    very good
    i will subscrabe for you

  • @umtabtv
    @umtabtv 2 ปีที่แล้ว

    Great ☺️

  • @junaidshahzad6681
    @junaidshahzad6681 ปีที่แล้ว

    thanks bro

  • @louisegaska819
    @louisegaska819 2 ปีที่แล้ว

    thanks !

  • @Ivymike52
    @Ivymike52 2 ปีที่แล้ว

    hello, great job but on Edge stroke-dashoffset: calc works, instead doesn't work on firefox.
    How can resolve?

    • @mayrafernandez9974
      @mayrafernandez9974 2 ปีที่แล้ว +1

      stroke-dashoffset: calc(440px - (440px * var(--num))/100);

  • @Anonymous-14567-o
    @Anonymous-14567-o 2 ปีที่แล้ว +2

    First❤️

  • @ЗлатаВласкова-я6ъ
    @ЗлатаВласкова-я6ъ ปีที่แล้ว

    Hi, it works great in Chrome, but in Safari the circle indicator is wrong. Did you fix that?

  • @mdkhadikulislam3075
    @mdkhadikulislam3075 ปีที่แล้ว

    Great vedio but background sound not good

  • @vidukabaddiacademy7713
    @vidukabaddiacademy7713 2 ปีที่แล้ว

    Hello sir, i want to know how to make a share count progress bar...how ..please tell me

  • @tioben2823
    @tioben2823 ปีที่แล้ว

    Could you release the code to copy and paste?

  • @Parth_mehta143
    @Parth_mehta143 ปีที่แล้ว

    Hey , I want you to make a video creating a digital clock with html, CSS and Java-Script and with a button on click function which can either on and off the clock and toggle button which will switch digital clock to analog clock showing date, day and time and another toggle button to switch between local time to world clock time where any location is entered and their time could be shown with day, date with the location.?
    Is it possible or not, I am trying to build something like this but could not achieve the goal can you help me out..?

  • @Animal_Adventures-f6m
    @Animal_Adventures-f6m 2 ปีที่แล้ว +1

    What is svg

  • @sulfikaralijun07
    @sulfikaralijun07 2 ปีที่แล้ว

    how to make a beautiful and attractive form

  • @yonaroduardomayo7741
    @yonaroduardomayo7741 ปีที่แล้ว

    Me hace falta el archivo ccs que usaste donde lo puedo descargar

  • @felixfigueroa
    @felixfigueroa 2 ปีที่แล้ว +7

    something is wrong...you should have 100% on everything 😎

  • @myriam5662
    @myriam5662 ปีที่แล้ว

    unfortunately the problem with "circle" is still unresolvable for the browser Firefox but it does work on Chrome. Is there any solution for that may you offer?

    • @myriam5662
      @myriam5662 ปีที่แล้ว +2

      The result is: You need to use "units" like "px" if you want to use calc in CSS for Firefox, and Fortunately calc with units works on Chrome, Firefox and Safari. in the Minute 05:18 on line 61 you had to write calc(440px ...)

  • @pavanpenugonda4924
    @pavanpenugonda4924 2 ปีที่แล้ว

    okay.. I need to search more easy one..

  • @Fre3ze562
    @Fre3ze562 2 ปีที่แล้ว

    Guys what computer should i use?

  • @gameworri
    @gameworri 2 ปีที่แล้ว

    Bro use copyright free music 🎶

  • @animeaddict79
    @animeaddict79 2 ปีที่แล้ว +1

    4th😊

  • @rajwanulhaque5754
    @rajwanulhaque5754 2 ปีที่แล้ว +1

    🥰🥰😇

  • @Snowwhite-n6j
    @Snowwhite-n6j ปีที่แล้ว

    WHERE IS THE SOURCE CODE !

  • @web_maker1
    @web_maker1 2 ปีที่แล้ว

    Anyone know the name of the theme?

  • @yumethwijesooriya
    @yumethwijesooriya ปีที่แล้ว

    sourcecode please

  • @toxicgamer9901
    @toxicgamer9901 2 ปีที่แล้ว +1

    2nd

  • @user-ms8ei9le7x
    @user-ms8ei9le7x 2 ปีที่แล้ว

  • @MDXPrime
    @MDXPrime 2 ปีที่แล้ว

    Remove the background music, please.
    It's distracting.
    BTW, good job with the videos

  • @rishabhtripathi6032
    @rishabhtripathi6032 2 ปีที่แล้ว +1

    4th

  • @HunterXKrishX
    @HunterXKrishX ปีที่แล้ว

    gutke ko thuk kar bolna sikh bhai