loader image alignment both dev server and mobile view placed as cente

Latha Donepudi

In dev server the loaderalignment is center comming into mobile view alignments has been changed then how i can get both alignment as center could you please send me the code?

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana3y ago

Accepted answer

Hello Latha,

You can use below CSS to show loader in centre screen.

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Then use is like below:

Thanks

Naimish Makwana

Deepak Rawat3y ago
```
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* other styles for the loader */
}
```
the loader should be centered in both desktop and mobile views. You can adjust other CSS styles as per your requirements.
Latha Donepudi3y ago
```
    
        
    
```
this is my code for loader give me any suggestions
Latha Donepudi3y ago
while taking this code got loder center in mobile view, but desktop view changed