Display an elegant loader for your TALL Stack application.
When you load the site, and the page is already loaded, the package's loader view beautifully fades out in a specified transition time...
Otherwise, a customizable sentence loads along the view, as soon as your specified font is loaded; and until the page is ready; before everything fading all out in the end.
The result is something like this:
Demo.mp4
This package is built for the TALL stack. You must account for its requirements at first.
-
Install the package via Composer:
composer require goodm4ven/good-loader
-
Publish the package configuration and view files:
php artisan vendor:publish --provider="GoodM4ven\GoodLoader\GoodLoaderServiceProvider"- If you're updating the package, please add
--forceoption to override the old assets.
- If you're updating the package, please add
-
Open the published
config/good-loader.phpfile and specify yourfontname.-
Here are the default configurations of the file.
/* |-------------------------------------------------------------------------- | Loading Font |-------------------------------------------------------------------------- | | Provide the name of the font you're using, so that the sentence won't | load until that font is loaded at least. | */ 'font' => env('GOOD_LOADER_FONT', 'Mulish'), /* |-------------------------------------------------------------------------- | Loading Sentence |-------------------------------------------------------------------------- | | Customize the sentence which shows up at the center of the screen before | the page is completely loaded. | */ 'sentence' => env('GOOD_LOADER_SENTENCE', 'Loading...'), /* |-------------------------------------------------------------------------- | Loading Transitions |-------------------------------------------------------------------------- | | The time it takes to transition (fade) the `background` and the `sentence`. | */ 'transitions' => [ 'background' => env('GOOD_LOADER_TRANSITIONS_BACKGROUND', 1000), 'sentence' => env('GOOD_LOADER_TRANSITIONS_SENTENCE', 300), ], /* |-------------------------------------------------------------------------- | Loading Durations |-------------------------------------------------------------------------- | | The time it takes for the `sentence` to start `animating`, as things are | still not loaded... | */ 'durations' => [ 'sentence-animating' => env('GOOD_LOADER_DURATIONS_SENTENCE_ANIMATING', 750), ],
-
-
Ensure that your
contentin thetailwind.config.jsfile include the published view - along your font:const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { content: [ ... './resources/views/**/*.blade.php', // or to './resources/views/vendor/good-loader/**' specifically... ], ... theme: { extend: { fontFamily: { mulish: ['Mulish', ...defaultTheme.fontFamily.sans], ...
- The view is available at
resources/views/vendor/good-loader/partials/good-loader.blade.phpfor customization.
- The view is available at
-
Add the following Blade directive to your
masterlayout or view - along the font:... <link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"> </head> <body class="font-mulish"> @goodLoader ... -
Finally, compile Alpine in
app.jsand the view's Tailwind classes inapp.csswith NPM:npm run dev
Feel free to pull-request at any time. It's not like the package is moving anywhere... -Or is it? 😲
- There's an available and automated CHANGELOG of all the updates.
- Provide more time customizations.
- Neat background grids to pick from!
- Write Cypress and Pest tests! 🥲
Please do 🌟 all the packages you rely on, but NOT this one. 😍
والحمد لله رب العالمين