I'm using ajax to update a table's contents, I would like to use the semantic-ui's built-in class "Loader" to show some loading animation at the center of the table while getting the contents but that does not seem to work with <table> tag.
<div class="ui active loader">
<table class="ui unstackable striped table segment">
<tr><td>id</td><td>name</td></tr>
<tr><td>1</td><td>test test</td></tr>
</table>
</div>
How do I get this to work?
I'm using ajax to update a table's contents, I would like to use the semantic-ui's built-in class "Loader" to show some loading animation at the center of the table while getting the contents but that does not seem to work with <table> tag.
<div class="ui active loader">
<table class="ui unstackable striped table segment">
<tr><td>id</td><td>name</td></tr>
<tr><td>1</td><td>test test</td></tr>
</table>
</div>
How do I get this to work?
Share Improve this question edited Mar 10, 2018 at 18:48 Graham 7,80220 gold badges64 silver badges91 bronze badges asked Jan 28, 2016 at 20:58 PyQLPyQL 1,8303 gold badges18 silver badges23 bronze badges1 Answer
Reset to default 22A loader is not meant to contain the thing that's loading. It's used in conjunction with a dimmer.
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="dimmable">
<div class="ui active inverted dimmer">
<div class="ui loader"></div>
</div>
<table class="ui unstackable striped table segment">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>test test</td>
</tr>
</table>
</div>Or it can be standalone if inside a segment
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui basic segment">
<div class="ui active loader"></div>
<table class="ui unstackable striped table segment">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>test test</td>
</tr>
</table>
</div>