Learn How to Build Awesome JS Loaders | CS Pro | Skillshare

Learn How to Build Awesome JS Loaders

CS Pro, Learn Simple

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (54m)
    • 1. Introduction to Loaders

    • 2. Loaders and Progress Indicator in Javascript UI - Part 1

    • 3. Loaders and Progress Indicator in JavaScript UI - Part 2

    • 4. Loaders and Progress Indicator in JavaScript UI - Part 3

    • 5. Loaders and Progress Indicator in JavaScript UI - Part 4

    • 6. Loaders and Progress Indicator in JavaScript UI - Part 5

    • 7. Loaders and Progress Indicator in JavaScript UI - Part 6

    • 8. Loaders and Progress Indicator in JavaScript UI - Part 7


About This Class


Tired of waiting for your heavy app to load? Yes, you can design some great loaders to keep your users occupied. It can be images, animations, games? Oh yes, mini games too. So join us for this Course and learn to create your own awesome loaders. 

Nowadays most of the web programming is done with JavaScript and lot of code comes and sits in client side when the user accesses their Apps. In that case, your user waits for the files to load either from CDN or any other source and it causes slowness. Sometimes these lead time to load can be critical to acquire users or lose them. 
Loaders provide a solution to these challenges by allowing your user to interact and be engaged in the time all libraries are loading and thus resulting in better user retention and more professional look sometime. 
Join in this to the point course to learn about loaders and how you can create and put your own loaded on your website.


1. Introduction to Loaders: slow app basically is more frustrating than your computer being slope. You never know if your applications always down or your application is slow. If you are developer office, low application, then your name is on the stick. What you do if you are using heavy JavaScript library in the front end and there's not much you can do, you have already unified and reduce the library. Optimize it to its maximum potential and still your application is slow. What you will do in this section vivid ill tell you some of the trips and techniques to solve that. They will be telling you how to build awesome loaders. This will not only provide your user reason to hate for the time your application is getting loaded, but also makes your application look wonderful. So this application previously was taking about in second. But what I did, I put Elsom Lueder here, and this becomes like a magic and your users are north losing a website by thinking that it might have gone down. But they are not playing interacting with a loader, so in this course they will be understanding about how to create those awesome loaders. We will go. This is deep together to recovered. What are the options and alternative? We have the loaders and then we'll create our own Luders On in the slaughter, we will be looking into a critical parts the coding parts And what are the trade offs? Which unit to make to have a loader implemented in your website even from the wife, I've CNN We have implemented our own awesome loaders. You can check out that at you. If I've seen dot com we have tried to optimize our library to its maximum. Then we were not able to reduce the vetting time. Further, we introduce a loader on that drastically increased how many people actually stayed in the website. So learn how to use loaders to make your slow app appealing. And in this section we are going to do that Hands on gray. My name is that unlike and one simple 2. Loaders and Progress Indicator in Javascript UI - Part 1: Yeah. How would welcome back mining villages like on I minus Uviller. She and you're watching your I five in Lebanon. So in this seven hour, this get another very exciting topic and something which we have already tried on our platform are. So let's let's go ahead. Because I don't want to really emphasize on how was the experience, because I think we will see what the shot coming off in Jordan. Okay, that there is. I smell diesel order, and some people will recognize loaded as E V. You cannot make your application much more like no accepted at its option application. Bigger Look faster. Throat Drew Drew. So, basically why we have Big Lord. Oh, can you get us? So the reason is nowadays, you know, there are many developers upcoming. Yeah, and especially the beginners who have who don't have a lot of experience in development. They for you to optimize a lot of things. Yeah, on because of that, the up looks really swollen. It is actually really slow. The problem with that is there is very less user adoption. Your true because they don't want to beat for Lake 45 10 15 seconds. toe, actually see the up getting loaded and then start to use it. So yours, Ah, hag, by which you can make the waiting game much more pleasant for the user fruit together. So if I'm waiting for 10 seconds, I might as well see something nice on the screen. But rather than seeing the peace getting loaded, so that's why Lord is, are there on it actually enhances the user experience in our garden since so that's the biggest reason. Vie V on going to talk a lot of our viewers, and they're an important part off. And because it gives the user a sense off, something is happening. India. Okay, say I click on a button. See Logan Andi. Nothing is happening in the screen, but the processes have me in the back and leg, my friend, and is talking to the back and and very fine with them, the correct use it or not, and then it's redirecting with the new beach. So all this time, if I'm looking at the blank screen, then maybe I'll get bored or anything that may computers hand or something on. I I would just do random clicks on the reclusive upstate. True, True? I think one of the major challenge when I was working on something replace applications they have really library, which is quite big. And because you need a lot of compliments you I'm farther confidence on her part. Batteries should make it for the slow on some time. Be timeto maybe 30 seconds, all of maybe 10 seconds. And there's a very big time interval. So within this duration, you need toe show something at least lording or some animation? Yes, because nowadays most on the frameworks are front and frameworks. Andi, they will be requiring heavy lording off libraries and social or point, or for which you need a loaded. So within this webinar, we will be covering a hands on loader. We will make three types off loader for you, but you can directly put it in your application. It's the difference between a passing use an option. Testing has not passed using adoption. Distinct. So yeah, that there is something which is like a crucial nowadays when most of the frameworks are requiring heavy lording the time The first lower in the first floor is the critical Lord. Yes, that maybe will become young true, True, True. So if we talk about it, then we have toe. We can broadly classified into two categories. No orders. So the 1st 1 is indefinitely Order where you don't really know. How much time is it going to dig for it? It'll actually stop on. You know, the next desert took a loop on. Then there is something called Are definitely well, I have named. Definitely it's not really called 11 included, but I have named it because it gives us inch has been loaded or almost time is so. I mean, if I have an application, which is slowing initially, that is the main time when users can leave your application or get annoyed because they want to do something. I want to check your side dog. If they are the family of the application, they want to go ahead and go to do certain activities on If it is taking even 12th then if the loader I'm showing how much percentage off the download has been done on Gentile website, that is definitely like this. Yes, so it will tell you like 50% of the things has lorded are three minutes IRA, meaning those sort of things like if you give those sort of informations while the loader is in action, then you can call it definitely order because the user then gets to know what has been accomplished on what's still there to be accomplished. Can see our first order or what? The next thing I think it's basically trying. Will will just try out our both the types of florists and even indefinitely orders. We have two days. One is where you given accurate information like this. Must aim is remaining or when is inaccurate information. Okay, estimator time is like three minutes beautiful Might dig 2.5 minutes off 3.5 minutes. But it just gives you, like, okay, approximately here, your sex ability. So let's go ahead. Initially toe design its simple order. Let's keep the session hands on on it. Some some animation or a gift on any kind off small event happening, telling or communicating to user that the website is loaded, so this is kind of the user experience. Um, if they see that nothing is loaded with the see some action happening, some action. Most of the time it is the company logo with in order, so they know exactly. Okay, I'm in the right side way. So and then. Okay, so let's let's go ahead. So how were designed is nice Indefinite loading. Okay, well, niceness comes from CSS, I guess. But the things that happens in the jail Oscar playing, how do you actually place it hard, Do you know that aside has been loaded on? Not for that. We will be using the events. So Jascha works on events. So in the link, we have a lot off norm. Really? Agreements, mouse click or keyboard button press. So, similarly, we haven't even got Duncan concluded. Yeah. Now, Long can't included is fired. Whenever we have a very mother down tree has been completed. Okay, so basically, we have entire page or application on. If all the complements our lord is a loaded, then this event will be fired and saying me that Okay, you can now stop the Lord. So that started endpoint. I got it. So I need to start this particular animation and then I stop it part of our animation. I did the same thing in the UFO application also, but I didn't use that Yeah, because in a single page up, I think it's much easy. It's much easier to do that. Okay, So Okay, so let's let me share screen eso and let's go hands on in the session and fly out to make our foster loader. 3. Loaders and Progress Indicator in JavaScript UI - Part 2: front of CS aspired. I'll be reloading soul diseases. OK, ok, so so that we have a nice effect hearing. So if we are, you see the hands on here. Just let me increase the size of it. That it's physically Yeah. Okay, So first of all, let's create a base against my okay, so nobody will have to live basically. So this is good. The content little on this is where your lord ever go so we can just ag class toe Yeah, this can be starting. So then you start putting whatever in order that you want to put here. Say, I just want o c learning. You're just to keep it simple without any complicated CSS single Andi in the continent off . Let's have Okay, So basically, the Lord is much bigger than the fucking on. Then to make it a bit slow. Slow? Yeah. I put a script here. That word slowed on the lording over No so descript before visited. So that so that this it is loaded after this group present. So I just played a very big for you. Okay, you can also use sleep. Maybe the follow up is work. Finds true Yeah, Let's let I just wanted to keep it simple II Garrard Gettinto. It's off. Okay. Yeah, just this doesn't do anything. So this is like 1/4 and two for Maine, and it might take Do go three seconds toe briefly looked through, depending about how much you Yeah. So Okay, aan den. I'll also write a script here that would have this even. Just so don't you in your ag giving on, then I can have the name off David. So I don't think Yeah, I think this is the same given name which we have mentioned the slight as well Done. Content loaded. Yeah. Also, once the Dom content has been loaded, you can see we have a statement just below that long document or Grady State equals complete. So the value of documented ready state will become complete once the dom conduct has been loaded. Okay, so if you're using polling instead off event listening, then you can actually use that, like every interval A for a few milliseconds, you can check whether the document was loaded on lock, and depending on that, you'll stop the loader on show the website. Okay. Okay. Okay. On then I'll have a function years. Okay, so this function will basically stop the loader onshore develops eight. Yeah. Okay. So what we are going to do is simply have a few styles here. Okay? So basically has to starting up loading because it will be showing the top left corner. We don't know anything. Okay, So for the Lord that happened, what they can do is not for a country. I can see the visibility to be him. Yeah, Andi Well ordered up can be there. So once don content has been loaded. What I need to do is I d loaded up on shorty condoning platter. Yeah. So what I'm going to do here is I sent the CSS property off. Lord Roberto. None on I'll. Jeez, the visibility property off country tapper to initial or show youngest. So to do that. No, you door. Okay, Anything. I It's let's change it already because I would be easier to trying The are so low that okay , door displease us on, and no, it is okay. So basically, what we're doing is you're tryingto make it hidden for initial time. Yeah. So, initially, the visibility of content is hidden. Your Andi Lorded upper is showing to us once the dom has real. Or did I? I hided the Lord upper Okay on guy showed the country for okay. Okay, Okay, True. So if we save it on, we'll also need through act the CSS stacked field. It's in the same for the year. So we really look at the body? Yes, it is here on indefinite. Darkest Yes. It was the first to see if I open it. So Yeah, the school head. Another concern, huh? Okay, So the selector waas So I think we need to change it. Keep the best for this. So it is you get this, they should go about the script. 4. Loaders and Progress Indicator in JavaScript UI - Part 3: fix the bag out of it. Okay. How can about being such a small cardinal could never never investigated? You are driving that loader on, but it's having a simple divest Lord lapper. And when we have an event, listener dom content is a spelling. Correct off, Tom. Continue. Okay, this this This is firing because then we are changing the visibility on display against getting up in it. The specific. Yeah. Yes, it is. He couldn't complete our decision. Initial initial. Also, they keep before value. Okay, so if you see the script a lot in the skeptics book, busy building in the body. Yeah, okay. On them this far. Okay. Okay. So what I did was late once the Dom Country has loaded Okay, so I'm just saying Okay, wait for two seconds before actually doing this, OK, so but better now, what you have done is you are today. You have that function because this this script is like taking time toe run on by the time descript glory after dark. This is pitting the spirit. Okay, Okay. Okay. I think what? I see the scored as if we have a document. Add listener, you have written a callback function here? Yes. So basically, what you're trying to do is you're trying toe right. They call that function on the bomb condemned order, which is where afterward. Although content will be loaded, he has a website. And this is the place where you are actually displaying or hiding the Lord. Actually, yes. Yeah, But if I see the pendant, if you have ah, try try to hold a difficult every. Maybe I think that they never see the don't. Bomb content is very scary. Actually, this is the short not Britain. I was trying to test whether it's properly or not, whether it is because of the script. Unlock. Okay, so basically, if I try toe, add a library, which is a little heavy. Our mode. Let's just try that. Okay, let's try that. But let's type that your study, because what I didn't thinking is its rich taking. No, it's been done in a very fast pace. Yeah, And then let's just try to Lord of your family, OK? Uh, yes. Oh, you say a street TVs in your favor? Yes. Yeah. When you were five young, just just, um yeah, delivery. So I don't have to say slash and then you have to say resources. Then it's a beautiful SMP resources slash recipe calling the U. I think Vince's calling you. I don't fall over or Jessica. Okay, You cool? So it was quite every library, which will take at least one second two seconds. Lord, does it get striving that like, Yeah, because the content should be visible initialing you on. You can add it in the first, I think. Okay. Yeah. Can you open the ankle night window? Yeah, I think it was shown that it's so far. That's been honest. Yes. Visible. So how? What we load it. What you can do here if you go to the network tab now, right? Like, yeah, You can talk electric because you can Ah, Young. So if you're going to right side Yeah, you ship? It was little left here, so I can see a little more. You can say that. Startling it. So I can you get talking to wear bag tg Oh, like maybe having a level two years depending on my xperia. So what we're doing is we're assimilating eso. The network speed will be actually controlled by the presence of Now you can see the loading is come. Actually, it was also walking in the personal utopia. But that script waas loaded No, that doesn't get so running so far that it could not actually catch that on. And I think it's a major. It will look a lot of time now. Okay, OK, fine. It does loaded. Yeah, yeah, yeah. So basically, it will also noted in the previous time, but it was done in a very fast first that we cannot see it. Yeah. Okay, so let's let's go ahead and see how it popular tourism it. I think so. What? Lead is something which we should always try. Basically, when your customer is from a different region, what you try to do is you try to see what is in effect speed because it can happen that your application will be used by people who are in the past and and they might be was interregional Malaysia, which is kind of not that good and find there are the little coverage area. So you startled. Their difference in our use of nitric speed are being given. And then you based on that test application, you Yeah. So says let's go and and design improper look. So 5. Loaders and Progress Indicator in JavaScript UI - Part 4: should be put under floater there. Yeah. You know, instead of floating s old Sally taken from Yeah, we can We can go belly up so you can find many sides where they provide a lot of sources for these loaders on this is once a site, so you can just get a loaded. Okay, So the source scored off our cold, and this links will be given up the webinar. Yes. Okay. So you can just go to the source and you can act these toe. Oh, your script. Basically your estimate. So instead, off loaded up loading. I worked this on. It's out. The stated There's so much animation. Yeah. So if receiving on you go back here re totally, totally You are a refugee, Onda, I think I think I think it wants to like Okay, you're doing harder. Fresh. Okay, so this is the Lord of which will run for maybe a few seconds until the library has been loaded on Buchanan Also have your logo within the law order itself and some kind of an animation movie that was filling up. Your something is happening. If you go to sky before dot com. So this is one of the partner which we're working with on. Then they have awesome lord, you know. Yeah, I just don't call me up. So I think they have a similar law order in the website. If you were the homepage. Yeah. Can you see the Lord with a logo on it? Lord, stay website. So I think this kind of floaters it took around post again. But still, that was loading time. And if because in a quick speed here is good so maybe that is the scenario. But sometimes your total, this touchy speed that it takes around 12th can 12th is actually a lot of time for someone to leave your website. It's enough time for the user to your site. That's true. Yeah. Now. So let's let's come back to our presentation. Because as we have seen a hands on demo, even if it's a small in the morning still off, he got the basic idea that there is a are dom element or function, which is bomb content, lowered their the functions dominant Lord. And then once it is in the ship, and then there's a second circle complete. So within that time, you can show a loader. Yes. Okay, so let's go back to the slide and see one of the definite sort of 11 antlers. So even inside different lawyers, we have that the inaccurate as I said that it will give you Ah ah, sense of like Hollis. Time is remaining, or okay, something is happening. It will actually tell you okay, Or something is happening. 10% off it is loaded or 30% offered is loaded. But you know Okay, we're very you are vetted. So to make those kind off loaders, you need toe take care off everything that is in your website. Like all the scripts, all the images, So to make an inaccurate loaded particle do is take the most heavy items in your up. So if it is image, you can think offer doesn't reach. If it days are very huge library than you can at least see Hamas. Time is the library is going toe. Take to load on depending on that create order. So this is getting a bit more complicated. So mostly the most heavy contained in our website. Our immediate. Yeah. So what you can do is you if you have a set off 10 images in your upset. You can have all those images. You have all those images, and I mean on us each off. Those images are loading. Once they have loaded, you can increase the progress bar, you say. So you have Danny villages. So once the first images loaded, you can increase the Progress Party 10%. That's the 2nd 1 is loaded. You can increase it to 20%. So that's how you go on and do it 100%. And your site is sorted busy. So so can one question which I have regarding the this differently is like is if my content is something which I cannot really find off, then it will be loaded because at each iteration, I need to understand how much part is actually downloaded now and how much partisan remaining. But some of the silver don't give that information out, right? Yes, on in depends upon like, no, some of the files are linking to other fights. And then, in that case, how much you try to get. There was one such service that I have used. So it's Gordon. Any on if you have a major's stored in co ordinate e. Well, the obvious that they provide the deployed with you. Buddy. Progress do like, if they meet Says is going be on. Do you want to know how much offered has been loaded till this point of time? They will give you that information and you can actually show Hamas part off. Damiz has been very true. True, True. So you can search for services like this. The one that I have a good and I know hang on is inordinately OK, so I think that's let's go ahead and start the simple examples off. Definitely Roseville. Okay, Yeah, but I think you have some contender on the document. Navigation appears well. Yes. Okay, those are the accurately orders on this is this is where you get a very close estimate off Hamas. Time is remaining for the complete Down to get loaded. Okay, so we have a gnat navigation EPA in the document object. It gives you the deal. Support Hamas. Time isn't going to dig for for the dawn to lord on. Depending on that, you can make progress for you and actually show Okay, three minutes remaining, two minutes remaining, stuff like that. Okay, so So let's Let's go ahead and start with the development for the definite okay? 6. Loaders and Progress Indicator in JavaScript UI - Part 5: so So go ahead and start the development for the definite. So, as I said, for the inaccurate Lord of we will be using images because the most heavy content in our state is a visa. Yeah. Now I have to be made us here. They have been digging for taken from our website on legal. So we'll be loading these so big before adding a warder, but okay. Lets us see what it looks like. So indefinite north is Tim. Okay? This was the one big noted knackered protest you. So we have these three images. Yeah, so we'll sort it again. So there. Because it's learning very fast, and it's tough to short order than so. What we need to do is make sure that each off the images are loaded and once one of the reasons we increase it by says we have three minutes, so target requests in. Okay, we'll go back. Okay. On coming from here on will also act of link. Lucius is so this is ST Mark up. Seizes Bull. Know what? I'm going to do? This Define affection. So and then I'm going toe get although images that I have another esteem so all images people's so you can do it using document door images. Okay, so basically, this is kind of a hack where you are assuming that the images will be the last thing to be lorded. So if they medicine orderly did the most of the day, OK, And if you open in the social, say yeah, last one to Lord. Yes. Okay, if your website is heavily for third party libraries and you, I mean, I'm just doing it for images, but what you can do is you can do it for anything, OK? Even if you have script so you can check whether the script has been maybe for both also maybe OK so well, in the UK for images are like, very straightforward. Okay, so it's easy to understand. So I have got all images. Now what I'm going to do is simply theater for zeal on. You mean just not now limited. Portland would give you how many majors there there's the document or damages would give you all the images that are there in your back for you. And they're stored in basically yeah, So I for every image, what I'm going to do is I'm going to create. Ah, he's stung. Okay, okay. Okay. So true. Create enemies. Yes, each time Or look, because I'll call the function and then I'm going to give it the source pursuits. Okay, then I'm going to defend function. That's true. Now I want the verdict. OK, Ok, so I I'll be changing the big toe 33% as each of those images or Koko does not Basically you're creating the bottle which will be showing the Progress Party. So the logic here is if you go down in the line, number 30 you have a new object off image and then you're saying it, Mr On Lord Lord er major source According or so So what on earth is a function on Lord isn't event. Okay, discard. Whenever this image gets loaded okay, it's It's the end point of the exploding over announcements the lording has completed. OK? Yeah. So on your discord and it will be calling dysfunction. OK? Yeah. So I also don't know how many meetings that there, so I need to go divide the steps So the number of steps would be been about often means is that okay? Just and then. So every time this lorded function is scored, I didn't. And the new check if sees eyes small step invention still Yeah. Then bring me. No. Then I'll okay, okay. Just remove this orderly, okay? Okay, okay, OK, but remember, warning is not defined, I think. Ok, So much for real order. It gets complicated as you start giving more and more features. Teoh, Maybe the office low because of your Lord. Okay. Okay. So Okay, uh, we need to increase the size of the Tok size of the okay personally. So, as you can see for the progress will have zero You, actually. So what we're going to do here is, uh I see whole, which is, but I have to divide 100 by the number of steps. Okay, on the take the round off. So it doesn't matter. The Lord is very open. Equals 100 by because basically saying well ordered percentage. Europe asshole. You don't make it. 63.666667% voted declared thing steps here. And I think I understand us toe parson, because no one wants percentage. No. Okay, let's do it. Because the basic this is they're showing a percentage of how much noting has been done. OK, OK, so we have I d progress. So I have been working with a degree since last few weeks. Okay, so I'm just getting confusing the I don't think that's ok. OK, I have been using dollar on Ben. Suddenly I have documents or kidney even by not style, perfect and clothes. I wonder why they did you find the sign off logically is dollar. They want to show one. Okay, so I'll increase the okay percentage of every facet. But then, like Okay, you're basically you're changing the style plus persons. OK, it's the CSS. You're changing? Yes. Okay. Every day that angle I'm doing this. I feel like creating Don't do this. Don't I don't think that's not sure. That's so easy to basically okay, You can if you are writing a new order for Jake. Wait. So you don't have a theology query is a lot of time to Lord It says eso Syrian. Yes. So, Doc, using dark 40 okay. And then you're hiding it. This on this teaser display? I like the visibility hidden, actually. Okay? Their differences. If you poor this play Cardona it removes it from the okay. Visibility incident. It just height? Yeah. True. True. But it is still okay. That is the only difference. Yeah, basically, Joab, if you feel from designed by you, we would always want to hide things. Yeah, just remove it because, OK. I mean, the problem is like, if it is occupying, like, 50 pixels off. Okay, A few who are visibility offered it. Then you won't be able to see anything there, but there will be a height off 50 pixels. Okay, then. So we don't want that to happen with the loaded. Okay? Okay. Soul. Okay, so 7. Loaders and Progress Indicator in JavaScript UI - Part 6: So the biggest challenge. If your Lord is not working because, okay, it has to receive Aceh's orphans. It has to be ceases. But the biggest challenge in designing a lord and is check invested because you remove it as soon as the country's loaded. So you can't really find it out. Maybe I think we can stop the removal part of it and see how this Lord nobody had started moving it. Okay, because it's not adding itself. Great, because it's us. See you that this is being called a liar. Border control. You should always like the function that because then you can know which funk actually corded. I don't think that it might regard, but, like no, not getting okay. Is it in black? Is it some public with this? Okay, I think most of the time the four loop has an issue die. Is it even going in stage? Now? I know why. Steve Jobs name I bad. It's because I in the father of hope. Okay, Okay. So if you see document or what I normally will do in this case is I would try to write their particular chord than the console itself and see the feds kind of working out. That's a experience matters. Okay. Yeah. Three. Yeah, I was right, for what you can do is a lot. You have to write a word called Debug within the script itself. If you write it, just write it. Be buggered If after. See, I think I would suggest you to write debug idea debug Bieber. Yeah, yeah, yeah. And then And this is the best thing you should. You were Not really. And if you don't know what is deeper, Okay. So now the debugging will be stopped in the exact location and you have to win the source. Basically, Yeah, I think it's it's it's slow did on or according yes. Have you stopped the debugging? I think somehow your page a script is not been gone. Basically very are calling the function order. It's a function cooked. This is the mistake which can cause you you're alive. Okay, not begin to my sarcastic here. Get out of the business. So and still like your bad looking bodies are coming. Okay, Still, you're getting some matter. That is like a good sign. And it is good because something's up. No, it's me race. Mark, You okay? So the world of what's up in Facebook? Chant people forget the syntax. Of course. Therefore, you should. I just thought that this is I am You sold actually build so easy. Okay? No. Okay. So I think a lot. I don't think the court is good enough. Gets learning, but it is very bad looking order off course I make Okay. I was called trays. Okay. So what the problem was is that the person to do this one? Okay, but it's basically the two others, which he found is, uh, you defining function. You should call it, actually cumin dark. What? We can also do it. Like for the stats Progress start. You can put it equals. Um so basically, you're saying OK, make sure to make this particular element look bigger. So at least the bodice opener that I fear that is just one big city. I think you can make it like it is a big healthy litters the tree cups so foreign say's instruments, points speaking along money than give Looking one picks up to your body. It's a theme Buys is supposed to be like it's yeah. If your customers getting too much money, then make it time. Become more classy again. Now there's nobody initially. There will be nobody because yeah, So this looks like a sea program in 1998. But he has his history, so we can actually make a very nice have been back. Okay, So basically, they definitely would result of finish the main idea which we saw then This definitely is the use off image. We know that. Okay? You made it something which lords at the end. Because if your application is the med center, then you take the assumption. If your application is mostly scripts country, then you take the assumption. And based on that, if you are sure that that last thing which would be ordered you design its grip on this will not be accurately exact. For example, if your website is loaded, Lee, 50% mine can be that it might have actually Lord 60%. So that 10% you have to compromise, I think before people who want efficiency toe speculate less than after controller off cases like images also script also. But But there's a better way to do that. Using the navigation likened assured in the the baby way. We can use the same one, but we'll just change the script here. Okay, let's Let's start finding doesn't function. So so. The market paradigm is not a failure. They said figure because he used performance. Thank you. So this is in building the blows in our eyes. It like it's in big. Okay, developments start taming. Because if it is not in Berlin close In fact, even rather than showing here where they can do is short in the council, okay. And is the best country. So we're document dark. Are. So this is your brother support? Yes. Six on This is fine. Yes, Faith. Fight kind over the years six, which I think that the project Corvis were teaching your six point so they might be There's no grateful order or any navigation opinions provided. Okay, dark performance. Okay, so we give you our object that would have all these values. So the one that we are really concerned about here is Lord given end. Okay. Okay. So this is this is the one where things will have lorded completely on and dark Continent awarded even start. Okay, so basically, this is Yes, five. Yes. Five. Okay, Okay. It will be in year six also have added new features, but the or features are also this. Okay, so? So we'll find the difference between these two. Lord, event and Lord even start. 8. Loaders and Progress Indicator in JavaScript UI - Part 7: so we'll find a difference between these two. Lord, event and Lord even start. Okay? This is the time stamp. Yes. And then if they are the cop because you're even started and there's a difference in time is how well you can kind of do it. I have the timing. No, I need to see it. This Mustang mystery meeting for Oh, can I can have a step function where, like, I'll be increasing the progress bar by 10% or so of another. That step function is released. Okay. Okay. Okay. So basically, at every point, you will be checking the end time. No, I won't be taking the end. They want everything. I just find the difference between the end in the starting. Okay, Andi, I have the difference now, So that is the amount of time the piece is going to take to lord basically. But I hope this variable will get an idea that how much amount off our network downloads often application is so it has got the size off the object. Okay, Okay, that it wants to lord on. Then it lost any for speed. Okay, so that's what they have done internally. Okay. This is how you get to load a performance off your website. Okay, So if you're using this a p a. You get to know how is your safe performing halo Zoom This thing are console little bit control. Plus, because the screen within that you do this loveliness. Okay? Yes. Sufficiency. Ah, Lord event and okay on Did not really Lord even start but don't count Included doing start . Okay. Okay. So this is the difference between these two will give you on approximate name of homage, Lord, even end and Duncan didn't even start. Okay, Okay, so this is the two lawyers. So now the good part is coming where we can see some off the very nice lord us, which you can also use with the application. So s so basically thistle the foster, which we were saying about the downward. Andi, I think the circle which is made this speed off the drawing of the circle is basically depending on how much type banger file our thanks to Lord Natural. And then this is the for the people who love wine. As our last three people were rich people. Oh, no. What is my street have interesting. Go on, then. Thesis. The drawing average we focus on the other three are application also Lord loaders. I think you should Orders given try will share the cords with you on. Let's see how much creative you can become. Yeah, why don't you design some really good loaders for Maybe I've obsessive. So what? One question one quick like, No question. It's kind of firms confession. Is that venomous walking in the project? It was your project, the investor customer. What I did, I cut the logo in the different parts and in the loading time, the logo was kind of just coming together and merging and forming little a company. And they got impressed not from the Abbott with on then every time they just refreshed that before five times before using it just to see that company logo for me and that I spend quite a lot of time and like doing that little artistic side. So just go to try for working for big companies. They will just kind of love it. And then this is the fasting. Your customer will be seen, the applications loaded First impression is the past. Okay, so the system and our webinar on. And then now we have covered basically two types off on Lourdes on duh. What the would also like you to do this? Designer orders very beginning the peace of the court, which he wrote. And I will also share the U F five chord for the Lord husband. We would like her design some of the nice loader and also share with this really prescription or the commerce section on. If you're facing any graze, you can always reach out to us. We're here to help us.