<div class="planet planetEarth">

      <h2><span class="prathavi">E</span>arth</h2>

      <div class="container">

        <div class="loader">

          <span></span>  </div>

        <div class="earth"></div>

      </div>

    </div>

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  overflow: hidden;

  

}

.planet {

  display: flex;

  flex-direction: column;

}

.planet h2 {

  

  font-size: 4rem;

  margin-bottom: 49px;

  font-weight: 600;

  color:  #03a9f4  ;

}

.planet .container {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}

.planetEarth {

  position: relative;

  min-width: 50%;

  height: 100vh;

  justify-content: center;

  align-items: center;

  background: #182357;

}

.planetEarth .prathavi {

  color: white;

}

.planetEarth .loader {

  position: relative;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  animation: loader 4s linear infinite;

}

@keyframes loader {

  0% {

    transform: rotate(0deg);

  }

  100%

  {

    transform: rotate(360deg);

  }

}

.planetEarth .loader:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 50%;

  height: 100%;

  background: linear-gradient(to top, transparent,rgba(0,255,249,0.4));

  background-size: 200px 360px;

  background-repeat: no-repeat;

  border-top-left-radius: 200px;

  border-bottom-left-radius: 200px;

}

.planetEarth .loader:after {

  content: "";

  position: absolute;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

  width: 10px;

  height: 10px;

  background: #00fff9;

  border-radius: 50%;

  z-index: 10;

  box-shadow: 0 0 10px #00fff9,0 0 20px #00fff9,

0 0 30px #00fff9,

0 0 40px #00fff9,

0 0 50px #00fff9,

0 0 60px #00fff9,

0 0 70px #00fff9,

0 0 80px #00fff9,

0 0 90px #00fff9,

0 0 100px #00fff9;

}

.planetEarth .loader span {

  position: absolute;

  top: 10px;

  left: 10px;

  right: 10px;

  bottom: 10px;

  background: #182357;

  border-radius: 50%;

}

.earth {

  position: absolute;

  

  

  width: 340px;

  height: 340px;

  background: url(https://i.ibb.co/GHcXtTC/earth.jpg);

  border-radius: 50%;

  background-size: cover;

  box-shadow: inset 0 0 20px #03a9f4,0 0 120px #03a9f4; 

  animation: prathavi 20s linear infinite;

}

@keyframes prathavi {

 0% {

    background-position: 0%;

  }

 100% {

    background-position: 162.5%;

  }

}