How to Create a Button With Loading Spinner - HTML & CSS Tutorial For Beginners

hey guys how you going my name is dom and in today's video we're going to be using html and css in order to create a button which has support for a loading animation okay so this right here is going to be the finished product as we can see it is currently a fairly straightforward button but if i was to click on the button we can see it transforms into a state which has a loading spinner right there so of course this will indicate to your user that you know something is saving or something is loading whatever it might be it is going to indicate that something is happening okay so this right here is very easy to create using only html and css so let's go inside this tab right here and of course begin from scratch to create what we just saw okay so going inside the the text editor right here the first step is going to be to create a new button with a type here of something like button you can of course use type submit it's going to be totally up to you and inside here though let's add a class of button so of course this right here this class will allow us to of course target this button in css okay so going inside the actual button itself let's add a new element right here a new span tag with a class of button underscore underscore text and inside here we can of course specify the buttons text so we can say for example save changes right here if i was to save this we get something like this in the browser so now let's use css to of course take this and transform it into something like this so going inside the style tag up here let's target the class of button and the first thing to do and a very important thing to do is going to be to apply a a position here of relative we're going to see why this right here is really important later on but essentially it is crucial to getting the actual spin out to work okay so we can also apply here a padding of 8px and 16px we can say a background of hash zero zero nine five seven nine we can say a border of none and the same thing goes for an outline we can also say here a border radius of two px to give us slightly rounded corners and lastly we can say our cursor of pointer to of course give that feedback to the user so now saving this right here is going to give us something like this of course looking not too bad so far but if i was to press on the button we can see there is no user feedback so let's make the background color darker when pressing on the button so going back inside here let's target the button then we can say colon active and basically whenever the button is active or it is pressed on we can just say a background here of a darker color for example zero zero seven a and then six three so now saving this will give us something like this if i was to press on the button we get this right here okay so now let's move on to styling up the actual text so let's target the button underscore underscore text class right here and we can say first off a font of bold then 20px and then we can say something like quicksand and then sans serif okay so obviously right here i'm just setting um sorry i'm setting my um my font weight then i'm setting the font size then of course i'm setting the font family okay so we can also say here a color of white and lastly we can say transition all at 0.2 seconds so we're going to see how this transition works very shortly but for now let's save this and we get something like this in the browser okay so now let's move on to of course you know creating that loading spinner and of course that loading state in general okay so the first thing to modify here is going to be the text as we can see in the previous example the text is going to fade away and of course fade back in we're moving to and from out so to and from that loading state okay so let's go inside here and we're going to add a class right here we're going to add a class to the button and it's going to be button dash dash loading so this button dash dash loading class whenever you add this class to the button we expect it to transform into the state which looks like this of course the loading state okay so that is how the button is going to work okay so now if i was to say right up here button dash dash loading then dot button underscore underscore text so basically targeting the text whenever the button is loading we can say right here a visibility of a hidden okay so what this does is if i save this we can see it is going to hide the text but also keep its actual size as if it is still there and that is important to ensure that the button doesn't you know change size if i was to make this for example a display of none we can see the button actually changes in size so of course a visibility of hidden won't have this problem now we can combine this with opacity of a zero so now essentially we can see here with the combination of transition all at 0.2 seconds and this opacity it is going to fade in and fade out okay so with that being said if i was to go into the into the developer tools here and i just inspects the actual button i can then remove the button dash loading class and we can see the text fades back in okay so we saw right there if i was to then add the class back so button dash dash loading so now it's back into the loading state we can see it fades away so that is what the transition and the opacity of xero is doing okay so now let's move on to actually doing the loading spinner okay so going back inside here we can target button dash dash loading and we're going to be using css sudo elements to of course create that loading spinner so if i say colon colon after this right here for those of you who don't know it is going to create a virtual element inside css which can be styled just like any other html element okay so that being said let's add a content here of empty string and this is a requirement in order to get it to display we can also say here a position of absolute so this is where the position of relative right up here comes into play so basically with this combination the relative and the absolute it is going to allow us to position the actual spinner in essentially the center of the actual button okay so for example if i was to say width here of 16 px and a height of also 16 px and a background of red for example and i save this we can see the actual spinner or soon to be spinner is in a very weird place okay so i can move this to wherever i want so for example if i say top of 0 and a left of 0 it's going to move into the top left corner and that is what like i said the position of absolute and the relative does if i was to remove this relative we can see it goes away differently if i put it back it is going to basically have the top and left in the context of the actual button itself okay so how do we actually move this right here into the center well we can basically do this we can say top of 0 we can say left of 0 we can say a right of 0 and lastly we can say a bottom of 0 and we can also say a margin of order so right here this combination of this combination of rules we'll position this right here in the center just like that so now essentially we need to change this actual square into of course a loading spinner so to achieve that let's remove this background and we can say right down here a border of something like let's do let's do 5px solid and then transparent then we can say border top color we can then say white so right here if i save this we get something like this might actually make this 4px make it a bit thinner as we can see we've got the square and it's only got a top a top border okay so now we can simply transform this into a circle and it's going to give us that circle effect so let's go inside here we can say border radius make this 50 percent and now like i said it's going to be a circle just like this so now it's going to be as easy as animating this circle so right down here we can specify a new keyframes and we can say for example right here button dash loading dash spinner okay so now inside here we can say from and for the from we can say transform then rotate at 0 turn then we can say right down here 2 and 2 it's going to be 1 turn so right here what we're doing is basically specifying an animation we're saying the animation is going to take the spinner from a 0 turn so basically it's going to be the default right here zero turn as it is right now to a one turn so from zero to one whole turn giving us that 360 spin so now to apply the animation we can say right here animation then we can say button loading dash spinner as of course the animation name then we can say one second then ease and then infinite right here so basically the animation is going to take one second we're going to have this timing function right here and also it's going to run infinite amount of times if i was to save this we get this right here as we can see it is working perfectly fine now you can of course customize this timing function to be for example you can say linear and that will create a linear animation something like that if that is preferred by you personally i like the ease one right here so now how do we actually use the loading class and of course make it turn from nonloading into loading well we need javascript in order to toggle this class right here so for example we can actually go inside here and for the button as a demonstration we can simply just say something like this we can say on click so when the button gets clicked on we can just say this so basically this refers to the button itself so we can say this dot class lists dot toggle then pass through here button dash dash loading okay so basically when you click on the button it is going to toggle the existence of the button-loading class so now if i was to click on it we get of course the loading class right there do it again and it goes away so that's one example of how to use it obviously it is not too practical so a better example might be something like this where basically if i remove this on click right here remove that and then go inside the actual script tag right down here i can firstly for example get a reference to the button so i can say const btn equal to document.queryselector and i can say right here dot button to get the first button with a class of button right here then i can just say for example let's just do btn.class list dot toggle then i can just say once again button dash dash loading and of course now if i save this it is going to shut away it is going to apply this button loading class so of course in your javascript you can change when this thing gets called basically this line right here this classlist toggle line is going to be what you want to use in order to of course you know set and unset your loading state one last thing you can actually force it so for example if i want to guarantee it is going to exist i can just say add so classlist.add it's going to add that class i can then say also dot remove and that of course is going to remove that class right there okay so i'll leave usage examples in the description or in the in the comment section below for you to look at as well as the source code okay so thanks for watching guys and i'll see you in the next video

Channel: dcode

Views: 14,053

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, web app, website, application, for beginners, html, html5, css, css3, animation, animations, transition, transitions, keyframes, rotate, spinner, spinner animation, loader, loading, form save, save button, button, custom buttom, custom submit button, loading spinner

Id: GWw4qxF62hA

Length: 12min 59sec (779 seconds)

Published: Thu Nov 12 2020