Examples explain the method of using SVG to make loading animation

Time:2021-7-16

Today, I’d like to share with you a loading animation based on SVG images. Now mobile web pages are used more often. If you still use GIF to do loading images, the image quality may be affected. So SVG is a good way.

The code in this exhibition is written by Aurer. The front-end staff only need to directly copy the SVG code they want to use, and they can change the color. Of course, for studious students, you can also study the principle of writing this code.

Using the tutorial

Next design Daren net small make up for you to explain the use of this method, is actually quite simple.

Step 1: copy the SVG you want to load the animation code into < body >, Xiaobian will 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>  

At this point, the code can be animated, but there is no color, please continue to see Step 2 add color.

Step 2: add color to SVG image

Add the following style to your style sheet, and replace the color code with the one you like!

XML/HTML CodeCopy content to clipboard
  1. <style>  
  2. svg path,svg rect{fill: #FF6700;}   
  3. </style>  

Done! Final Demo:
201645112526157.gif (500×250)

The use of loading animation in ionic Library
Ionic is an open source, free code base for developing hybrid mobile applications. It can optimize the performance of HTML, CSS and JS, build efficient applications, and can also be used to optimize sass and angularjs. Ionic will be a reliable framework.
The installation is very simple. If you have NPM, open the command line tool on windows and Linux and execute the following commands:

Copy code

The code is as follows:

$ npm install -g cordova ionic

Use the following commands on the MAC system:

Copy code

The code is as follows:

sudo npm install -g cordova ionic

Tip: IOS needs to be installed in Mac OS X. and Xcode environment.
If you have installed the above environment, you can update the version by executing the following command:

Copy code

The code is as follows:

npm update -g cordova ionic

or

Copy code

The code is as follows:

sudo npm update -g cordova ionic

201645112554683.jpg (642×270)

Let’s take a look at the specific usage of two loading related functions:

Ionic loading action $ionic loading
$ionicloading is a default loading interaction for ionic. The contents can also be modified in the template.
Examples:
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 Modal</title>  
  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 Stooges</h1>  
  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 code

JavaScript CodeCopy content to clipboard
  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
Examples:

HTML code

XML/HTML CodeCopy content to clipboard
  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 code

CSS CodeCopy content to clipboard
  1. body {   
  2.   cursorurl(‘http://www.runob.com/try/demo_source/finger.png‘), auto;   
  3. }       
  4. p {   
  5.   text-aligncenter;   
  6.   margin-bottom40px !important;   
  7. }   
  8. .spinner svg {   
  9.   width: 19% !important;   
  10.   height85px !important;   
  11. }  

Javascript code

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