JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<body>
 <div class="ss-loader-container" id="ss-survey-loader">
      <span>
          <div class="ss-inital-loader"></div> 

      <p>
      loading... 
      </p> 
            </span> 
     
    </div>
</body>

CSS

body{
  height: 100%;
  width: 100%;
  background-color: pink;
  position: relative;
}

.ss-noscript-container
    {
      width: 100%;
      background-color: #EF6021; 
      padding: 15px;
    }
    .ss-noscript-container p{
      color: #fff;
      margin-top:0px;
      margin-bottom:0px;
      font-size: 16px;
      font-weight: 300;
      text-align: center;
    }
    .ss-loader-container
    {
      height: 100%;
      width: 100%; 
      position: relative;
      background-color: red;
    }
    .ss-loader-container span{
      position: absolute;
      top: 50%;
      
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%)
    }
    .ss-loader-container p{
      color: #4D3446;
      margin-top:10px;
      margin-bottom:0px;
      font-size: 16px;
      font-weight: 300;
      text-align: center;
    }
    .ss-inital-loader {  
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;

      border: 5px solid #f3f3f3; 
      border-top: 5px solid #19B885;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: ss-loader-spin 2s linear infinite;
    } 
    @keyframes ss-loader-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }