Examples to explain how to use SVG to create loading animation_html5 tutorial skills

Today I would like to share with you a loading animation based on SVG images. Nowadays, mobile web pages are mostly used. If you also use GIF for loading images, it may affect the quality of the image, so using SVG is a good way. .

The code shown this time was written by Aurer. Front-end personnel only need to directly copy the desired SVG code to use it directly, and the color can be changed. Of course, for students who are eager to learn, you can also study the writing principle of this code.

Usage Tutorial

Next, the editor of Design Expert Network will explain how to use this. It is actually quite simple.

STEP 1: Copy the SVG loading animation code you want into the

. The editor can copy a code as follows:

XML/HTML CodeCopy content to clipboard

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" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">  
2. rect x="0" y="0" width="4" height="10" fill="#333" transform="translate(0 15.1665)">  
3. animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite">animateTransform>  
4. rect>  
5. rect x="10" y="0" width="4" height="10" fill="#333" transform="translate(0 11.5002)">  
6. animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite">animateTransform>  
7. rect>  
8. rect x="20" y="0" width="4" height="10" fill="#333" transform="translate(0 1.83315)">  
9. animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite">animateTransform>  
10. rect>  
11. svg>  

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

STEP 2 : 为SVG图像添加颜色

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

XML/HTML Code复制内容到剪贴板

1. style>  
2. svg path,svg rect{fill: #FF6700;}   
3. style>  

Done! Final DEMO:

The loading animation in the ionic library is used
ionic is an open source, free code library used to develop hybrid mobile applications. It can optimize the performance of html, css and js, build efficient applications, and can also be used to build optimizations for Sass and AngularJS. ionic will be a trustworthy framework.
The installation is very simple. If you have npm, open the command line tool on Windows and Linux and execute the following command:

Copy code

The code is as follows:

$ npm install -g cordova ionic

Use the following command on Mac system:

Copy Code

The code is as follows:

sudo npm install -g cordova ionic

Tips: IOS needs to be installed and used under Mac Os X. and Xcode environments.
If you have already installed the above environment, you can execute the following command to update the version:

Copy the code

The code is as follows :

npm update -g cordova ionic

or

Copy code

code As follows:

sudo npm update -g cordova ionic

Let’s take a look at two specific loading-related usages:

ionic loading action $ionicLoading
$ionicLoading is a default loading interaction effect of ionic. The content inside can also be modified in the template.
Usage example:
HTML code:

XML/HTML CodeCopy content to clipboard

1. html ng-app="ionicApp">  
2.   head>  
3.     meta charset="utf-8">  
4.     meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    
5.        
6.     title>Ionic Modaltitle>  
7.   
8.      link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">  
9.     script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js">script>  
10.   head>  
11. body ng-controller="AppCtrl">  
12.        
13.       ion-view title="Home">  
14.         ion-header-bar>  
15.           h1 class="title">The Stoogesh1>  
16.         ion-header-bar>  
17.         ion-content has-header="true">  
18.           ion-list>  
19.             ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}ion-item>  
20.           ion-list>  
21.         ion-content>  
22.       ion-view>  
23.        
24.   body>  
25. html>  

JavaScript 代码

JavaScript Code复制内容到剪贴板

1. angular.module(‘ionicApp‘, [‘ionic‘])   
2. .controller(‘AppCtrl‘, function($scope, $timeout, $ionicLoading) {   
3.   
4.   // Setup the loader   
5.   $ionicLoading.show({   
6.     content: ‘Loading‘,   
7.     animation: ‘fade-in‘,   
8.     showBackdrop: true,   
9.     maxWidth: 200,   
10.     showDelay: 0   
11.   });   
12.      
13.   // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.   
14.   $timeout(function () {   
15.     $ionicLoading.hide();   
16.     $scope.stooges = [{name: ‘Moe‘}, {name: ‘Larry‘}, {name: ‘Curly‘}];   
17.   }, 2000);   
18.      
19. });  

$ionicLoadingConfig
使用实例：

HTML 代码

XML/HTML Code复制内容到剪贴板

1. ion-content scroll="false" class="has-header">  
2.   p>  
3.     ion-spinner icon="android">ion-spinner>  
4.     ion-spinner icon="ios">ion-spinner>  
5.     ion-spinner icon="ios-small">ion-spinner>  
6.     ion-spinner icon="bubbles" class="spinner-balanced">ion-spinner>  
7.     ion-spinner icon="circles" class="spinner-energized">ion-spinner>  
8.   p>  
9.   
10.   p>  
11.     ion-spinner icon="crescent" class="spinner-royal">ion-spinner>  
12.   
13.     ion-spinner icon="dots" class="spinner-dark">ion-spinner>  
14.     ion-spinner icon="lines" class="spinner-calm">ion-spinner>  
15.     ion-spinner icon="ripple" class="spinner-assertive">ion-spinner>  
16.     ion-spinner icon="spiral">ion-spinner>  
17.   p>  
18.   
19.   
20. ion-content>  

 
CSS 代码

CSS Code复制内容到剪贴板

1. body {   
2.   cursor: url(‘http://www.runob.com/try/demo_source/finger.png‘), auto;   
3. }       
4. p {   
5.   text-align: center;   
6.   margin-bottom: 40px !important;   
7. }   
8. .spinner svg {   
9.   width: 19% !important;   
10.   height: 85px !important;   
11. }  

JavaScript 代码

JavaScript Code复制内容到剪贴板

1. angular.module(‘ionicApp‘, [‘ionic‘])   
2.   
3. .controller(‘MyCtrl‘, function($scope) {    
4.      
5. });