Custom File Manager

Current Path: /home/shrishakuntlam/domains/shrishakuntlamconstruction.com/public_html/includes

Name	Type	Actions
📁 ..	Folder	Open \| Delete
📄 chatbot.php	File	View \| Edit \| Delete
📄 close.png	File	View \| Edit \| Delete
📄 error.php	File	View \| Edit \| Delete
📄 footer.php	File	View \| Edit \| Delete
📄 forms.php	File	View \| Edit \| Delete
📄 header.php	File	View \| Edit \| Delete
📄 loader.php	File	View \| Edit \| Delete
📁 models	Folder	Open \| Delete
📄 navbar.php	File	View \| Edit \| Delete
📄 socialMediaLinks.php	File	View \| Edit \| Delete
📄 success.php	File	View \| Edit \| Delete

Editing: loader.php

<div class='loader'>
                <span data-text-preloader='S' class='animated-letters'>S</span>
                <span data-text-preloader='H' class='animated-letters'>H</span>
                <span data-text-preloader='R' class='animated-letters'>R</span>
                <span data-text-preloader='I' class='animated-letters'>I</span>
                <span data-text-preloader='-' class='animated-letters'>-</span>
                <span data-text-preloader='S' class='animated-letters'>S</span>
                <span data-text-preloader='H' class='animated-letters'>H</span>
                <span data-text-preloader='A' class='animated-letters'>A</span>
                <span data-text-preloader='K' class='animated-letters'>K</span>
                <span data-text-preloader='U' class='animated-letters'>U</span>
                <span data-text-preloader='N' class='animated-letters'>N</span>
                <span data-text-preloader='T' class='animated-letters'>T</span>
                <span data-text-preloader='L' class='animated-letters'>L</span>
                <span data-text-preloader='A' class='animated-letters'>A</span>
                <span data-text-preloader='M' class='animated-letters'>M</span>
            </div>

<p class='fw-5 text-center text-uppercase'>Shakuntlam Engineering Design</p>
            </div>
            <div class='loader-animation'>
                <div class='row h-100'>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>
                    <div class='col-3 single-loader p-0'>
                        <div class='loader-bg'></div>
                    </div>

</div>
            </div>
        </div>
    </div>
<style>

/* From Uiverse.io by alexruix */ 
/* Unique Loader Styles */
.unique-loader {
  width: 48px;
  height: 48px;
  margin: auto;
  position: relative;
}

.unique-loader:before {
  content: '';
  width: 48px;
  height: 5px;
  background: #f0808050;
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 50%;
  animation: unique-shadow 0.5s linear infinite;
}

.unique-loader:after {
  content: '';
  width: 100%;
  height: 100%;
  background: #f08080;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  animation: unique-jump 0.5s linear infinite;
}

@keyframes unique-jump {
  15% {
    border-bottom-right-radius: 3px;
  }

25% {
    transform: translateY(9px) rotate(22.5deg);
  }

50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }

75% {
    transform: translateY(9px) rotate(67.5deg);
  }

100% {
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes unique-shadow {
  0%,
  100% {
    transform: scale(1, 1);
  }

50% {
    transform: scale(1.2, 1);
  }
}

</style>

});
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>