How to Create a Progress Bar With Animations - HTML & CSS Tutorial For Beginners

Поділитися
Вставка
  • Опубліковано 27 жов 2024

КОМЕНТАРІ • 44

  • @donuttruck7037
    @donuttruck7037 3 роки тому +5

    I've been trying to learn this for a long time and it was so confusing, but when i watched ur video, it became alot easier and simpler. Thanks!

  • @hello-ff8hh
    @hello-ff8hh 2 роки тому +1

    first time every understand relative + absolute pattern, and you did it in one sentence !

  • @technologs101
    @technologs101 2 роки тому

    you wont believe how much you helped me man. been stuck with how to update the bar using javascript for days. thx man

  • @TheCodingOdyssey
    @TheCodingOdyssey 3 роки тому +3

    This is pretty nice! Its even easier in React though. React makes some things so simple especially when you combine it with styled components.

  • @nikhilmwarrier7948
    @nikhilmwarrier7948 3 роки тому +1

    Thanks a lot! I was working on a CSS library and your tutorials helped a lot!

  • @beristainbear3924
    @beristainbear3924 3 роки тому

    You are amazing, I didnt realize how much I loved coding till today

  • @saulius659
    @saulius659 Рік тому

    Thank you very much! Yee it took me ~3hours to repeat :)) But all works perfect!

  • @BnE_Remix
    @BnE_Remix 8 місяців тому +1

    im wanting to create to clicker game. i want the health bar to start at 100% but as the health goes down the percentage goes down with it. how would i roughly do this?

  • @stormbreaker2526
    @stormbreaker2526 Рік тому +1

    How can we create a Progress bar for learning website? Like when someone pass lesson he eventually will go further which is shown in the bar.

  • @tik-sen-tok6617
    @tik-sen-tok6617 3 роки тому

    Thanks, I have been struggling with this, I never took html and css but have a project that deal with this .

  • @victory_lucky
    @victory_lucky 3 роки тому

    it seems you read my mind, I was expecting this for a while now

  • @victory_lucky
    @victory_lucky 3 роки тому +1

    if you don't mind, could you please do another using the progress bar to detect when a page is loading

  • @nanakwasi7690
    @nanakwasi7690 2 роки тому

    Great video. Thanks.

  • @fredoscott2346
    @fredoscott2346 3 роки тому +2

    Most likely something will happen after the loading is complete, so it would be nice to know how one could do a redirect or something...

  • @paserafim10
    @paserafim10 Рік тому

    Pretty nice. How could I build something similar to this but show the two values: the total and the partial?

  • @ben-cb5er
    @ben-cb5er 3 роки тому

    sweet! learnt something new this arvo! thanks bro

  • @NewHellz-
    @NewHellz- Рік тому

    hey there, may i ask something ??
    Is there possible if i create progress bar, with numered inside, can be change automatically with time i want to??

  • @PhG1961
    @PhG1961 3 роки тому

    Excellent and great ingenuity !

  • @ahmarjaved8710
    @ahmarjaved8710 2 роки тому

    this is pretty cool but i have created second bar with same code but second bar percentage is not showing its missing can u please help me

  • @mnunez6153
    @mnunez6153 2 роки тому

    yeah progress bar is done. how can it be integrated to a page? how to put it in such a way that page will load this bar while the page doesnt display?

  • @christopherlawes9286
    @christopherlawes9286 3 роки тому

    Does this work if you want to update progress bar in a for loop?

  • @FRONTRUS
    @FRONTRUS 3 роки тому

    *Covid-19* : Making Programmers Since 2020 🎓

  • @nurullahanas4906
    @nurullahanas4906 2 роки тому

    Perfect

  • @nitinmadas_ds
    @nitinmadas_ds 2 роки тому

    How to make it accessible to the screen readers could you please help?

  • @nazimfirdousali6952
    @nazimfirdousali6952 3 роки тому

    Is this animation working on scroll down?

  • @ayaneshsarkar7804
    @ayaneshsarkar7804 3 роки тому

    Which font do you use?

  • @melkiy582
    @melkiy582 2 роки тому

    This red html “5” looks like “angular” logo.

  • @amraldroubie3127
    @amraldroubie3127 3 роки тому

    thanks what is the name of the vs code theme that you use

    • @dcode-software
      @dcode-software  3 роки тому

      Hey, the theme is "dcode" and I use the colours in my channel:
      marketplace.visualstudio.com/items?itemName=dcode.dcode-theme

  • @rangabharath4253
    @rangabharath4253 3 роки тому

    Awesome

  • @hirozuki
    @hirozuki Рік тому

    when the title says "html&css" but the video also uses javascript......

  • @joaomendoncayt
    @joaomendoncayt 3 роки тому

    Obrigado és deus

  • @RafaelTrindade_rafa
    @RafaelTrindade_rafa 3 роки тому

    Gostaria de ver atualização automática.

  • @lev_bul
    @lev_bul 2 роки тому

    100K views or likes

  • @brightsteel5695
    @brightsteel5695 3 роки тому

    yes "for beginners, HTML & CSS tutorial"
    *CODES JSCRIPT*

    • @fullgames926
      @fullgames926 2 роки тому

      It's only a couple of JS lines cmon. And im noob AF

    • @brightsteel5695
      @brightsteel5695 2 роки тому

      @@fullgames926 yeah only a couple actually

    • @brightsteel5695
      @brightsteel5695 2 роки тому +1

      @@fullgames926 this comment was 9 months old lol i alr learned js php css html at like above average level also abit of lua

  • @de-ke4xz
    @de-ke4xz 3 роки тому +1

    you indian

  • @Xstreamlive
    @Xstreamlive 2 роки тому

    how can i take this const code = document.getElementById('code'); value to repace oure 72