Progress loader animation UI Page

Client-Side Components/UI Pages/Progress Loader/REAMDE.md

@@ -0,0 +1,17 @@
+# Loaders UI Page  
+
+This UI Page showcases a collection of loaders and spinners designed to visually represent ongoing processes in web applications. These components enhance user experience by providing clear feedback during data loading or processing.  
+
+## Features  
+- A diverse set of loader and spinner designs.  
+- Fully responsive and easily customizable.  
+- Lightweight and seamlessly integrable into glideModal or other UI components.  
+
+
+## Usage  
+1. Select the desired loader's HTML and CSS code from the examples.  
+2. Go to the Application Navigator and search for UI Pages under **System UI > UI Pages**.
+3. Click on New and create new record by adding given HTML in the HTML section.
+4. Adjust the styles as needed to align with your design requirements.  
+
+

Client-Side Components/UI Pages/Progress Loader/example_use_GlideModal.js

@@ -0,0 +1,14 @@
+
+
+//Example code to show the UI Page in GlideModal
+
+var dialog = new GlideModal("YOUR_UI_PAGE_NAME");
+
+//Set the dialog title
+dialog.setTitle('Demo title');
+
+//Set the dialog width		      	
+dialog.setWidth(550);
+
+//Display the modal
+dialog.render();

Client-Side Components/UI Pages/Progress Loader/loaderHTML.html

@@ -0,0 +1,278 @@
+<style>
+  /* Loader 1 CSS */
+  .lds-ring,
+  .lds-ring div {
+    box-sizing: border-box;
+  }
+
+  .lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid blue;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: blue transparent transparent transparent;
+  }
+
+  .lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+
+  .lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+
+  .lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  @keyframes lds-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Loader 2 CSS */
+
+  .lds-roller,
+  .lds-roller div,
+  .lds-roller div:after {
+    box-sizing: border-box;
+  }
+
+  .lds-roller {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+
+  .lds-roller div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+  }
+
+  .lds-roller div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7.2px;
+    height: 7.2px;
+    border-radius: 50%;
+    background: currentColor;
+    margin: -3.6px 0 0 -3.6px;
+  }
+
+  .lds-roller div:nth-child(1) {
+    animation-delay: -0.036s;
+  }
+
+  .lds-roller div:nth-child(1):after {
+    top: 62.62742px;
+    left: 62.62742px;
+  }
+
+  .lds-roller div:nth-child(2) {
+    animation-delay: -0.072s;
+  }
+
+  .lds-roller div:nth-child(2):after {
+    top: 67.71281px;
+    left: 56px;
+  }
+
+  .lds-roller div:nth-child(3) {
+    animation-delay: -0.108s;
+  }
+
+  .lds-roller div:nth-child(3):after {
+    top: 70.90963px;
+    left: 48.28221px;
+  }
+
+  .lds-roller div:nth-child(4) {
+    animation-delay: -0.144s;
+  }
+
+  .lds-roller div:nth-child(4):after {
+    top: 72px;
+    left: 40px;
+  }
+
+  .lds-roller div:nth-child(5) {
+    animation-delay: -0.18s;
+  }
+
+  .lds-roller div:nth-child(5):after {
+    top: 70.90963px;
+    left: 31.71779px;
+  }
+
+  .lds-roller div:nth-child(6) {
+    animation-delay: -0.216s;
+  }
+
+  .lds-roller div:nth-child(6):after {
+    top: 67.71281px;
+    left: 24px;
+  }
+
+  .lds-roller div:nth-child(7) {
+    animation-delay: -0.252s;
+  }
+
+  .lds-roller div:nth-child(7):after {
+    top: 62.62742px;
+    left: 17.37258px;
+  }
+
+  .lds-roller div:nth-child(8) {
+    animation-delay: -0.288s;
+  }
+
+  .lds-roller div:nth-child(8):after {
+    top: 56px;
+    left: 12.28719px;
+  }
+
+  @keyframes lds-roller {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Loader 3 CSS */
+
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+
+  /**************/
+
+  body {
+    /* background-color: #202628; */
+  }
+
+  .loader-circle-11 {
+    position: relative;
+    width: 70px;
+    height: 70px;
+    transform-style: preserve-3d;
+    perspective: 400px;
+  }
+
+  .loader-circle-11 .arc {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 5px solid #f00;
+  }
+
+  .loader-circle-11 .arc:nth-child(1) {
+    animation: rotate1 1.15s linear infinite;
+  }
+
+  .loader-circle-11 .arc:nth-child(2) {
+    animation: rotate2 1.15s linear infinite;
+  }
+
+  .loader-circle-11 .arc:nth-child(3) {
+    animation: rotate3 1.15s linear infinite;
+  }
+
+  .loading .arc:nth-child(1) {
+    animation-delay: -0.8s;
+  }
+
+  .loader-circle-11 .arc:nth-child(2) {
+    animation-delay: -0.4s;
+  }
+
+  .loader-circle-11 .arc:nth-child(3) {
+    animation-delay: 0s;
+  }
+
+  @keyframes rotate1 {
+    from {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
+    }
+  }
+
+  @keyframes rotate2 {
+    from {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
+    }
+  }
+
+  @keyframes rotate3 {
+    from {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
+    }
+
+    to {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
+    }
+  }
+</style>
+
+<!-- Loader 1 HTML -->
+<div class="lds-ring">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<!-- Loader 2 HTML -->
+<div class="lds-roller">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<!-- Loader 3 HTML -->
+<div class="loader-circle-11">
+  <div class="arc"></div>
+  <div class="arc"></div>
+  <div class="arc"></div>
+</div>