Brainleaf
Web Resources

Creare una pagina intro di loading per un sito web è una pratica giusta e sempre più diffusa, in particolar modo per quei prodotti basati su javascript che necessitano di alcuni istanti di caricamento per poter dare all’utente una migliore esperienza di navigazione. jQueryIntroLoader è pensato soprattutto per chi si avvicina adesso a jQuery e ancora non riesce a gestire al meglio le animazioni, per quanto semplici possano essere.

Avevamo già pensato infatti di offrirvi un piccolo script per questo (Pagina di caricamento in jQuery - jQuery page loader) e visto appunto il successo di download del precedente pacchetto , abbiamo pensato di realizzare un vero e proprio plugin con alcune semplici animazioni da poter scegliere.

Usare questo plugin è molto semplice.

Per prima cosa scaricare il pacchetto di download all’interno del quale troverete due diverse cartelle: dist e demo.


La cartella "dist" contiene alcune versioni del plugin, i css e gli helper plugins necessari.
La cartella "demo" contiene invece alcuni file di esempio dal quale potete tranquillamente copiare e incollare il codice. 

Installare il plugin

Prima di tutto occorre includere nella vostra pagina i file javascript necessari: jQuery, jqueryIntroLoader e (se necessario) gli helper plugin.

Gli helper plugin sono Spin.js e jqueryEasing
Se già li aveti inclusi nella pagina non è ovviamente necessario inserirli ancora, se invece non li avete sarà bene optare per l’inclusione dei medesimi, magari utilizzando la versione “jqueryIntroLoader.pack.min.js” del nostro plugin. La versione .pack è appunto una versione contenente anche gli helper plugins che quindi non dovranno più essere installati.
La libreria jQuery dovrà invece essere sempre caricata separatamente, a meno che non l’abbiate già inclusa.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/path/to/plugin/js/jquery.introLoader.pack.min.js"></script>

Le precedenti righe devono essere inserite nell’HEAD o poco prima della chiusura del body (questo dipende esclusivamente da ciò che ritenete più corretto) della pagina in cui desiderate ar comparire la pagina di intro loading.

Installare il CSS

Anche il file css dovrà essere incluso nella pagina.
Per farlo potete o copiare il contenuto del file all’interno del vostro foglio di stile oppure caricare separatamente il file con la riga seguente:

<link rel="stylesheet" href="/path/to/plugin/css/introLoader.css">

HTML Markup

Per utilizzare il plugin bisognerà adesso inserire una piccola riga di markup nella pagina dove volete compaia la pagina di intro.
Questa riga di codice permetterà di caricare un div all'interno del quale sarà generata la pagina d intro. Assicuratevi di assegnare all'elemento una ID univoca.

<div id="element"></div>

Javascript: inizializzazione plugin

Per inizializzare il plugin (utilizzando le impostazioni di default) è sufficiente lanciare il plugin all'evento "document ready" (come nell'esempio sottostante) o attraverso una "self executed function".

$(document).ready(function() {
    $("#element").introLoader();
});

A questo punto il plugin è funzionante e caricando la pagina lo si potrà vedere in azione.

Ovviamente è possibile scegliere colori ed animazioni diverse agendo direttamente sulle opzioni disponibili del plugin.

Opzioni

Le opzioni di configurazione sono divise in due oggetti distinti: animation e spinJs

L'ggetto spinJs definisce lo spinner interno alla pagina di loading e supporta come opzioni tutte le native della libreria spinjs e possono comodamente essere configurate utilizzando l'apposita interfaccia disponibile sul sito http://fgnass.github.io/spin.js/

Nel seguente box è riportato un esempio di configurazione di spinJs

$(document).ready(function() {
    $("#element").introLoader({
        spinJs: {
        
            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            color: '#000', // #rgb or #rrggbb or array of colors
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false // Whether to render a shadow
            
        }
    });
});

L'oggetto animation contiene invece le specifiche per l'animazione vera e propria. Le opzioni e i valori dell'oggetto sono abbastanza intuitive e con qualche prova se ne capirà l'utilità molto facilmente. Ecco un esempio completo di configurazione:

$(document).ready(function() {
    $("#element").introLoader({
        animation: {
            name: 'simpleLoader',
            options: {
                effect:'slideUp',
                ease: "easeInOutCirc",
                style: 'dark',
                delayTime: 1000,
                animationTime: 500
            }
        },    

        spinJs: {
            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            color: '#fff', // #rgb or #rrggbb or array of colors
        }
    });
});

Dalla pagina ufficiale potrete accedere anche ad una serie di demo che illustreranno al meglio alcune possibili configurazioni.

http://factory.brainleaf.eu/jqueryIntroLoader

Download version Latest Version

Usage Example on CodePen

$('#demoLoader').introLoader({
  animation: { 
    name: 'simpleLoader', 
    options: { 
      exitFx:'slideUp', 
      ease: "easeInOutCirc", 
      style: 'ocean', 
      delayBefore: 1000, 
      exitTime: 500
    } },
  spinJs: { 
    lines: 13, 
    length: 20, 
    width: 10, 
    radius: 30, 
    corners: 1, 
    color: '#fff', 
    speed: 1, 
    trail: 60, 
    shadow: false 
  }
});

See the Pen jQueryIntroLoader Demo by Gix075 (@Gix075) on CodePen.

Joomla SEF URLs by Artio