communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web Tutoriel H5 Exemples pour expliquer comment utiliser SVG pour créer des compétences de tutoriel de chargement animation_html5

Exemples pour expliquer comment utiliser SVG pour créer des compétences de tutoriel de chargement animation_html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
svg 加载

Aujourd'hui, j'aimerais partager avec vous une animation de chargement basée sur des images SVG. De nos jours, les pages Web mobiles sont principalement utilisées. Si vous utilisez également GIF pour charger des images, cela peut affecter la qualité de l'image. L'utilisation de SVG est donc recommandée. une bonne manière.

Le code affiché cette fois a été écrit par Aurer. Le personnel front-end n'a qu'à copier directement le code SVG souhaité pour l'utiliser directement, et la couleur peut être modifiée. Bien entendu, pour les étudiants désireux d’apprendre, vous pouvez également étudier le principe d’écriture de ce code.

Tutoriel d'utilisation

Ensuite, l'éditeur de Design Expert Network vous expliquera comment l'utiliser. C'est en fait assez simple.

ÉTAPE 1 : Copiez le code d'animation de chargement SVG souhaité dans le . L'éditeur peut copier un code comme suit :

.
Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <svg version="1.1"  id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" largeur="24px"  hauteur="30px" viewBox="0 0 24 30" style="activer-background:new 0 0 50 50;" xml:space="préserver">  
  2. <rect x="0"  y="0" largeur="4" hauteur="10" remplir ="#333" transformer="traduire(0 15.1665)" >  
  3. <animateTransform attributeType="xml"  attributeName="transformer" type="traduire" valeurs="0 0; 0 20; 0 0" begin="0" dur=" 0,6 s" repeatCount="indéfini">animateTransform>  
  4. rect>  
  5. <rect x="10"  y="0" largeur="4" hauteur="10" remplir ="#333" transformer="translate(0 11.5002)" >  
  6. <animateTransform attributeType="xml"  attributeName="transformer" type="traduire" valeurs="0 0; 0 20; 0 0" début="0.2s" dur= "0,6s" repeatCount="indéfini">animateTransform>  
  7. rect>  
  8. <rect x="20"  y="0" largeur="4" hauteur="10" remplir ="#333" transformer="traduire(0 1.83315)" >  
  9. <animateTransform attributeType="xml"  attributeName="transformer" type="traduire" valeurs="0 0; 0 20; 0 0" début="0.4s" dur= "0,6s" repeatCount="indéfini">animateTransform>  
  10. rect>  
  11. svg>  

此时代码已经可以带动画了，但没颜色，请继续看STEP2添加颜色。

ÉTAPE 2 : 为SVG图像添加颜色

给你的样式表添加如下样式，里面的颜色代码换上你喜欢的即！

Code XML/HTML复制内容到剪贴板
  1. <style>  
  2. chemin svg,svg rect{fill: #FF6700;}   
  3. style>  

Fait ! DÉMO finale :
201645112526157.gif (500×250)

L'animation de chargement dans la bibliothèque ionique est utilisée
ionic est une bibliothèque de codes open source et gratuite utilisée pour développer des applications mobiles hybrides. Il peut optimiser les performances du HTML, du CSS et du JS, créer des applications efficaces et peut également être utilisé pour créer des optimisations pour Sass et AngularJS. ionic sera un framework digne de confiance.
L'installation est très simple. Si vous disposez de npm, ouvrez l'outil de ligne de commande sous Windows et Linux et exécutez la commande suivante :

Copier le code
Le code est le suivant :
$ npm install -g cordova ionic

Utilisez la commande suivante sur le système Mac :

Copier le code
Le code est le suivant :
sudo npm install -g cordova ionic

Conseils : IOS doit être installé et utilisé sous les environnements Mac Os X. et Xcode.
Si vous avez déjà installé l'environnement ci-dessus, vous pouvez exécuter la commande suivante pour mettre à jour la version :

Copiez le code
Le code est le suivant :
npm update -g cordova ionic

ou

Copier le code
code comme suit :
sudo npm update -g cordova ionic

201645112554683.jpg (642×270)

Jetons un coup d'œil à deux utilisations spécifiques liées au chargement :

action de chargement ionique $ionicLoading
$ionicLoading est un effet d'interaction de chargement par défaut d'ionic. Le contenu à l'intérieur peut également être modifié dans le modèle.
Exemple d'utilisation :
Code HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html ng-app="ionicApp">  
  2.   <tête>  
  3.     <meta charset="utf- 8">  
  4.     <méta nom="portée"  content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">    
  5.        
  6.     <titre>Ionic Modaltitre>  
  7.   
  8.      <lien href="http : //www.runoob.com/static/ionic/css/ionic.min.css" rel="feuille de style">  
  9.     <script src="http : //www.runoob.com/static/ionic/js/ionic.bundle.min.js">script>  
  10.   tête>  
  11. <corps ng-controller=" AppCtrl">  
  12.        
  13.       <ion-view titre=" Accueil">  
  14.         <barre-d'en-tête>  
  15.           <h1 classe="titre" >Les Stoogesh1>  
  16.         barre-d'en-tête>  
  17.         <ion-content has-header="vrai">  
  18.           <liste d'ions>  
  19.             <ion-item ng-repeat="complot dans compris" href="#">{ {stooge.name}}élément-ion>  
  20.           liste d'ions>  
  21.         ion-content>  
  22.       ion-view>  
  23.        
  24.   corps>  
  25. html>  

JavaScript 代码

Code JavaScript复制内容到剪贴板
  1. angular.module('ionicApp', ['ionic'])   
  2. .controller('AppCtrl', fonction($scope, $timeout, $ionicLoading) {   
  3.   
  4.   // Configurer le chargeur   
  5.   $ionicLoading.show({   
  6.     contenu : ‘Chargement‘,   
  7.     animation : ‘fondu-entrée',   
  8.     showBackdrop : true,   
  9.     maxWidth : 200,   
  10.     showDelay : 0   
  11.   });   
  12.      
  13.   // Définissez un délai d'attente pour effacer le chargeur, de la manière que vous appelleriez en fait le $ionicLoading.hide(); méthode à chaque fois que tout est prêt ou chargé.   
  14.   $timeout(fonction () {   
  15.     $ionicLoading.hide();   
  16.     $scope.stooges = [{name : ‘Moe‘}, {name :  ‘Larry‘}, {name:  ‘Curly‘}];   
  17.   }, 2000);   
  18.      
  19. });  

$ionicLoadingConfig
使用实例：

HTML 代码

Code XML/HTML复制内容到剪贴板
  1. <contenu en ions défilement="faux" class="has-header">  
  2.   <p>  
  3.     <ion-spinner icône=" android">ion-spinner>  
  4.     <ion-spinner icône=" ios">ion-spinner>  
  5.     <ion-spinner icône=" ios-small">ion-spinner>  
  6.     <ion-spinner icône=" bulles" classe="spinner-équilibré">ion-spinner>  
  7.     <ion-spinner icône=" cercles" classe="spinner-énergisé">ion-spinner>  
  8.   p>  
  9.   
  10.   <p>  
  11.     <ion-spinner icône=" croissant" classe="spinner-royal">ion-spinner>  
  12.   
  13.     <ion-spinner icône=" points" class="spinner-dark">ion-spinner>  
  14.     <ion-spinner icône=" lignes" classe="spinner-calme">ion-spinner>  
  15.     <ion-spinner icône=" ondulation" classe="spinner-affirmative">ion-spinner>  
  16.     <ion-spinner icône=" spirale">ion-spinner>  
  17.   p>  
  18.   
  19.   
  20. contenu-ion>  

 
CSS 代码

Code CSS复制内容到剪贴板
  1. corps {   
  2.   curseur : url('http://www.runob.com/try/demo_source/finger .png'), auto ;   
  3. }       
  4. p {   
  5.   alignement du texte : centre ;   
  6.   marge-bas : 40px !important ;   
  7. }   
  8. .spinner svg {   
  9.   largeur : 19 % !important ;   
  10.   hauteur : 85px !important ;   
  11. }  

JavaScript 代码

Code JavaScript复制内容到剪贴板
  1. angular.module('ionicApp', ['ionic'])   
  2.   
  3. .controller('MonCtrl', fonction($scope) {    
  4.      
  5. });  
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
1 Il y a quelques mois By DDD
R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?
1 Il y a quelques mois By DDD
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Solution d'énigmes de coquille
1 Il y a quelques semaines By DDD
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7393
15
Tutoriel Java
1630
14
Tutoriel CakePHP
1357
52
Tutoriel Laravel
1268
25
Tutoriel PHP
1217
29
Afficher plus
Related knowledge
Erreur de chargement du plugin dans Illustrator [Corrigé] Erreur de chargement du plugin dans Illustrator [Corrigé] Feb 19, 2024 pm 12:00 PM

Lors du lancement d'Adobe Illustrator, un message d'erreur de chargement du plug-in apparaît-il ? Certains utilisateurs d'Illustrator ont rencontré cette erreur lors de l'ouverture de l'application. Le message est suivi d'une liste de plugins problématiques. Ce message d'erreur indique qu'il y a un problème avec le plug-in installé, mais il peut également être provoqué par d'autres raisons telles qu'un fichier DLL Visual C++ endommagé ou un fichier de préférences endommagé. Si vous rencontrez cette erreur, nous vous guiderons dans cet article pour résoudre le problème, alors continuez à lire ci-dessous. Erreur de chargement du plug-in dans Illustrator Si vous recevez un message d'erreur « Erreur de chargement du plug-in » lorsque vous essayez de lancer Adobe Illustrator, vous pouvez utiliser les éléments suivants : En tant qu'administrateur

Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres Feb 24, 2024 am 09:50 AM

Les sous-titres ne fonctionnent pas sur Stremio sur votre PC Windows ? Certains utilisateurs de Stremio ont signalé que les sous-titres n'étaient pas affichés dans les vidéos. De nombreux utilisateurs ont signalé avoir rencontré un message d'erreur indiquant « Erreur de chargement des sous-titres ». Voici le message d'erreur complet qui apparaît avec cette erreur : Une erreur s'est produite lors du chargement des sous-titres. Échec du chargement des sous-titres : Cela pourrait être un problème avec le plugin que vous utilisez ou avec votre réseau. Comme l’indique le message d’erreur, il se peut que ce soit votre connexion Internet qui soit à l’origine de l’erreur. Veuillez donc vérifier votre connexion réseau et vous assurer que votre Internet fonctionne correctement. En dehors de cela, il peut y avoir d'autres raisons derrière cette erreur, notamment un module complémentaire de sous-titres conflictuels, des sous-titres non pris en charge pour un contenu vidéo spécifique et une application Stremio obsolète. comme

Parlons de la façon d'utiliser SVG pour obtenir un effet de mosaïque d'images Parlons de la façon d'utiliser SVG pour obtenir un effet de mosaïque d'images Sep 01, 2022 am 11:05 AM

Comment utiliser SVG pour obtenir un effet de mosaïque d’images sans utiliser Javascript ? L'article suivant vous donnera une compréhension détaillée, j'espère qu'il vous sera utile !

Outlook se bloque lors de l'insertion d'un lien hypertexte Outlook se bloque lors de l'insertion d'un lien hypertexte Feb 19, 2024 pm 03:00 PM

Si vous rencontrez des problèmes de blocage lors de l'insertion de liens hypertexte dans Outlook, cela peut être dû à des connexions réseau instables, à d'anciennes versions d'Outlook, à des interférences provenant d'un logiciel antivirus ou à des conflits de compléments. Ces facteurs peuvent empêcher Outlook de gérer correctement les opérations de liens hypertexte. Corriger le blocage d'Outlook lors de l'insertion d'hyperliens Utilisez les correctifs suivants pour corriger le blocage d'Outlook lors de l'insertion d'hyperliens : Vérifiez les compléments installés Mettre à jour Outlook Désactivez temporairement votre logiciel antivirus, puis essayez de créer un nouveau profil utilisateur Réparer le programme des applications Office Désinstaller et réinstaller Office Commençons. 1] Vérifiez les compléments installés. Il se peut qu'un complément installé dans Outlook soit à l'origine du problème.

PHP implémente le chargement par défilement infini PHP implémente le chargement par défilement infini Jun 22, 2023 am 08:30 AM

Avec le développement d'Internet, de plus en plus de pages Web doivent prendre en charge le chargement par défilement, et le chargement par défilement infini en fait partie. Il permet à la page de charger continuellement du nouveau contenu, permettant ainsi aux utilisateurs de naviguer sur le Web plus facilement. Dans cet article, nous présenterons comment implémenter le chargement par défilement infini à l'aide de PHP. 1. Qu'est-ce que le chargement par défilement infini ? Le chargement par défilement infini est une méthode de chargement de contenu Web basée sur des barres de défilement. Son principe est que lorsque l'utilisateur fait défiler vers le bas de la page, les données d'arrière-plan sont récupérées de manière asynchrone via AJAX pour charger en continu du nouveau contenu. Ce type de méthode de chargement

Comment résoudre le problème que les CSS ne peuvent pas être chargés Comment résoudre le problème que les CSS ne peuvent pas être chargés Oct 20, 2023 am 11:29 AM

Les solutions au problème selon lequel CSS ne peut pas être chargé incluent la vérification du chemin du fichier, la vérification du contenu du fichier, la suppression du cache du navigateur, la vérification des paramètres du serveur, l'utilisation des outils de développement et la vérification de la connexion réseau. Introduction détaillée : 1. Vérifiez le chemin du fichier. Tout d'abord, assurez-vous que le chemin du fichier CSS est correct. Si le fichier CSS se trouve dans une autre partie ou sous-répertoire du site Web, vous devez fournir le chemin correct. Le fichier CSS se trouve dans le répertoire racine, le chemin doit être direct. ; 2. Vérifiez le contenu du fichier, le problème peut résider dans le fichier CSS lui-même.

Comment convertir le format svg au format jpg Comment convertir le format svg au format jpg Nov 24, 2023 am 09:50 AM

svg peut être converti au format jpg à l'aide d'un logiciel de traitement d'image, d'outils de conversion en ligne et de la bibliothèque de traitement d'image Python. Introduction détaillée : 1. Le logiciel de traitement d'images comprend Adobe Illustrator, Inkscape et GIMP ; 2. Les outils de conversion en ligne incluent CloudConvert, Zamzar, Online Convert, etc. ; 3. Bibliothèque de traitement d'images Python, etc.

Que dois-je faire si Windows 7 ne parvient pas à charger le pilote USB ? Que dois-je faire si Windows 7 ne parvient pas à charger le pilote USB ? Jul 11, 2023 am 08:13 AM

Lors de l'installation du système Win7, certains internautes ont rencontré une situation dans laquelle le chargement du pilote USB échouait. Le périphérique USB ne pouvait pas être reconnu dans le nouveau système Win7 et les clés USB, souris et autres périphériques courants ne pouvaient pas être utilisés. Alors, que dois-je faire si l’installation de Win7 ne parvient pas à charger le pilote USB ? Laissez Xiaobai vous apprendre à résoudre le problème de l'échec du chargement du pilote USB lors de l'installation de Win7. Méthode 1 : 1. Tout d’abord, nous allumons l’ordinateur, entrons dans le système informatique et vérifions la version du système informatique dans le système informatique. Confirmez si la version du système informatique est cohérente avec la version du pilote de périphérique. 2. Après avoir confirmé la version du pilote, connectez le périphérique USB au système informatique. Le système informatique indique que l'appareil ne peut pas se connecter au système. 3. Sur la page d'informations de connexion, cliquez sur le bouton Aide pour afficher les informations d'aide. 4. Si le service informatique

See all articles