1.9 SpinKit

Welcome back to the course, in this lesson, you'll learn how to add some amazing CSS spinners to your website. And while there are tons of libraries out there that offer this, for this course I chose one that's called SpinKit and it's made by Tobias Ahlin, so let's check it out. You can find the spin kit at tobiasahlin.com/spinkit, and here you can see a very nice demo of all the loaders that are offered in this library. So let me quickly show you how to download these, and how to work with them, we'll install this library via NPM. So I'm gonna open up my code kit app here and we're gonna choose spinkit install, all right, and then back in the code editor, we're gonna go into here create the link and for href, we're gonna navigate to node modules spinkit. And we're going to choose spinkit.css, and if we open this file, we can see exactly how these kits are created. And the author gives us the exact markup that we need the actual HTML markup we need in the CSS file. So when we find a loader that we like we simply copy this HTML and paste it in our own document. So let's go ahead and do that right now, I'm gonna start here with a simple spinner, and that's called SK plain and that result looks like this. Now, just in case the color is not correct, there are two ways we can change that we can either edit the original CSS file, as you can see here, Tobias uses CSS variables to define the colors. So you can grab a different color from here, or just in case you don't want to tamper with original source files, you can go into your CSS file, and you can target that element. And you can simply set a background color to whatever you want, let's saw d75s62 and that will give us the color that we want. Now of course how you edit these colors will depend from, from kit to kit, basically from loader to loader. You just have to see what kind of structure it has and what elements receive, the sk-color variable. In this case for example, it's the before pseudo element of sk-chase-dot. All right, so let's add some more spinners to our website because we have a lot of room here. And let me just pop this over to the other side, so on this next one, I want to include the Chase Loader and the Chase Loader looks something like this. So just copy it from there, Paste it in, and now if we do a refresh, we can barely see it here. So let's actually use this same color, And apply it to every single spinner that we'll be creating, so we can actually see what we're doing. Okay, on the third one, I'm gonna choose a spinner that is called swing, so let's see if we can find it here. Swing, there we go, so just copy that, paste it in, and for the fourth one gonna choose one that's cube grid or actually a grid. So, just copy this, and paste it wherever you need it. And now, we have four spinners it's that easy to add them. Now, before we wrap up this lesson, I just wanna make a quick mention, when getting the HTML for these spinners, get it either from the official GitHub page, right? You'll see all of the examples here, or get it directly from CSS, just like I did here, because the the sources that you get from the website are not actually correct. Probably the author forgot to update these sources, so either get them from GitHub or from the original CSS file. All right, and that's it for SpinKit, pretty cool loaders very well made, I highly recommend this library. Now for our eighth and final piece of the puzzle, we'll discuss about media queries and these sit at the foundation of every responsible web site out there. And while it's totally possible to write them in plain CSS, using a dedicated CESS library will definitely speed up the process. So, in the next lesson, you'll learn how to use the NQCSS library, see you there.