<button data-tasks="get-joke">Click Me</button>
<p id="output"></p>
<div class="loader"></div>

<script data-tasktable type="application/json">
  {
    "get-joke": {
      "action": "https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode",
      "method": "get",
      "trigger": "click",
      "target": "#output",
      "swap": "inner",
      "then": "show-loader",
      "after": "hide-loader change-color"
    },
    "show-loader": {
      "selector": ".loader",
      "remove": {
        "class": "hide"
      },
      "add": {
        "class": "show"
      }
    },
    "hide-loader": {
      "selector": ".loader",
      "remove": {
        "class": "show"
      },
      "add": {
        "class": "hide"
      }
    },
    "change-color": {
      "selector": "button",
      "add": {
        "style": "background-color:#f00;color:#fff;cursor:pointer;"
      }
    }
  }
</script>

<script type="text/javascript"
  src="https://cdn.jsdelivr.net/gh/mrhdias/secutio@master/dist/js/secutio.min.js?2024041301"></script>
<script>
  const app = new Secutio();
  app.init();
</script>

.loader {
  display: none;
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  border: 10px solid #c2c2c2;
  border-radius: 50%;
  border-top: 10px solid #5c5c5c;
  width: 100px;
  height: 100px;
  animation: spinner 4s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}