EVOLUTION-NINJA

Edit File: Clinicalaudits_home_v.php

<?php echo view('NewIncludes/Header.php');?>

<div class="container-fluid">
    <div class="row">
        
        <div class="col-sm-2">
            <div class="med-side-bar">
                <div class="side-heading">
                    
                    <h3><u>Clinical Audits</u></h3>
                </div>
            </div>
        </div>
        
        <div class="col-sm-10">
            <div class="container-fluid">
                
                <div class="row">
                    <div class="col-sm-9"></div>
                    <div class="col-sm-2 mt-4">
						<button class="custom-btn btn-2" onclick="back()">
                        <img src="<?php echo base_url('public/assets/images/Import_fill.png'); ?>" alt="back">
                         Back</button>
					</div>
                </div>
                
                
                
                <div class="row">
                    <div class="col-sm-12 side-text">
                        <h2><b>Clinical Audits</b></h2>
                        <p>Easy to use reviews of healthcare delivery processes, practices, or outcomes with the aim of improving patient care and outcomes. Module involves collection, analysis, and interpretation of data related to clinical care against established standards or guidelines. </p>
                    </div>
                </div>
                <div class="col-sm-10 coming" >
            <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">

<div class="container">
                        <div class="loader1"></div>
                        <div class="loader1"></div>
                        <div class="loader1"></div>
                    </div>
                    
                    <div class="card">
                        <div class="loader">
                          <p>COMING</p>
                          <div class="words">
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                          </div>
                        </div>
                      </div>
                </div>
                <div class="col-sm-4"></div>
            </div>
            
              
        </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media only screen and (max-width: 600px){
        .card{
            margin-left: 51px !important;
        }
    }
    
    .card {
  margin-top: 280px;
  margin-left: 75px;
  border: none;

}
.loader {
  color: #00599C;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 37px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 50px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
  width: 130%;
  margin-left: -56px;

}

.words {
  overflow: hidden;
  position: relative;
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  color:  rgba(5, 141, 251, 1);

z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color:  rgba(5, 141, 251, 1);
  animation: spin_4991 4s infinite;
}

@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}
.loader1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader1:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader1:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

30%,36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

63%,69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

30%,36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

63%,69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

30%,36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

63%,69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}
@media only screen and (max-width:600px) {

.loader {
   
    margin-left: -15px;
}
.custom-btn{
    margin-right:20px;
}
}
    </style>

<script>
    function back(){
        window.location.href="<?php echo base_url('evidence-care'); ?>"
    }
    </script>
<?php echo view('NewIncludes/Footer.php');?>