1 00:00:01,490 --> 00:00:08,230 Hello, in this video, we are going to implement Spinner's so what is a spin in Bidstrup This will 2 00:00:08,240 --> 00:00:08,730 go here. 3 00:00:09,290 --> 00:00:09,830 That's it. 4 00:00:10,160 --> 00:00:16,190 Is a great way of showing to the U.S. that something low the loading, something's happening, something's 5 00:00:16,190 --> 00:00:17,780 in progress of a few different one. 6 00:00:18,050 --> 00:00:20,510 I will show you three different ways of doing it. 7 00:00:20,810 --> 00:00:25,610 Feel free to come to this website or provide a link in the description to see all the different ways, 8 00:00:25,610 --> 00:00:28,670 all the different color, the patterns, all the things that you can do. 9 00:00:29,210 --> 00:00:38,390 OK, so what we're going to do first of all, this on a break rule tag, just because if you don't, 10 00:00:38,600 --> 00:00:41,000 the spinner will literally be touching the top. 11 00:00:41,150 --> 00:00:43,860 If there's a low flow. 12 00:00:43,880 --> 00:00:44,180 Nice. 13 00:00:44,180 --> 00:00:45,180 If it's enough of that. 14 00:00:45,440 --> 00:00:52,010 OK, so the first one to put Div Klasky across the dashboard. 15 00:00:52,370 --> 00:00:57,110 So this is just a follow one of the circle of a doughnut essentially. 16 00:00:57,530 --> 00:01:01,940 And the role will be status. 17 00:01:03,830 --> 00:01:04,250 Yeah. 18 00:01:04,620 --> 00:01:16,830 Going to have span of a span class Assad owning only load. 19 00:01:17,210 --> 00:01:18,750 So this is the supreme leader. 20 00:01:18,750 --> 00:01:21,380 Be good to accommodate that side of you. 21 00:01:21,820 --> 00:01:23,690 Well there we go. 22 00:01:23,720 --> 00:01:24,170 That's it. 23 00:01:24,680 --> 00:01:26,870 And my thinking, why this loaded? 24 00:01:27,260 --> 00:01:28,550 This isn't loading anything. 25 00:01:28,700 --> 00:01:34,760 This is just a visual cue to the user that something is loaded, obviously, that you would implement 26 00:01:34,760 --> 00:01:38,530 to avoid JavaScript, maybe some sort of back in court or placement. 27 00:01:38,900 --> 00:01:44,720 And then using JavaScript, you could get rid of this load in like onto other next task where I want 28 00:01:44,720 --> 00:01:45,800 you to do it. 29 00:01:45,800 --> 00:01:53,130 Let's say after five seconds, remove this spinning item and maybe display some text, for example. 30 00:01:53,130 --> 00:01:54,200 It will have to be loaded. 31 00:01:54,200 --> 00:01:55,190 It could be hardcoded. 32 00:01:55,190 --> 00:02:00,590 Just use JavaScript and you could, you know, implement the query library and use as well. 33 00:02:00,770 --> 00:02:02,330 It does make things easier. 34 00:02:02,900 --> 00:02:08,090 OK, so next one, a couple of breakthrough tags. 35 00:02:08,090 --> 00:02:13,610 Just because I remember when I implemented it for the video to test it, this looked a lot nicer, too. 36 00:02:15,510 --> 00:02:17,830 Obviously, you would have for the content of the. 37 00:02:17,840 --> 00:02:23,630 Well, the next one will show you is almost glow. 38 00:02:23,780 --> 00:02:30,710 One biner dash ro text danger. 39 00:02:30,740 --> 00:02:33,350 So this is just the color, the theme of it. 40 00:02:33,350 --> 00:02:36,590 And you can see all of that on the bootstrap website luks that. 41 00:02:36,590 --> 00:02:41,600 I would provide a link to that in the description role equals status. 42 00:02:45,460 --> 00:02:54,160 Spanned class, equal parts only lower than 43 00:02:58,930 --> 00:03:02,110 unemployment, the last one as well while I'm here. 44 00:03:02,500 --> 00:03:05,020 This is going to be in a slightly different format. 45 00:03:05,030 --> 00:03:10,060 This is going to be within a button and upper class BTM. 46 00:03:10,210 --> 00:03:18,970 Feel free to check out my video on buttons and bootstrap and all that they can do with that and not 47 00:03:19,060 --> 00:03:20,080 our primary. 48 00:03:20,080 --> 00:03:22,030 Our primary primary. 49 00:03:24,590 --> 00:03:30,830 Time, equal opportunity for the disabled, because that's what you probably do when something like 50 00:03:30,830 --> 00:03:32,540 this happened, maybe you've clicked on the bottom. 51 00:03:32,900 --> 00:03:39,410 You could implement these attributes in JavaScript and put the Spiner inside as well, which we're going 52 00:03:39,410 --> 00:03:41,960 to right now span 53 00:03:44,600 --> 00:03:54,140 less than a dash board and dash the dash s.m. 54 00:03:54,200 --> 00:04:01,730 So small roll equals status. 55 00:04:04,080 --> 00:04:14,630 Area, that's then because nothing in here were actually going to have Lodin text No. 56 00:04:16,680 --> 00:04:22,340 And to reload, see what we get with this is sort of like a growing flash, you want to see more classic 57 00:04:22,350 --> 00:04:22,610 one. 58 00:04:22,830 --> 00:04:26,890 We've got this classic one with in a item like this. 59 00:04:27,360 --> 00:04:29,500 So let me have a look what we got. 60 00:04:29,580 --> 00:04:30,000 Yeah. 61 00:04:31,500 --> 00:04:31,880 Yeah. 62 00:04:31,890 --> 00:04:32,850 Everything looks. 63 00:04:35,460 --> 00:04:37,940 This should have been in here. 64 00:04:42,480 --> 00:04:43,080 There we go. 65 00:04:43,320 --> 00:04:47,880 Formating better and it looks better instead of just been at the bottom thinking something look weird. 66 00:04:48,060 --> 00:04:48,650 But there you go. 67 00:04:48,780 --> 00:04:54,900 That is how you implement Spinner's Box said there are more that you can do with it in terms of the 68 00:04:54,900 --> 00:04:58,470 alignment, the positioning, the sizes. 69 00:04:58,710 --> 00:05:01,580 You can have it with one of the flashy ones inside. 70 00:05:01,590 --> 00:05:02,680 You can have that text. 71 00:05:03,060 --> 00:05:04,100 Feel free to experiment. 72 00:05:04,110 --> 00:05:05,250 That's the best way to learn. 73 00:05:05,460 --> 00:05:06,300 And unusual usual. 74 00:05:06,310 --> 00:05:10,080 If you have any questions, feel free to put me a message and I'll look forward to seeing you in the 75 00:05:10,080 --> 00:05:11,070 next video.