Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end H5 Tutorial Examples to explain how to use SVG to create loading animation_html5 tutorial skills

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
svg load

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:
201645112526157.gif (500×250)

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

201645112554683.jpg (642×270)

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. });  
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
1 months ago By DDD
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
1 weeks ago By DDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?
7412
15
CakePHP Tutorial
1358
52
What is the format of the account name of steam
76
11
win11 activation key permanent
20
19
Show More
Related knowledge
Error loading plugin in Illustrator [Fixed] Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

Stremio subtitles not working; error loading subtitles Stremio subtitles not working; error loading subtitles Feb 24, 2024 am 09:50 AM

Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like

Let's talk about how to use SVG to achieve image mosaic effect Let's talk about how to use SVG to achieve image mosaic effect Sep 01, 2022 am 11:05 AM

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

Outlook freezes when inserting hyperlink Outlook freezes when inserting hyperlink Feb 19, 2024 pm 03:00 PM

If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.

PHP implements infinite scroll loading PHP implements infinite scroll loading Jun 22, 2023 am 08:30 AM

With the development of the Internet, more and more web pages need to support scrolling loading, and infinite scrolling loading is one of them. It allows the page to continuously load new content, allowing users to browse the web more smoothly. In this article, we will introduce how to implement infinite scroll loading using PHP. 1. What is infinite scroll loading? Infinite scroll loading is a method of loading web content based on scroll bars. Its principle is that when the user scrolls to the bottom of the page, background data is asynchronously retrieved through AJAX to continuously load new content. This kind of loading method

How to solve the problem that css cannot be loaded How to solve the problem that css cannot be loaded Oct 20, 2023 am 11:29 AM

The solutions to the problem that CSS cannot be loaded include checking the file path, checking the file content, clearing the browser cache, checking the server settings, using developer tools and checking the network connection. Detailed introduction: 1. Check the file path. First, please make sure the path of the CSS file is correct. If the CSS file is located in a different part or subdirectory of the website, you need to provide the correct path. If the CSS file is located in the root directory, the path should be direct. ; 2. Check the file content. If the path is correct, the problem may lie in the CSS file itself. Open the CSS file to check, etc.

How to convert svg to jpg format How to convert svg to jpg format Nov 24, 2023 am 09:50 AM

svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.

What should I do if Windows 7 fails to load the USB driver? What should I do if Windows 7 fails to load the USB driver? Jul 11, 2023 am 08:13 AM

When installing the win7 system, some netizens encountered a situation where loading the USB driver failed. The USB device could not be recognized in the new win7 system, and common USB flash drives, mice and other devices could not be used. So what should I do if the installation of win7 fails to load the USB driver? Let Xiaobai teach you how to solve the problem of failure to load the USB driver when installing win7. Method 1: 1. First, we turn on the computer and enter the computer system, and check the computer system version in the computer system. Confirm whether the version of the computer system is consistent with the version of the device driver. 2. After confirming the driver version, connect the USB device to the computer system. The computer system shows that the device cannot connect to the system. 3. On the connection information page, click the Help button to view the help information. 4. If the computer department

See all articles