The basics: hx-indicator and the special htmx loading classes
So I want to talk about h x indicator. And at its most basic level, this lets you show loading indicators. But actually, h x indicator is not necessary to show loading indicators. It but it's it's it's an attribute that will let you sort of customize a little bit, how you show your loading indicators. So let's talk a little bit first about the special, HTMLX indicator classes and HTMLX request.
Lazarus:So, these are CSS classes that are added in HTMX, so you have access to them. They are added to the different, to the different elements as, you know, as decided by, by when the request happen, where they happen from, and by how h x indicator where it puts them. So you place your loading indicators wherever you want, and those are usually like little SVG's or GIF's, like a little spinning thing. Whatever kind of loading indicator you wanna do. You you can make it whatever you want.
Lazarus:It could just be like a div that has the word loading inside it. So you make that decision how you want to handle your loading in in any given spot, and you then give them the special class htmxdashindicator. So this is not an attribute, this is a class, class equals htmxindicator. As soon as you do that, if they are within the dom section of your request, so somewhere, you know, with their child of whatever the, you you know, or even at the same level, if they're a child of the dom section that made the request, that's enough. That's all you need.
Lazarus:When the request starts and is sent, those indicators will appear. So they start off invisible, and that's because by default, h t m x gives them an opacity of 0. So they still take up space in your DOM, but they have an opacity of 0. And then when the request starts, it makes that opacity 1 for those h tmx indicators. So that's all you have to do is just add that h tmx indicator class, and that will automatically already happen.
Lazarus:It's a nice little bit of magic. So what is happening there? It is a secret class, and I just say secret because, you know, you don't see it unless you're, like, unless you're looking into the DOM and and doing an inspect. When a request happens, every time, always, whatever element started that request is going to have a class added to it called h t m x dash request. So h t m x has a little bit of CSS built into it.
Lazarus:So when you just include the CDN, the JavaScript, it's got the CSS built in so that any h t m x indicator class starts off with opacity 0 when it has above it an h tmx request class, that's when it gets the opacity 1. So when you make that request and the h tmx request class is added, and this can be any request, hx get, hx post, etc. That class gets added to whatever triggered the request, and everything below it that has that htmx indicator class on it now gets opacity 1. So those are all your indicators, your little spinners, those all have opacity 1 all of a sudden, and so they are now visible. So a little bit of magic, but the magic is easy to use and to customize.
Lazarus:So it's, you know, it's not that not that much is happening. It's just adding this h tmx request class when a request happens to the element. So if you want a different effect, you can customize it. So if you want a different effect than the built in opacity, fade in and out, you can define your own version of the HTML request and HTML indicator classes. So they're just CSS classes, So you can make them whatever you want.
Lazarus:There's an example in the docs of defining a display none. So if you want it to just appear and disappear, which, you know, that can be, it's just another way to do it. You know, you can that means it won't take up space when it's at display none. So you're gonna get a little jump, of your of your dom if something's gonna move around if you don't account for that space. But you can define those however you want.
Lazarus:Whatever you want your your starting state to be when they're not visible, when the loading things are not visible. You know, maybe they are visible, they just are a different color, and then once you're loading they become something else. You know, you get to decide kind of with your CSS how you want to set those 2 classes up. And that's the h tmx dash request is one class, and h tmx dash indicator is the other one. So for the most part, all you need to do, we haven't even talked about h x indicator.
Lazarus:Nothing uses that yet, this attribute. Because right now, all you're doing is you're adding the h t m x h t m x dash indicator class onto the things. So the time when you would use the attribute h x dash indicator is when you want more control over where the h tmx request class is added. So by default, that class is added to whatever triggered the request. But if you use a check stash indicator, you can put a CSS selector into there for any place that you want on the page to receive that HTML request class.
Lazarus:So, you know, you could have your your loading element somewhere else completely outside of the DOM of where, you know, your the button that triggered it is. Maybe you have something that covers your whole screen with a loading thing. Maybe you keep a little thing in the bottom right. You can put your hdx indicator wherever you want on the page, and then you use that hxdashindicator to target that specific part of the DOM, that's outside to get your exact element. So it's a really nice flexible way, to let the user know that something is loading, and you can customize it by doing some you could you could customize it by doing something like setting the entire HTMLX request class in your CSS to have opacity 0.5.
Lazarus:So what would that do? Then you'd be able to actually see what's happening. When you click on something, you would see, okay, the DOM or the, element that is receiving this HTML request class automatically behind the scenes, now you'd be able to see. And that actually might just be enough. That might be what the user would want also.
Lazarus:You know, when you click something, it shows you, okay, here's what is about to get loaded. And then once it loads, you know, then it goes in there and that class gets taken off and your opacity goes back to 1. So I think this is a really really cool flexible I think of it as core front end functionality, because I think at this point users expect to see they expect to know what's happening. It's just something that's it's just like a pleasantry. If you're gonna be doing this where you're loading little bits of the DOM together and you're kind of not doing full page reloads, this type of thing, it's just it's very core to the whole experience, and it's a really nice HTML has a really nice way of kind of setting this up, and gives you full control over it with just a couple CSS classes, and, you know, this HX indicator attribute to target exactly where you wanna go with it.
