7.15. Bootstrap5 loading effect

发布时间 ： 2025-10-25 13:35:29 UTC      

Page Views: 10 views

To create a loading effect, you can use the .spinner-border class:

7.15.1. Example 

<div class="spinner-border">div>    
 You can use the text color class to set different colors: 
  
 
  7.15.2.  Example  
 
 
 
<div class="spinner-border text-muted">div> <div class="spinner-border text-primary">div> <div class="spinner-border text-success">div> <div class="spinner-border text-info">div> <div class="spinner-border text-warning">div> <div class="spinner-border text-danger">div> <div class="spinner-border text-secondary">div> <div class="spinner-border text-dark">div> <div class="spinner-border text-light">div>    
 
 Flashing loading effect  
 
 Use   .spinner-grow   class to set the loading effect of the flicker 
 
  
 
  7.15.3.  Example  
 
 
 
<div class="spinner-grow text-muted">div> <div class="spinner-grow text-primary">div> <div class="spinner-grow text-success">div> <div class="spinner-grow text-info">div> <div class="spinner-grow text-warning">div> <div class="spinner-grow text-danger">div> <div class="spinner-grow text-secondary">div> <div class="spinner-grow text-dark">div> <div class="spinner-grow text-light">div>    
 
 Set the load effect size  
 
 Use   .spinner-border-sm   or   .spinner-grow-sm   class to create the size of the load effect: 
 
  
 
  7.15.4.  Example  
 
 
 
<div class="spinner-border spinner-border-sm">div> <div class="spinner-grow spinner-grow-sm">div>    
 
 Load button  
 
 We can also set a button that is being loaded. 
 
  
 
  7.15.5.  Example  
 
 
 
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm">span> button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm">span> Loading.. button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm">span> Loading.. button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm">span> Loading.. button>      
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.15. Bootstrap5 loading effect 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289