<option id="4uamy"><source id="4uamy"></source></option>
<button id="4uamy"></button>
. The editor can copy a code as follows: <\/p>\n
\n
\nXML\/HTML Code<\/span>Copy content to clipboard<\/span>\n<\/div>\n
\n
    \n    
  1. <<\/span>svg<\/span>?<\/span>version<\/span>=<\/span>\"1.1\"<\/span>?<\/span>id<\/span>=<\/span>\"Layer_1\"<\/span>?<\/span>xmlns<\/span>=<\/span>\"http:\/\/www.w3.org\/2000\/svg\"<\/span>?<\/span>xmlns:xlink<\/span>=<\/span>\"http:\/\/www.w3.org\/1999\/xlink\"<\/span>?<\/span>x<\/span>=<\/span>\"0px\"<\/span>?<\/span>y<\/span>=<\/span>\"0px\"<\/span>?<\/span>width<\/span>=<\/span>\"24px\"<\/span>?<\/span>height<\/span>=<\/span>\"30px\"<\/span>?<\/span>viewBox<\/span>=<\/span>\"0?0?24?30\"<\/span>?<\/span>style<\/span>=<\/span>\"enable-background:new?0?0?50?50;\"<\/span>?<\/span>xml:space<\/span>=<\/span>\"preserve\"<\/span>><\/span>??<\/span><\/span><\/li>\n    
  2. \n<\/span><<\/span>rect<\/span>?<\/span>x<\/span>=<\/span>\"0\"<\/span>?<\/span>y<\/span>=<\/span>\"0\"<\/span>?<\/span>width<\/span>=<\/span>\"4\"<\/span>?<\/span>height<\/span>=<\/span>\"10\"<\/span>?<\/span>fill<\/span>=<\/span>\"#333\"<\/span>?<\/span>transform<\/span>=<\/span>\"translate(0?15.1665)\"<\/span>><\/span>??<\/span>\n<\/li>\n    
  3. \n<\/span><<\/span>animateTransform<\/span>?<\/span>attributeType<\/span>=<\/span>\"xml\"<\/span>?<\/span>attributeName<\/span>=<\/span>\"transform\"<\/span>?<\/span>type<\/span>=<\/span>\"translate\"<\/span>?<\/span>values<\/span>=<\/span>\"0?0;?0?20;?0?0\"<\/span>?<\/span>begin<\/span>=<\/span>\"0\"<\/span>?<\/span>dur<\/span>=<\/span>\"0.6s\"<\/span>?<\/span>repeatCount<\/span>=<\/span>\"indefinite\"<\/span>><\/span><\/<\/span>animateTransform<\/span>><\/span>??<\/span>\n<\/li>\n    
  4. \n<\/span><\/<\/span>rect<\/span>><\/span>??<\/span>\n<\/li>\n    
  5. \n<\/span><<\/span>rect<\/span>?<\/span>x<\/span>=<\/span>\"10\"<\/span>?<\/span>y<\/span>=<\/span>\"0\"<\/span>?<\/span>width<\/span>=<\/span>\"4\"<\/span>?<\/span>height<\/span>=<\/span>\"10\"<\/span>?<\/span>fill<\/span>=<\/span>\"#333\"<\/span>?<\/span>transform<\/span>=<\/span>\"translate(0?11.5002)\"<\/span>><\/span>??<\/span>\n<\/li>\n
  6. \n<\/span><<\/span>animateTransform<\/span>?<\/span>attributeType<\/span>=<\/span>\"xml\"<\/span>?<\/span>attributeName<\/span>=<\/span>\"transform\"<\/span>?<\/span>type<\/span>=<\/span>\"translate\"<\/span>?<\/span>values<\/span>=<\/span>\"0?0;?0?20;?0?0\"<\/span>?<\/span>begin<\/span>=<\/span>\"0.2s\"<\/span>?<\/span>dur<\/span>=<\/span>\"0.6s\"<\/span>?<\/span>repeatCount<\/span>=<\/span>\"indefinite\"<\/span>><\/span><\/<\/span>animateTransform<\/span>><\/span>??<\/span>\n<\/li>\n    
  7. \n<\/span><\/<\/span>rect<\/span>><\/span>??<\/span>\n<\/li>\n    
  8. \n<\/span><<\/span>rect<\/span>?<\/span>x<\/span>=<\/span>\"20\"<\/span>?<\/span>y<\/span>=<\/span>\"0\"<\/span>?<\/span>width<\/span>=<\/span>\"4\"<\/span>?<\/span>height<\/span>=<\/span>\"10\"<\/span>?<\/span>fill<\/span>=<\/span>\"#333\"<\/span>?<\/span>transform<\/span>=<\/span>\"translate(0?1.83315)\"<\/span>><\/span>??<\/span>\n<\/li>\n    
  9. \n<\/span><<\/span>animateTransform<\/span>?<\/span>attributeType<\/span>=<\/span>\"xml\"<\/span>?<\/span>attributeName<\/span>=<\/span>\"transform\"<\/span>?<\/span>type<\/span>=<\/span>\"translate\"<\/span>?<\/span>values<\/span>=<\/span>\"0?0;?0?20;?0?0\"<\/span>?<\/span>begin<\/span>=<\/span>\"0.4s\"<\/span>?<\/span>dur<\/span>=<\/span>\"0.6s\"<\/span>?<\/span>repeatCount<\/span>=<\/span>\"indefinite\"<\/span>><\/span><\/<\/span>animateTransform<\/span>><\/span>??<\/span>\n<\/li>\n    
  10. \n<\/span><\/<\/span>rect<\/span>><\/span>??<\/span>\n<\/li>\n    
  11. \n<\/span><\/<\/span>svg<\/span>><\/span>??<\/span>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
    此時代碼已經(jīng)可以帶動畫了，但沒顏色，請繼續(xù)看STEP2添加顏色。<\/p>\n
    STEP 2 : 為SVG圖像添加顏色<\/p>\n
    給你的樣式表添加如下樣式，里面的顏色代碼換上你喜歡的即！<\/p>\n
    \n
    \nXML\/HTML Code<\/span>復(fù)制內(nèi)容到剪貼板<\/span>\n<\/div>\n
    \n
      \n    
    1. <<\/span>style<\/span>><\/span>??<\/span><\/span><\/li>\n    
    2. svg?path,svg?rect{fill:?#FF6700;} ??<\/span><\/li>\n    
    3. \n<\/span><\/<\/span>style<\/span>><\/span>??<\/span>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
      Done! Final DEMO: 
      \"201645112526157.gif<\/strong><\/p>\n
      The loading animation in the ionic library is used 
      <\/strong>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: 

      <\/p>\n
      \n
      Copy code<\/u><\/span><\/div>The code is as follows:<\/div>\n
      $ npm install -g cordova ionic<\/div>\n
      Use the following command on Mac system:

      \n
      Copy Code<\/u><\/span><\/div>The code is as follows:<\/div>\n
      sudo npm install -g cordova ionic<\/div>\n
      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: 

      \n
      Copy the code<\/u><\/span><\/div>The code is as follows :<\/div>\n
      npm update -g cordova ionic<\/div>\n
       or 

      \n
      Copy code<\/u><\/span><\/div> code As follows:<\/div>\n
      sudo npm update -g cordova ionic<\/div>\n
      \"201645112554683.jpg\n
      Let’s take a look at two specific loading-related usages: <\/p>\n
      ionic loading action $ionicLoading
      <\/strong>$ionicLoading is a default loading interaction effect of ionic. The content inside can also be modified in the template. 
      Usage example: 
      HTML code: <\/p>\n
      \n
      \nXML\/HTML Code<\/span>Copy content to clipboard<\/span>\n<\/div>\n
      \n
        \n    
      1. <<\/span>html<\/span>?<\/span>ng-app<\/span>=<\/span>\"ionicApp\"<\/span>><\/span>??<\/span><\/span><\/li>\n    
      2. \n??<\/span><<\/span>head<\/span>><\/span>??<\/span>\n<\/li>\n    
      3. \n????<\/span><<\/span>meta<\/span>?<\/span>charset<\/span>=<\/span>\"utf-8\"<\/span>><\/span>??<\/span>\n<\/li>\n    
      4. \n????<\/span><<\/span>meta<\/span>?<\/span>name<\/span>=<\/span>\"viewport\"<\/span>?<\/span>content<\/span>=<\/span>\"initial-scale=1,?maximum-scale=1,?user-scalable=no,?width=device-width\"<\/span>><\/span>? ??<\/span>\n<\/li>\n    
      5. ???? ??<\/span><\/li>\n    
      6. \n????<\/span><<\/span>title<\/span>><\/span>Ionic?Modal<\/span><\/<\/span>title<\/span>><\/span>??<\/span>\n<\/li>\n    
      7. ??<\/span><\/li>\n    
      8. \n?????<\/span><<\/span>link<\/span>?<\/span>href<\/span>=<\/span>\"http:\/\/www.runoob.com\/static\/ionic\/css\/ionic.min.css\"<\/span>?<\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span>><\/span>??<\/span>\n<\/li>\n    
      9. \n????<\/span><<\/span>script<\/span>?<\/span>src<\/span>=<\/span>\"http:\/\/www.runoob.com\/static\/ionic\/js\/ionic.bundle.min.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>??<\/span>\n<\/li>\n    
      10. \n??<\/span><\/<\/span>head<\/span>><\/span>??<\/span>\n<\/li>\n    
      11. \n<\/span><<\/span>body<\/span>?<\/span>ng-controller<\/span>=<\/span>\"AppCtrl\"<\/span>><\/span>??<\/span>\n<\/li>\n    
      12. ???? ??<\/span><\/li>\n    
      13. \n??????<\/span><<\/span>ion-view<\/span>?<\/span>title<\/span>=<\/span>\"Home\"<\/span>><\/span>??<\/span>\n<\/li>\n    
      14. \n????????<\/span><<\/span>ion-header-bar<\/span>><\/span>??<\/span>\n<\/li>\n    
      15. \n??????????<\/span><<\/span>h1<\/span>?<\/span>class<\/span>=<\/span>\"title\"<\/span>><\/span>The?Stooges<\/span><\/<\/span>h1<\/span>><\/span>??<\/span>\n<\/li>\n    
      16. \n????????<\/span><\/<\/span>ion-header-bar<\/span>><\/span>??<\/span>\n<\/li>\n    
      17. \n????????<\/span><<\/span>ion-content<\/span>?<\/span>has-header<\/span>=<\/span>\"true\"<\/span>><\/span>??<\/span>\n<\/li>\n
      18. \n??????????<\/span><<\/span>ion-list<\/span>><\/span>??<\/span>\n<\/li>\n    
      19. \n????????????<\/span><<\/span>ion-item<\/span>?<\/span>ng-repeat<\/span>=<\/span>\"stooge?in?stooges\"<\/span>?<\/span>href<\/span>=<\/span>\"#\"<\/span>><\/span>{{stooge.name}}<\/span><\/<\/span>ion-item<\/span>><\/span>??<\/span>\n<\/li>\n    
      20. \n??????????<\/span><\/<\/span>ion-list<\/span>><\/span>??<\/span>\n<\/li>\n    
      21. \n????????<\/span><\/<\/span>ion-content<\/span>><\/span>??<\/span>\n<\/li>\n    
      22. \n??????<\/span><\/<\/span>ion-view<\/span>><\/span>??<\/span>\n<\/li>\n    
      23. ???? ??<\/span><\/li>\n    
      24. \n??<\/span><\/<\/span>body<\/span>><\/span>??<\/span>\n<\/li>\n    
      25. \n<\/span><\/<\/span>html<\/span>><\/span>??<\/span>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
        JavaScript 代碼<\/p>\n
        \n
        \nJavaScript Code<\/span>復(fù)制內(nèi)容到剪貼板<\/span>\n<\/div>\n
        \n
          \n    
        1. angular.module(‘ionicApp‘,?[‘ionic‘]) ??<\/span><\/span><\/li>\n    
        2. \n.controller(‘AppCtrl‘,?<\/span>function<\/span>($scope,?$timeout,?$ionicLoading)?{ ??<\/span>\n<\/li>\n    
        3. ??<\/span><\/li>\n    
        4. \n??<\/span>\/\/?Setup?the?loader <\/span>??<\/span>\n<\/li>\n    
        5. ??$ionicLoading.show({ ??<\/span><\/li>\n    
        6. ????content:?‘Loading‘, ??<\/span><\/li>\n    
        7. \n????animation:?‘fade-<\/span>in<\/span>‘, ??<\/span>\n<\/li>\n    
        8. \n????showBackdrop:?<\/span>true<\/span>, ??<\/span>\n<\/li>\n    
        9. ????maxWidth:?200, ??<\/span><\/li>\n    
        10. ????showDelay:?0 ??<\/span><\/li>\n    
        11. ??}); ??<\/span><\/li>\n    
        12. ?? ??<\/span><\/li>\n    
        13. \n??<\/span>\/\/?Set?a?timeout?to?clear?loader,?however?you?would?actually?call?the?$ionicLoading.hide();?method?whenever?everything?is?ready?or?loaded. <\/span>??<\/span>\n<\/li>\n    
        14. \n??$timeout(<\/span>function<\/span>?()?{ ??<\/span>\n<\/li>\n    
        15. ????$ionicLoading.hide(); ??<\/span><\/li>\n    
        16. ????$scope.stooges?=?[{name:?‘Moe‘},?{name:?‘Larry‘},?{name:?‘Curly‘}]; ??<\/span><\/li>\n    
        17. ??},?2000); ??<\/span><\/li>\n    
        18. ?? ??<\/span><\/li>\n    
        19. });??<\/span><\/li>\n<\/ol>\n<\/div>\n<\/div>\n
          $ionicLoadingConfig
          使用實例：<\/p>\n
          HTML 代碼<\/p>\n
          \n
          \nXML\/HTML Code<\/span>復(fù)制內(nèi)容到剪貼板<\/span>\n<\/div>\n
          \n
            \n    
          1. <<\/span>ion-content<\/span>?<\/span>scroll<\/span>=<\/span>\"false\"<\/span>?<\/span>class<\/span>=<\/span>\"has-header\"<\/span>><\/span>??<\/span><\/span><\/li>\n    
          2. \n??<\/span><<\/span>p<\/span>><\/span>??<\/span>\n<\/li>\n    
          3. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"android\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          4. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"ios\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          5. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"ios-small\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          6. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"bubbles\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-balanced\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          7. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"circles\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-energized\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          8. \n??<\/span><\/<\/span>p<\/span>><\/span>??<\/span>\n<\/li>\n    
          9. ??<\/span><\/li>\n    
          10. \n??<\/span><<\/span>p<\/span>><\/span>??<\/span>\n<\/li>\n    
          11. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"crescent\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-royal\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          12. ??<\/span><\/li>\n    
          13. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"dots\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-dark\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n
          14. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"lines\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-calm\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          15. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"ripple\"<\/span>?<\/span>class<\/span>=<\/span>\"spinner-assertive\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          16. \n????<\/span><<\/span>ion-spinner<\/span>?<\/span>icon<\/span>=<\/span>\"spiral\"<\/span>><\/span><\/<\/span>ion-spinner<\/span>><\/span>??<\/span>\n<\/li>\n    
          17. \n??<\/span><\/<\/span>p<\/span>><\/span>??<\/span>\n<\/li>\n    
          18. ??<\/span><\/li>\n    
          19. ??<\/span><\/li>\n    
          20. \n<\/span><\/<\/span>ion-content<\/span>><\/span>??<\/span>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
            ?
            CSS 代碼<\/p>\n
            \n
            \nCSS Code<\/span>復(fù)制內(nèi)容到剪貼板<\/span>\n<\/div>\n
            \n
              \n    
            1. body?{ ??<\/span><\/span><\/li>\n    
            2. \n??<\/span>cursor<\/span>:?<\/span>url<\/span>(‘http:\/\/www.runob.com\/try\/demo_source\/finger.png‘),?<\/span>auto<\/span>; ??<\/span>\n<\/li>\n    
            3. }???? ??<\/span><\/li>\n    
            4. p?{ ??<\/span><\/li>\n    
            5. \n??<\/span>text-align<\/span>:?<\/span>center<\/span>; ??<\/span>\n<\/li>\n    
            6. \n??<\/span>margin-bottom<\/span>:?<\/span>40px<\/span>?!<\/span>important<\/span>; ??<\/span>\n<\/li>\n    
            7. } ??<\/span><\/li>\n    
            8. .spinner?svg?{ ??<\/span><\/li>\n    
            9. \n??<\/span>width<\/span>:?19%?!<\/span>important<\/span>; ??<\/span>\n<\/li>\n    
            10. \n??<\/span>height<\/span>:?<\/span>85px<\/span>?!<\/span>important<\/span>; ??<\/span>\n<\/li>\n    
            11. }??<\/span><\/li>\n<\/ol>\n<\/div>\n<\/div>\n
              JavaScript 代碼<\/p>\n
              \n
              \nJavaScript Code<\/span>復(fù)制內(nèi)容到剪貼板<\/span>\n<\/div>\n
              \n
                \n    
              1. angular.module(‘ionicApp‘,?[‘ionic‘]) ??<\/span><\/span><\/li>\n    
              2. ??<\/span><\/li>\n    
              3. \n.controller(‘MyCtrl‘,?<\/span>function<\/span>($scope)?{? ??<\/span>\n<\/li>\n    
              4. ?? ??<\/span><\/li>\n    
              5. });??<\/span><\/li>\n<\/ol>\n<\/div>\n<\/div>"}	
	







                国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
                
	

                
    

                

	
	
                
		
                
			
                
							
                
					
                
						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
                
							
							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. 
    
                2. 
<rect?x="0"?y="0"?width="4"?height="10"?fill="#333"?transform="translate(0?15.1665)">??

                  3. 
    
                3. 
<animateTransform?attributeType="xml"?attributeName="transform"?type="translate"?values="0?0;?0?20;?0?0"?begin="0"?dur="0.6s"?repeatCount="indefinite">animateTransform>??

                  4. 
    
                4. 
rect>??

                  5. 
    
                5. 
<rect?x="10"?y="0"?width="4"?height="10"?fill="#333"?transform="translate(0?11.5002)">??

                  6. 

                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. 
    
                7. 
rect>??

                  8. 
    
                8. 
<rect?x="20"?y="0"?width="4"?height="10"?fill="#333"?transform="translate(0?1.83315)">??

                  9. 
    
                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. 
    
                10. 
rect>??

                  11. 
    
                11. 
svg>??

                  12. 

                

                

                

                此時代碼已經(jīng)可以帶動畫了，但沒顏色，請繼續(xù)看STEP2添加顏色。
                

                STEP 2 : 為SVG圖像添加顏色
                

                給你的樣式表添加如下樣式，里面的顏色代碼換上你喜歡的即！
                

                

                
XML/HTML Code復(fù)制內(nèi)容到剪貼板

                

                

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

                  4. 

                

                

                

                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. 
    
                2. 
??<head>??

                  3. 
    
                3. 
????<meta?charset="utf-8">??

                  4. 
    
                4. 
????<meta?name="viewport"?content="initial-scale=1,?maximum-scale=1,?user-scalable=no,?width=device-width">? ??

                  5. 
    
                5. ???? ??
                  6. 
    
                6. 
????<title>Ionic?Modaltitle>??

                  7. 
    
                7. ??
                  8. 
    
                8. 
?????<link?href="http://www.runoob.com/static/ionic/css/ionic.min.css"?rel="stylesheet">??

                  9. 
    
                9. 
????<script?src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js">script>??

                  10. 
    
                10. 
??head>??

                  11. 
    
                11. 
<body?ng-controller="AppCtrl">??

                  12. 
    
                12. ???? ??
                  13. 
    
                13. 
??????<ion-view?title="Home">??

                  14. 
    
                14. 
????????<ion-header-bar>??

                  15. 
    
                15. 
??????????<h1?class="title">The?Stoogesh1>??

                  16. 
    
                16. 
????????ion-header-bar>??

                  17. 
    
                17. 
????????<ion-content?has-header="true">??

                  18. 

                18. 
??????????<ion-list>??

                  19. 
    
                19. 
????????????<ion-item?ng-repeat="stooge?in?stooges"?href="#">{{stooge.name}}ion-item>??

                  20. 
    
                20. 
??????????ion-list>??

                  21. 
    
                21. 
????????ion-content>??

                  22. 
    
                22. 
??????ion-view>??

                  23. 
    
                23. ???? ??
                  24. 
    
                24. 
??body>??

                  25. 
    
                25. 
html>??

                  26. 

                

                

                

                JavaScript 代碼
                

                

                
JavaScript Code復(fù)制內(nèi)容到剪貼板

                

                

                  
    
                1. angular.module(‘ionicApp‘,?[‘ionic‘]) ??
                  2. 
    
                2. 
.controller(‘AppCtrl‘,?function($scope,?$timeout,?$ionicLoading)?{ ??

                  3. 
    
                3. ??
                  4. 
    
                4. 
??//?Setup?the?loader ??

                  5. 
    
                5. ??$ionicLoading.show({ ??
                  6. 
    
                6. ????content:?‘Loading‘, ??
                  7. 
    
                7. 
????animation:?‘fade-in‘, ??

                  8. 
    
                8. 
????showBackdrop:?true, ??

                  9. 
    
                9. ????maxWidth:?200, ??
                  10. 
    
                10. ????showDelay:?0 ??
                  11. 
    
                11. ??}); ??
                  12. 
    
                12. ?? ??
                  13. 
    
                13. 
??//?Set?a?timeout?to?clear?loader,?however?you?would?actually?call?the?$ionicLoading.hide();?method?whenever?everything?is?ready?or?loaded. ??

                  14. 
    
                14. 
??$timeout(function?()?{ ??

                  15. 
    
                15. ????$ionicLoading.hide(); ??
                  16. 
    
                16. ????$scope.stooges?=?[{name:?‘Moe‘},?{name:?‘Larry‘},?{name:?‘Curly‘}]; ??
                  17. 
    
                17. ??},?2000); ??
                  18. 
    
                18. ?? ??
                  19. 
    
                19. });??
                  20. 

                

                

                

                $ionicLoadingConfig
                使用實例：
                

                HTML 代碼
                

                

                
XML/HTML Code復(fù)制內(nèi)容到剪貼板

                

                

                  
    
                1. <ion-content?scroll="false"?class="has-header">??
                  2. 
    
                2. 
??<p>??

                  3. 
    
                3. 
????<ion-spinner?icon="android">ion-spinner>??

                  4. 
    
                4. 
????<ion-spinner?icon="ios">ion-spinner>??

                  5. 
    
                5. 
????<ion-spinner?icon="ios-small">ion-spinner>??

                  6. 
    
                6. 
????<ion-spinner?icon="bubbles"?class="spinner-balanced">ion-spinner>??

                  7. 
    
                7. 
????<ion-spinner?icon="circles"?class="spinner-energized">ion-spinner>??

                  8. 
    
                8. 
??p>??

                  9. 
    
                9. ??
                  10. 
    
                10. 
??<p>??

                  11. 
    
                11. 
????<ion-spinner?icon="crescent"?class="spinner-royal">ion-spinner>??

                  12. 
    
                12. ??
                  13. 
    
                13. 
????<ion-spinner?icon="dots"?class="spinner-dark">ion-spinner>??

                  14. 

                14. 
????<ion-spinner?icon="lines"?class="spinner-calm">ion-spinner>??

                  15. 
    
                15. 
????<ion-spinner?icon="ripple"?class="spinner-assertive">ion-spinner>??

                  16. 
    
                16. 
????<ion-spinner?icon="spiral">ion-spinner>??

                  17. 
    
                17. 
??p>??

                  18. 
    
                18. ??
                  19. 
    
                19. ??
                  20. 
    
                20. 
ion-content>??

                  21. 

                

                

                

                ?
                CSS 代碼
                

                

                
CSS Code復(fù)制內(nèi)容到剪貼板

                

                

                  
    
                1. body?{ ??
                  2. 
    
                2. 
??cursor:?url(‘http://www.runob.com/try/demo_source/finger.png‘),?auto; ??

                  3. 
    
                3. }???? ??
                  4. 
    
                4. p?{ ??
                  5. 
    
                5. 
??text-align:?center; ??

                  6. 
    
                6. 
??margin-bottom:?40px?!important; ??

                  7. 
    
                7. } ??
                  8. 
    
                8. .spinner?svg?{ ??
                  9. 
    
                9. 
??width:?19%?!important; ??

                  10. 
    
                10. 
??height:?85px?!important; ??

                  11. 
    
                11. }??
                  12. 

                

                

                

                JavaScript 代碼
                

                

                
JavaScript Code復(fù)制內(nèi)容到剪貼板

                

                

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

                  4. 
    
                4. ?? ??
                  5. 
    
                5. });??
                  6. 

                

                

                


						
                
					
                
					
                
						
                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
                
								
                
								
                
																		
                
											
												Undress AI Tool
											
											
                
												
													
                Undress AI Tool
                
												                
												
                Undress images for free
                
											
                
										
                
																		
                
											
												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.
                
											
                
										
                
																		
                
											
												Clothoff.io
											
											
                
												
													
                Clothoff.io
                
												                
												
                AI clothes remover
                
											
                
										
                
																		
                
											
												Video Face Swap
											
											
                
												
													
                Video Face Swap
                
												                
												
                Swap faces in any video effortlessly with our completely free AI face swap tool!
                
											
                
										
                
																
                
								
							
                
						
                
					


					


											
                
							
                
								
                
									
									
                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)
                
											
                
										
                
																	
                
								
							
                
						
                
										

					
					
				
                
			
                
							
                
					
                
						
						
                

													
                
								
									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!
                
							
                
														
                
								
									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.
                
							
                
														
                
								
									An in-depth analysis of how to use svg icons in vue3+vite
								
								An in-depth analysis of how to use svg icons in vue3+vite
								Apr 28, 2022 am	 10:48 AM
								
                svg images are widely used in projects. The following article will introduce how to use svg icons in vue3 + vite. I hope it will be helpful to everyone!
                
							
                
														
                
								
									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.
                
							
                
														
                
								
									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.
                
							
                
													
                

													
								See all articles