Skip to content

Instantly share code, notes, and snippets.

@danieljpalmer

danieljpalmer/icon-loader.blade.php

Last active June 27, 2020 09:58
Show Gist options
  • Save danieljpalmer/f37d8fd5ba3d04a92f7252047cb914e5 to your computer and use it in GitHub Desktop.
Save danieljpalmer/f37d8fd5ba3d04a92f7252047cb914e5 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Loader Animation - Blade + Alpine
Raw
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>
Raw
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>
@chapmanjacobd
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment