.loader
 { border: 16px solid #f3f3f3;
   border-radius: 50%;
   border-top: 16px solid #3498db;
   width: 120px;
   height: 120px;
   -webkit-animation: spin 2s linear infinite; /* Safari */
   animation: spin 2s linear infinite;

   /* tambahanku */
   position : fixed;
   margin-left : auto;
   margin-right : auto;
   margin-top : auto;
   margin-bottom : auto;
   left : 0;
   right : 0;
   top : 0;
   bottom : 0;
   z-index : 1033;
   display : none;
   /* tambahanku */
 }

/* Safari */
@-webkit-keyframes spin
 { 0%
    { -webkit-transform: rotate(0deg);
    }
   100%
    { -webkit-transform: rotate(360deg);
    }
 }

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

.loader-block
 { height : 100%;
   width : 100vw;
   background-color : #000;
   position : fixed;
   position : fixed;
   margin-left : auto;
   margin-right : auto;
   margin-top : auto;
   margin-bottom : auto;
   left : 0;
   right : 0;
   top : 0;
   bottom : 0;
   z-index : 1032;
   opacity : 0.5;
   display : none;
 }


.loading
 { display : none;
   position : relative;
 }

.loading div:nth-child(1)
 { border : 8px solid white;
   border-radius : 50%;
   border-top : 8px solid #3498db;
   width : 50px;
   height : 50px;
   -webkit-animation : spin 2s linear infinite;
   animation : spin 2s linear infinite;
 }

.loading div:nth-child(2)
 { position : absolute;
   top : 23px;
   text-align : center;
   width : 65px;
   -webkit-animation : fade 1.5s linear infinite;
   text-shadow : -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;
   animation : blink-animation 1s steps(2, start) infinite;
 }

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

@keyframes blink-animation
 { to
    { opacity : 0;
    }
 }