[Débutant] comment ajouter un icône de chargement à votre site?

Lorsque votre site est en chargement, ne laissez pas vos lecteurs avec une page inactive. Vous pouvez rajouter un icône de chargement animé pour faire passer les quelques secondes d’attente (moins de 3 si possible) avant de découvrir votre page. Mais comment faire? Vous pouvez utiliser du code ou créer un plugin, en fonction de votre type de site (wordpress, autre CMS ou code maison). On vous dit tout dans cet article !

Rajouter un icône de chargement avec un code simple

Pour ajouter une icône de chargement à votre site, vous pouvez utiliser une image d’un GIF animé ou d’un icône de chargement vectorielle. Vous pouvez également utiliser un plugin ou un framework JavaScript tel que Font Awesome qui vous permet d’intégrer facilement des icônes de chargement dans votre site.

Voici un exemple simple d’ajout d’une icône de chargement à votre site en utilisant Font Awesome :

1. Ajoutez l’icône de chargement à votre page HTML en utilisant la balise <i> avec la classe fa-spinner :

<i class="fa fa-spinner fa-spin"></i>

2. Ajoutez le code CSS suivant pour styliser l’icône de chargement :

.fa-spinner {
    font-size: 24px;
    color: #333;
}

3. Ajoutez le code JavaScript suivant pour afficher l’icône de chargement lorsque la page est en train de charger :

window.addEventListener("load", function() {
    document.getElementById("loading-indicator").style.display = "none";
});

Cet exemple est simple et peut être facilement adapté à vos besoins. N’hésitez pas à explorer d’autres options et tutoriels pour trouver la meilleure solution pour ajouter une icône de chargement à votre site.

Rajouter un icône de chargement en créant un plugin WordPress

Pour créer un plugin WordPress qui ajoute un icône de chargement de page, vous pouvez suivre ces étapes :

1. Créez un nouveau dossier dans le répertoire wp-content/plugins de votre installation WordPress et nommez-le loading-icon.
2. Créez un fichier PHP dans ce dossier et nommez-le loading-icon.php. Ce fichier sera le point d’entrée de votre plugin.
3. Ajoutez le code suivant au début du fichier pour enregistrer votre plugin auprès de WordPress :

<?php
/*
Plugin Name: Loading Icon
Plugin URI: https://ekoledubiz.com/
Description: Simple plugin qui ajoute un icône de chargement sur votre site.
Version: 1.0.0
Author: Ekoledubiz
Author URI: https://ekoledubiz.com/
License: GPLv2 or later
*/

4. Ajoutez la fonction suivante pour enregistrer un script JavaScript dans votre plugin :

function loading_icon_scripts() {
    wp_enqueue_script( 'loading-icon', plugin_dir_url( __FILE__ ) . 'loading-icon.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'loading_icon_scripts' );

5. Créez un fichier JavaScript dans le dossier de votre plugin et nommez-le loading-icon.js. Ce fichier contiendra le code JavaScript pour afficher l’icône de chargement lorsque la page est en train de charger.
6. Ajoutez le code suivant à votre fichier loading-icon.js pour afficher l’icône de chargement lorsque la page est en train de charger :

window.addEventListener("load", function() {
    document.getElementById("loading-indicator").style.display = "none";
});

7. Enfin, ajoutez l’icône de chargement à votre thème en utilisant la balise <i> avec la classe fa-spinner :

<i id="loading-indicator" class="fa fa-spinner fa-spin"></i>

Cet exemple vous montre comment créer un plugin WordPress simple qui ajoute une icône de chargement à votre site. Vous pouvez également utiliser des frameworks JavaScript tels que Font Awesome pour faciliter l’ajout d’icônes de chargement à votre plugin. N’hésitez pas à explorer d’autres tutoriels et ressources pour en savoir plus sur la création de plugins WordPress.