Progress Bar Preloader JQuery | Pace JS Tutorial | HTML, CSS & JQuery

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

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

  • @harrnish
    @harrnish 5 ปีที่แล้ว +15

    I applied my own styling rather than using the plugin css files. I really think this will help! Thanks for watching ❤

  • @100XPercentX
    @100XPercentX 5 ปีที่แล้ว +2

    holy shit i luv u this is my aesthetic, this entire channel i love it

  • @moyiabioye2039
    @moyiabioye2039 5 ปีที่แล้ว +4

    Thanks for sharing this man. Appreciate your constant effort to improve yourself

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Thank you so much brother for the appreciation!

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

    Really love your format of tutorials. It's new ! keep it up. GG

  • @0107ful
    @0107ful 5 ปีที่แล้ว +1

    You are the best dude.... U are a huge motivation, keep it up brother. Greetings from Bosnia !

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

      Thanks brother

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

    Dude, this is awesome! I've looking for it for a long time, nice!

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Thanks bro

    • @sandeshmedhe2190
      @sandeshmedhe2190 4 ปีที่แล้ว

      th-cam.com/video/nXrgyk86Ii8/w-d-xo.html

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

    perfect music at the start! pleasant to the ears and sounds good too. Cool tutorial btw! keep em coming love your vids. It really helps me a lot

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Thank you so much

  • @zedinspiration1547
    @zedinspiration1547 5 ปีที่แล้ว

    You are REAL DEVELOPER, ı love your works. Loves from Turkey 🇹🇷 ❤️❤️

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Thanks

    • @zedinspiration1547
      @zedinspiration1547 5 ปีที่แล้ว

      @@codegrid ı waiting for your more works, thanks at now ❤️

  • @LYRICALIZE
    @LYRICALIZE 3 ปีที่แล้ว

    You are the best your coding help me so much and i love your videos

  • @framtidstoan2893
    @framtidstoan2893 5 ปีที่แล้ว +4

    always good content

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

    your video intro better than the preloader

  • @sanderdsz1
    @sanderdsz1 5 ปีที่แล้ว

    Awesome work as always! Thanks

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

    Thanks for all your vids, recently subscribed and haven't regretted doing so . i was requesting a vid on responsive nav bar with megamenu dropdown . Receiving this awesome content all the way from Uganda

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Check out previous video if it can help.

  • @dobelem
    @dobelem 5 ปีที่แล้ว

    A "sckeleton web" maked by you should be great and helpfull. I almost dont saw good examples about sckeletons here in TH-cam. Thanks!

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

      I'll try to look after it.

  • @rajkumarshah8539
    @rajkumarshah8539 5 ปีที่แล้ว

    No doubt your are the best tutor for us. Keep it up.👍👍 . Sir please reply over my request in the previous comment.

  • @worldwide9279
    @worldwide9279 4 ปีที่แล้ว

    Thanks for famous work

  • @mariolopes6262
    @mariolopes6262 5 ปีที่แล้ว

    Fabuloso 👏🏻👏🏻👏🏻

  • @imane5971
    @imane5971 3 ปีที่แล้ว

    would be lovely to see a version without jquery :)

  • @nikhildaiya
    @nikhildaiya 4 ปีที่แล้ว

    How I can put this preloader on my website?

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

    These all are good for single sections. How do I apply this thing to multi-sectional pages of my website index?

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

    How to add this pre loader to website? I have been searching over a week but couldn't find any solution and the alternative solutions I saw on other websites don't work.
    How to Integrate it with the index.html so that when the loader has done loading, it will fade out and index page of site will load.
    (Sorry for bad English)

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

      Hi, Im also wondering the same thing as you, could you tell me if you've found out?

    • @priyanshubhardwaj2158
      @priyanshubhardwaj2158 4 ปีที่แล้ว

      @@shuml I'm still searching. Did you get it?

  • @AkshsFx
    @AkshsFx 3 ปีที่แล้ว

    Sir which software did u used for this

  • @머슬팩토리
    @머슬팩토리 4 ปีที่แล้ว

    Thank you.
    Can't add percent characters?

  • @daviddrahllensa4165
    @daviddrahllensa4165 3 ปีที่แล้ว

    Thanks man !

  • @ilan117
    @ilan117 5 ปีที่แล้ว

    Hi harrnish :-) As a comment to your video pre-text ... every video you post here is totally worth sharing .. Goldmine ! You are suing Ajax but I do not see any actual loading e.g. photos or anything as such so I am not sure... you wrote "progress is detected automatically"? Can you explain? Can we use it as a real-time loader e.g. hero photo or? Thank you, always!!

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Here you go : github.hubspot.com/pace/docs/welcome/
      Check out their github to see the plugin code. As I mentioned this was the easiest way I found as it's much easier to add and as per my experience, this was more helpful to me rather than that faking loader animations.

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

      Even I am not that much into Ajax. But I found that by default, Pace will show any ajax requests which begin as a part of a normal or ajax-y page load, or which last longer than 500ms. In pretext, AUTOMATICALLY word states itself that I didn't wanted to fall deep into code that much. For deeper understanding you've to go with google + plugin code. Thanks

  • @ChocolateJJ
    @ChocolateJJ 3 ปีที่แล้ว

    I still can see content of my page when loading screen is in process. Any idea why?

  • @siddheshb.kukade4685
    @siddheshb.kukade4685 4 ปีที่แล้ว

    Please tell me the name of your text editor ???

  • @CalvinHeath
    @CalvinHeath 4 ปีที่แล้ว

    My loader has everything working except the white progress bar, why?

  • @ninasarahguevarra6027
    @ninasarahguevarra6027 5 ปีที่แล้ว

    nice tutorial, may I know the title of the 1st music?

  • @nikhiltyagi1700
    @nikhiltyagi1700 4 ปีที่แล้ว

    how do you have the font 'Monument Extended' by default? You dont link it in CSS using @font-face?

  • @Oizoioiii
    @Oizoioiii 5 ปีที่แล้ว

    What is the name of the first song on video?
    it's so nice bro ^^

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

    HI HOW DO I ADD MY MAIN HTML INDEX ...

  • @CodeByZach
    @CodeByZach 3 ปีที่แล้ว

    The GitHub URL has changed. Google "Pace JS" instead.

  • @negarinmaleki8783
    @negarinmaleki8783 4 ปีที่แล้ว

    how to change vertical line with percentage???

  • @anzu6162
    @anzu6162 5 ปีที่แล้ว

    What theme do you use?

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      UI theme : Black and white, Syntax theme : Textmate twilight

  • @RCS-CHARTS
    @RCS-CHARTS 4 ปีที่แล้ว

    How to display the numbers in it "just like in those many animated bars" from 1% to 100%?

    • @codegrid
      @codegrid  4 ปีที่แล้ว

      I've got another tutorials on my channel where I've shown the percentage count with progress bar!

    • @RCS-CHARTS
      @RCS-CHARTS 4 ปีที่แล้ว

      @@codegrid keeping it real?... like... my life feels like a lie, after finding out about over effects... and now this... seems like it's all just animations and you're not really selecting or loading anything... Feels like I'm "Against all LOLs", xD.

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

      You read the text but you didn't get the message lmao. Try to do a little bit research by your own bruh. I've mentioned the plugin. On the plugin page, you'll see one with COUNTER. (link in the description) That's all you want!
      + Check out this: th-cam.com/video/xUV7mUAYuHE/w-d-xo.html
      You can use this concept if you are good at playing around with css, jquery and the plugin.
      Don't expect you'll get everything readymade. KEEPING IT REAL 😉😉😉

  • @onshammouda1976
    @onshammouda1976 5 ปีที่แล้ว

    ur editeur? !

  • @adnanjunaid9745
    @adnanjunaid9745 5 ปีที่แล้ว

    great job bro this is really helpfull but one thing how to reduce the speed of bar

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

      It proceeds according to the amount of data loaded.

  • @newtechnology452
    @newtechnology452 3 ปีที่แล้ว

    how to reduce the time of loading?

  • @StafJoumani
    @StafJoumani 3 ปีที่แล้ว

    I doesn't fade away after It's done loading

  • @jasnburne6470
    @jasnburne6470 5 ปีที่แล้ว

    waht name text editor pleas !

  • @utdgamer8718
    @utdgamer8718 4 ปีที่แล้ว

    HELLO PLZ HELP DO I JUST ADD MY CODE OR DO I ADD MY MAIN HTML PLZ HELP

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

    Pace JS ?

  • @nikhiltyagi1700
    @nikhiltyagi1700 5 ปีที่แล้ว

    name of the songs please please please!!!

  • @lookarious2055
    @lookarious2055 5 ปีที่แล้ว +5

    2019 and you use jQuery :D?

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

      I'M NOOB BRADA 🤣🤣🤣🤣

  • @TheBorninmotion
    @TheBorninmotion 5 ปีที่แล้ว

    Wizard !

  • @reyzen.8323
    @reyzen.8323 5 ปีที่แล้ว

    ty

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

    It is not receptive

  • @tonsofcode2478
    @tonsofcode2478 3 ปีที่แล้ว

    It was a good tutorial but seriously, why every single tutorial is using Jquery?

  • @carlodanielpimenttel2233
    @carlodanielpimenttel2233 5 ปีที่แล้ว

    Jquery vive

  • @mrp_prfsnl5176
    @mrp_prfsnl5176 5 ปีที่แล้ว

    i didnt got that..😅

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

      you will.

    • @mrp_prfsnl5176
      @mrp_prfsnl5176 5 ปีที่แล้ว

      @@codegrid yess... 😍😍 definitely..!

  • @abdelrhmanmohammed3593
    @abdelrhmanmohammed3593 4 ปีที่แล้ว

    Thanks for wasting my time

    • @codegrid
      @codegrid  4 ปีที่แล้ว

      Your welcome buddy