实例讲解使用SVG制作loading加载动画的方法

2020-04-24 19:51:00易采站长站整理

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

STEP 2 : 为SVG图像添加颜色

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

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

<style>  
svg path,svg rect{fill: #FF6700;}   
</style>  

完成!最终DEMO:
201645112526157.gif (500×250)

ionic库中的加载动画使用
ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。
安装很简单,如果有npm,Window 和 Linux 上打开命令行工具执行以下命令:

复制代码$ npm install -g cordova ionic
Mac 系统上使用以下命令:

复制代码sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。
如果你已经安装了以上环境,可以执行以下命令来更新版本:

复制代码npm update -g cordova ionic

复制代码sudo npm update -g cordova ionic
201645112554683.jpg (642×270)

下面我们来看一下具体的两个加载相关的用法:

ionic 加载动作 $ionicLoading
$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。
使用实例:
HTML 代码:

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

<html ng-app="ionicApp">  
  <head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    
       
    <title>Ionic Modal</title>  
  
     <link href="http://www.mscto.com/static/ionic/css/ionic.min.css" rel="stylesheet">  
    <script src="http://www.mscto.com/static/ionic/js/ionic.bundle.min.js"></script>  
  </head>  
<body ng-controller="AppCtrl">  
       
      <ion-view title="Home">