如何在浏览器上显示“没有结果”而没有延迟

Question

我正在努力做一件简单的工作，但如果没有“肮脏”的解决方案，我就无法做到。这是滞后的，我100％肯定不会“专业”完成。

如果没有找到结果，我想要的就像“没有结果”一样简单，显示表格行。

这就是“脏”解决方案的工作原理：

1. 首先，我们打开页面并查看此视图​​。
2. 要开始搜索（并触发keyup事件），让我们在其中一个标签中写下一些没有结果的内容。试试“cr”。

3. 好的，我们在上一张图片中有第一个标签中的一个结果。我试图“专业”地做到这一点，但我只实现了当前标签的完美功能，但是，当用户输入内容时，其他选项卡也应该做出反应。

   让我们打开其他标签，看看我们有什么。

4. 最后一个：

是的，它运作得很好。但是你没有在这些图像中看到一件事。当用户单击其中一个选项卡时，“无结果”行滞后。观看此视频：https://youtu.be/oevRwdsqgzg。

如果没有“滞后无结果”表格行或“专业”，我怎么能这样做？ codepen的代码可以在这里找到：https://codepen.io/Kestis500/pen/VQaNoP。

或Stacksnippet：

$(function() {
  $("html").removeClass("no-js");
  $("#tabs").tabs({
    beforeActivate: function() {
      setTimeout(function() {
        $("#search").keyup();
      }, 0);
    }
  });
  var users = [
      "ESL_SC2",
      "OgamingSC2",
      "cretetion",
      "freecodecamp",
      "storbeck",
      "habathcx",
      "RobotCaleb",
      "noobs2ninjas",
      "mhayia"
    ],
    index,
    ajaxDone,
    userResults = [],
    $search = $("#search"),
    keyCode;

  var getUserResults = function(callback) {
    var requests1 = users.map(function(user) {
      return $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/users/" + user,
        datatype: "json",
        cache: false
      });
    });

    $.when
      .apply(null, requests1)
      .done(function() {
        for (var i = 0; i < arguments.length; i++) {
          var response = arguments[i];

          var user = response[0];

          userResults[i] = {
            name: user.display_name
          };
        }

        callback();
      })
      .fail(function() {
        alert(
          "User request failed. Please contact by email n3olukas@gmail.com or try again."
        );
      });
  };

  getUserResults(function() {
    var requests2 = users.map(function(user) {
      return $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/streams/" + user,
        datatype: "json",
        cache: false
      });
    });

    $.when
      .apply(null, requests2)
      .done(function() {
        for (var i = 0; i < arguments.length; i++) {
          var response = arguments[i];

          var stream = response[0];

          if (stream.stream !== null) {
            userResults[i].status =
              stream.stream.channel !== undefined ? "Online" : "";
            userResults[i].title =
              stream.stream.channel !== undefined ?
              stream.stream.channel.status != undefined ?
              stream.stream.channel.status :
              "" :
              "";
            userResults[i].url =
              stream.stream.channel !== undefined ?
              stream.stream.channel.url !== undefined ?
              stream.stream.channel.url :
              "" :
              "";
          }

          if (userResults[i].name) {
            $("#tabs-1 table").append(
              '<tr><td><a href="https://twitch.tv/' +
              userResults[i].name +
              '">' +
              userResults[i].name +
              "</a></td><td>" +
              (userResults[i].status ? "Online" : "Offline") +
              "</td><td>" +
              (userResults[i].title ? userResults[i].title : "") +
              "</td></tr>"
            );

            if (userResults[i].status && userResults[i].title) {
              $("#tabs-2 table").append(
                '<tr><td><a href="https://twitch.tv/' +
                userResults[i].name +
                '">' +
                userResults[i].name +
                "</a></td><td>Online</td><td>" +
                (userResults[i].title ? userResults[i].title : "") +
                "</td></tr>"
              );
            }

            if (!userResults[i].status) {
              $("#tabs-3 table").append(
                '<tr><td><a href="https://twitch.tv/' +
                userResults[i].name +
                '">' +
                userResults[i].name +
                "</a></td><td>Offline</td></tr>"
              );
            }
          }
        }

        if (!$("#tabs-3 tr:not(:first-child)").length) {
          $("#tabs-3 table").append(
            '<tr class="no-results"><td colspan="2">No Results</td></tr>'
          );
        }

        $("body").addClass("loaded");
      })
      .fail(function() {
        alert(
          "Stream request failed. Please contact by email n3olukas@gmail.com or try again."
        );
      });
  });

  $("#search").keyup(function(e) {
    var val = $(this)
      .val()
      .toLowerCase();

    $("#tabs tr:not(:first-child)").hide();
    $("#tabs .no-results").remove();
    $("#tabs tr:not(:first-child)").each(function(i) {
      var text = $(this)
        .text()
        .toLowerCase();

      if (text.indexOf(val) != -1) {
        $(this).show();
      }

      if ($('#tabs tr:not(:first-child)').length - 1 == i) {
        $('tr').not(':hidden').css('border-top', 'none');
      }
    });

    if (!$("#tabs-1 tr:not(:first-child):visible").length &&
      $("#tabs-1").is(":visible")
    ) {
      $("#tabs-1 table").append(
        '<tr class="no-results"><td colspan="3">No Results</td></tr>'
      );
    }

    if (!$("#tabs-2 tr:not(:first-child):visible").length &&
      $("#tabs-2").is(":visible")
    ) {
      $("#tabs-2 table").append(
        '<tr class="no-results"><td colspan="3">No Results</td></tr>'
      );
    }

    if (!$("#tabs-3 tr:not(:first-child):visible").length &&
      $("#tabs-3").is(":visible")
    ) {
      $("#tabs-3 table").append(
        '<tr class="no-results"><td colspan="2">No Results</td></tr>'
      );
    }
  });

});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url("https://images8.alphacoders.com/702/702959.jpg");
  background-attachment: fixed;
  background-size: cover;
}

* {
  box-sizing: border-box;
}

.text-center {
  text-align: center;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs ul a {
  background-color: #f44336;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 10px 0;
  float: left;
}

#search {
  width: 100%;
  height: 3.125rem;
  border: none;
  font-size: 13px;
  color: #4f5b66;
  padding: 0 .9375rem;
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #fff;
}

.overflow-x-auto {
  overflow-x: auto;
}

tr {
  background-color: #f44336;
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

tr:first-child {
  background-color: #673ab7;
  border: none;
}

tr:nth-child(2),
.no-results {
  border-top: none;
}

td:last-child {
  width: 50%;
}

td:first-child {
  width: 35%;
}

td:nth-child(2):not(:last-child) {
  width: 15%;
}

table td {
  padding: 0.625rem 5px;
}

:focus {
  outline: 0;
}

.ui-state-active a {
  background-color: #2196f3 !important;
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

table a:before,
footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

table a:hover:before,
footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.search-results {
  background: #fff;
  margin: 1.5625rem 0;
  border-left: 0.3125rem solid #0ebeff;
  opacity: 0;
  display: none;
}

.search-results h4,
.search-results p {
  margin: 0;
  padding: 0.625rem;
  text-align: left;
}

.search-results a:before {
  background-color: #0ebeff;
}

.twitchtv-container {
  width: 45%;
  margin: 2.5rem auto 0;
}


/* Screen loader */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 9.375rem;
  height: 9.375rem;
  margin: -4.6875rem 0 0 -4.6875rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1.75s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.75s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  right: 0.3125rem;
  bottom: 0.3125rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #f7d130;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.9375rem;
  right: 0.9375rem;
  bottom: 0.9375rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #0fff;
  -webkit-animation: spin 1.25s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.25s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

.loaded #loader-wrapper,
.loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000428;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader {
  opacity: 0;
  position: fixed;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.no-js #loader-wrapper {
  display: none;
}


/* Loading animation */


/* Loading animation */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  top: 0.59375rem;
  right: 0.9375rem;
  pointer-events: none;
  display: none;
}

.lds-eclipse {
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0.08rem 0 0 #0ebeff;
}

@media (max-width: 71.875em) {
  .twitchtv-container {
    width: 65%;
  }
}

@media (max-width: 50em) {
  .twitchtv-container {
    width: 85%;
  }
}

@media (max-width: 25em) {
  .twitchtv-container {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<div id="loader-wrapper">
  <div id="loader">
  </div>

  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>
<div class="twitchtv-container text-center">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">All</a></li>
      <li><a href="#tabs-2">Online</a></li>
      <li><a href="#tabs-3">Offline</a></li>
    </ul>
    <input type="text" id="search" placeholder="Search...">
    <div id="tabs-1">
      <div class="overflow-x-auto">
        <table>
          <tr>
            <td>User</td>
            <td>Status</td>
            <td>Title</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="tabs-2">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-3">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
        </tr>
      </table>
    </div>
  </div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

Answer 1

因此，我在评论中讨论的解决方案（min-height trick）对于你的html结构几乎不可行，因为在我的测试中，如果内部没有额外的行，则不应该为表设置最小高度。可能有太多要更改的CSS规则，或者要添加的虚拟行。

然而，在Javascript部分可以实现相同的技巧。因此，这里的闪烁可能是因为$("#search").keyup();在每个标签更改时被触发，并且在此函数内部，即使情况没有改变，您也系统地从表中删除“无结果”。 / p>

一个解决方案（可能有其他相同的原理）是每次在函数开始时不删除行，而是在结果之后有条件地删除行。它似乎在这里运行良好，不容易看到，因为我的计算机上的闪烁非常小。变更在他们面前有评论。

$(function() {
  $("html").removeClass("no-js");
  $("#tabs").tabs({
    beforeActivate: function() {
      setTimeout(function() {
        $("#search").keyup();
      }, 0);
    }
  });
  var users = [
      "ESL_SC2",
      "OgamingSC2",
      "cretetion",
      "freecodecamp",
      "storbeck",
      "habathcx",
      "RobotCaleb",
      "noobs2ninjas",
      "mhayia"
    ],
    index,
    ajaxDone,
    userResults = [],
    $search = $("#search"),
    keyCode;

  var getUserResults = function(callback) {
    var requests1 = users.map(function(user) {
      return $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/users/" + user,
        datatype: "json",
        cache: false
      });
    });

    $.when
      .apply(null, requests1)
      .done(function() {
        for (var i = 0; i < arguments.length; i++) {
          var response = arguments[i];

          var user = response[0];

          userResults[i] = {
            name: user.display_name
          };
        }

        callback();
      })
      .fail(function() {
        alert(
          "User request failed. Please contact by email n3olukas@gmail.com or try again."
        );
      });
  };

  getUserResults(function() {
    var requests2 = users.map(function(user) {
      return $.ajax({
        url: "https://wind-bow.glitch.me/twitch-api/streams/" + user,
        datatype: "json",
        cache: false
      });
    });

    $.when
      .apply(null, requests2)
      .done(function() {
        for (var i = 0; i < arguments.length; i++) {
          var response = arguments[i];

          var stream = response[0];

          if (stream.stream !== null) {
            userResults[i].status =
              stream.stream.channel !== undefined ? "Online" : "";
            userResults[i].title =
              stream.stream.channel !== undefined ?
              stream.stream.channel.status != undefined ?
              stream.stream.channel.status :
              "" :
              "";
            userResults[i].url =
              stream.stream.channel !== undefined ?
              stream.stream.channel.url !== undefined ?
              stream.stream.channel.url :
              "" :
              "";
          }

          if (userResults[i].name) {
            $("#tabs-1 table").append(
              '<tr><td><a href="https://twitch.tv/' +
              userResults[i].name +
              '">' +
              userResults[i].name +
              "</a></td><td>" +
              (userResults[i].status ? "Online" : "Offline") +
              "</td><td>" +
              (userResults[i].title ? userResults[i].title : "") +
              "</td></tr>"
            );

            if (userResults[i].status && userResults[i].title) {
              $("#tabs-2 table").append(
                '<tr><td><a href="https://twitch.tv/' +
                userResults[i].name +
                '">' +
                userResults[i].name +
                "</a></td><td>Online</td><td>" +
                (userResults[i].title ? userResults[i].title : "") +
                "</td></tr>"
              );
            }

            if (!userResults[i].status) {
              $("#tabs-3 table").append(
                '<tr><td><a href="https://twitch.tv/' +
                userResults[i].name +
                '">' +
                userResults[i].name +
                "</a></td><td>Offline</td></tr>"
              );
            }
          }
        }

        if (!$("#tabs-3 tr:not(:first-child)").length) {
          //test if it exists before appending
          if(!$("#tabs-3 .no-results").length){
            $("#tabs-3 table").append(
              '<tr class="no-results"><td colspan="2">No Results</td></tr>'
            );
          }
        }

        $("body").addClass("loaded");
      })
      .fail(function() {
        alert(
          "Stream request failed. Please contact by email n3olukas@gmail.com or try again."
        );
      });
  });

  $("#search").keyup(function(e) {
    var val = $(this)
      .val()
      .toLowerCase();

    $("#tabs tr:not(:first-child)").hide();
    //$("#tabs .no-results").remove(); //leave the rows for the moment
    $("#tabs tr:not(:first-child)").each(function(i) {
      var text = $(this)
        .text()
        .toLowerCase();

      if (text.indexOf(val) != -1) {
        $(this).show();
      }

      if ($('#tabs tr:not(:first-child)').length - 1 == i) {
        $('tr').not(':hidden').css('border-top', 'none');
      }
    });

    if (!$("#tabs-1 tr:not(:first-child):visible").length &&
      $("#tabs-1").is(":visible")
    ) {
      //test if it exists before appending
      if(!$("#tabs-1 .no-results").length){
        $("#tabs-1 table").append(
          '<tr class="no-results"><td colspan="3">No Results</td></tr>'
        );
      }
    }else{
      //test if it exists before removing
      if($("#tabs-1 .no-results").length){
        $("#tabs-1 .no-results").remove();
      }
    }

    if (!$("#tabs-2 tr:not(:first-child):visible").length &&
      $("#tabs-2").is(":visible")
    ) {
      //test if it exists before appending
      if(!$("#tabs-2 .no-results").length){
        $("#tabs-2 table").append(
          '<tr class="no-results"><td colspan="3">No Results</td></tr>'
        );
      }
    }else{
      //test if it exists before removing
      if($("#tabs-2 .no-results").length){
        $("#tabs-2 .no-results").remove();
      }
    }

    if (!$("#tabs-3 tr:not(:first-child):visible").length &&
      $("#tabs-3").is(":visible")
    ) {
      //test if it exists before appending
      if(!$("#tabs-3 .no-results").length){
        $("#tabs-3 table").append(
          '<tr class="no-results"><td colspan="2">No Results</td></tr>'
        );
      }
    }else{
      //test if it exists before removing
      if($("#tabs-3 .no-results").length){
        $("#tabs-3 .no-results").remove();
      }
    }
  });

});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url("https://images8.alphacoders.com/702/702959.jpg");
  background-attachment: fixed;
  background-size: cover;
}

* {
  box-sizing: border-box;
}

.text-center {
  text-align: center;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs ul a {
  background-color: #f44336;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 10px 0;
  float: left;
}

#search {
  width: 100%;
  height: 3.125rem;
  border: none;
  font-size: 13px;
  color: #4f5b66;
  padding: 0 .9375rem;
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #fff;
}

.overflow-x-auto {
  overflow-x: auto;
}

tr {
  background-color: #f44336;
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

tr:first-child {
  background-color: #673ab7;
  border: none;
}

tr:nth-child(2),
.no-results {
  border-top: none;
}

td:last-child {
  width: 50%;
}

td:first-child {
  width: 35%;
}

td:nth-child(2):not(:last-child) {
  width: 15%;
}

table td {
  padding: 0.625rem 5px;
}

:focus {
  outline: 0;
}

.ui-state-active a {
  background-color: #2196f3 !important;
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

table a:before,
footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

table a:hover:before,
footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.search-results {
  background: #fff;
  margin: 1.5625rem 0;
  border-left: 0.3125rem solid #0ebeff;
  opacity: 0;
  display: none;
}

.search-results h4,
.search-results p {
  margin: 0;
  padding: 0.625rem;
  text-align: left;
}

.search-results a:before {
  background-color: #0ebeff;
}

.twitchtv-container {
  width: 45%;
  margin: 2.5rem auto 0;
}


/* Screen loader */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 9.375rem;
  height: 9.375rem;
  margin: -4.6875rem 0 0 -4.6875rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1.75s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.75s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  right: 0.3125rem;
  bottom: 0.3125rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #f7d130;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.9375rem;
  right: 0.9375rem;
  bottom: 0.9375rem;
  border-radius: 50%;
  border: 0.1875rem solid transparent;
  border-top-color: #0fff;
  -webkit-animation: spin 1.25s linear infinite;
  /* Chrome, Opera 15+ Safari 5+ */
  animation: spin 1.25s linear infinite;
  /* Chrome, Firefox  16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

.loaded #loader-wrapper,
.loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000428;
  z-index: 1000;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Sadari 3.1+ */
  -ms-transform: transalteX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+ IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader {
  opacity: 0;
  position: fixed;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  /* Android 2.1+ Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.3s ease-out;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

.no-js #loader-wrapper {
  display: none;
}


/* Loading animation */


/* Loading animation */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  top: 0.59375rem;
  right: 0.9375rem;
  pointer-events: none;
  display: none;
}

.lds-eclipse {
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0.08rem 0 0 #0ebeff;
}

@media (max-width: 71.875em) {
  .twitchtv-container {
    width: 65%;
  }
}

@media (max-width: 50em) {
  .twitchtv-container {
    width: 85%;
  }
}

@media (max-width: 25em) {
  .twitchtv-container {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<div id="loader-wrapper">
  <div id="loader">
  </div>

  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>
<div class="twitchtv-container text-center">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">All</a></li>
      <li><a href="#tabs-2">Online</a></li>
      <li><a href="#tabs-3">Offline</a></li>
    </ul>
    <input type="text" id="search" placeholder="Search...">
    <div id="tabs-1">
      <div class="overflow-x-auto">
        <table>
          <tr>
            <td>User</td>
            <td>Status</td>
            <td>Title</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="tabs-2">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
          <td>Title</td>
        </tr>
      </table>
    </div>
    <div id="tabs-3">
      <table>
        <tr>
          <td>User</td>
          <td>Status</td>
        </tr>
      </table>
    </div>
  </div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>