56 lines
		
	
	
		
			1003 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			56 lines
		
	
	
		
			1003 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* src/Spinner.css */
 | |
| .loader {
 | |
|   width: 48px;
 | |
|   height: 48px;
 | |
|   border-radius: 50%;
 | |
|   display: inline-block;
 | |
|   position: relative;
 | |
|   border: 3px solid;
 | |
|   border-color: #1A1A1D #1A1A1D transparent;
 | |
|   box-sizing: border-box;
 | |
|   animation: rotation 1s linear infinite;
 | |
| }
 | |
| 
 | |
| .loader::after {
 | |
|   content: '';  
 | |
|   box-sizing: border-box;
 | |
|   position: absolute;
 | |
|   left: 0;
 | |
|   right: 0;
 | |
|   top: 0;
 | |
|   bottom: 0;
 | |
|   margin: auto;
 | |
|   border: 3px solid;
 | |
|   border-color: transparent #0B4C6A #0B4C6A;
 | |
|   width: 24px;
 | |
|   height: 24px;
 | |
|   border-radius: 50%;
 | |
|   animation: rotationBack 0.5s linear infinite;
 | |
|   transform-origin: center center;
 | |
| }
 | |
| 
 | |
| .centered-spinner {
 | |
|   position: fixed;
 | |
|   top: 50%;
 | |
|   left: 50%;
 | |
|   transform: translate(-50%, -50%);
 | |
|   z-index: 1000; /* Ensure it appears above other content */
 | |
| }
 | |
| @keyframes rotation {
 | |
|   0% {
 | |
|     transform: rotate(0deg);
 | |
|   }
 | |
|   100% {
 | |
|     transform: rotate(360deg);
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes rotationBack {
 | |
|   0% {
 | |
|     transform: rotate(0deg);
 | |
|   }
 | |
|   100% {
 | |
|     transform: rotate(-360deg);
 | |
|   }
 | |
| }
 | 
