@-webkit-keyframes rotate {
     from {
         -webkit-transform: rotate(0deg);
     }

     to {
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .loader {
     display: block;
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, 0.4);
     margin: auto;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999999;
 }

 .loader>icon {
     display: block;
     height: 160px;
     width: 160px;
     background: transparent;
     border: 1px solid #8db74f;
     border-radius: 80px;
     margin: auto;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     animation: 15s rotate infinite linear;
 }

 .loader>icon:before {
     content: "";
     margin: auto;
     border-top: 15px solid #fff;
     border-right: 30px solid transparent;
     border-bottom: 15px solid #fff;
     border-left: 30px solid transparent;
     border-radius: 100px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     animation: 3s rotate infinite linear;
     z-index: 5;
 }

 .loader>icon:after {
     content: "";
     margin: auto;
     border-top: 40px solid transparent;
     border-right: 40px solid #8db74f;
     border-bottom: 40px solid transparent;
     border-left: 40px solid #8db74f;
     border-radius: 100px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10;
 }

 .loader>.loader-logo img {
     width: 40px;
 }

 .loader>.loader-logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }