SVG Loader Animation - Blade + Alpine

icon-loader.blade.php

<div id="{{ $id }}" class="relative flex items-center justify-center fill-current">

    <div class="text-gray-200">{{ $slot }}</div>
    <div class="text-indigo-600 absolute">{{ $slot }}</div>

</div>

<!-- id used to scope this duration to this element -->
<style>
    .reveal-animation #{{ $id }} {
    animation-name: reveal-animation;
    animation-duration: {{ $duration }};
  }

  @keyframes reveal-animation {
    from { clip-path: polygon(0 100%, 100% 90%, 100% 90%, 0% 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  }
</style>

other-file.blade.php

<div :class="{ 'reveal-animation': shouldDelete }">
    <x-icon-loader duration="4500ms" id="delete-loading-icon">
        <!-- Insert icon in this slot. -->
    </x-icon-loader>
</div>

preview: https://twitter.com/userlastname/status/1276057492145893377