I am trying to center this loader which I got from https://cssloaders.github.io/ in the middle of the page with a dark background.

I am currently getting some weird layout and was not sure how to do the same.

This is the .css file

.bg {
    background-color: black;
    display: table;
    max-height: 100vh;
    min-height: 100vh;
}

.loader {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: relative;
    background: #000;
    border-radius: 15% 15% 35% 35%;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 45px;
    top: 8px;
    border: 4px solid #FFF;
    width: 16px;
    height: 20px;
    border-radius: 0 4px 4px 0;
  }
  .loader::before {
    content: '';  
    position: absolute;
    width: 1px;
    height: 10px;
    color: #FFF;
    top: -15px;
    left: 11px;
    box-sizing: border-box;
    animation: animloader 1s ease infinite;
  }
  
  @keyframes animloader {
      0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }
      50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }
      100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
    }

The js file

import React from 'react'
import './styles.css'

const SpinnerComponent = () => {
    return (
        <div >
        <span ></span>
        </div>
    )
}

export default SpinnerComponent

Any help would be appreciated

CodePudding user response：

The changes are in .loader and in .bg:

.bg {
    background-color: black;
    
    max-height: 100vh;
    min-height: 100vh;
    position: relative;
}

.loader {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: absolute;
    background: #000;
    border-radius: 15% 15% 35% 35%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 45px;
    top: 8px;
    border: 4px solid #FFF;
    width: 16px;
    height: 20px;
    border-radius: 0 4px 4px 0;
  }
  .loader::before {
    content: '';  
    position: absolute;
    width: 1px;
    height: 10px;
    color: #FFF;
    top: -15px;
    left: 11px;
    box-sizing: border-box;
    animation: animloader 1s ease infinite;
  }
  
  @keyframes animloader {
      0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }
      50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }
      100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
    }

<div >
    <span ></span>
</div>

CodePudding user response：

The easiest way to achieve this would be to put the loader span inside a container div and using flexbox bring the loader to the center of the page.

here is the code to achieve it.

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

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

.wrapper{
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div >
  <span ></span>  
</div>

Working example: https://codepen.io/anubhavmunjaal/pen/YzjZzxP