diff --git a/loaders/12_one_color_examples/README.md b/loaders/12_one_color_examples/README.md
new file mode 100644
index 0000000..ce9fdf4
--- /dev/null
+++ b/loaders/12_one_color_examples/README.md
@@ -0,0 +1,864 @@
+
+# LOADER: 12 one color examples
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_12_one_color_examples.mp4](video_loader_example_12_one_color_examples.mp4)
+
+Original Source on loading.io: [https://loading.io/css/](https://loading.io/css/)
+
+
+## Documentation
+
+These loaders only use [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add any of them to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="basic_loaders_holder" class="basic_loader_wrapper visible_loader"> <!-- main wrapper -->
+
+<!-- here you can pick different basic loaders -->
+
+<!-- circle flips like a coin -->
+<div class="lds-circle"><div></div></div>
+<!-- circle flips like a coin -->
+
+<!-- start of heart beating -->
+<div class="lds-heart"><div></div></div>
+<!-- end of heart beating -->
+
+<!-- start of loading roller -->
+<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+<!-- end of loading roller -->
+
+
+<!-- start of 3 dots moving -->
+<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+<!-- end of 3 dots moving -->
+
+<br> <!-- separation for example purposes -->
+
+<!-- start of hour glass spinning -->
+<div class="lds-hourglass"></div>
+<!-- end of hour glass spinning -->
+
+<!-- start circular waves -->
+<div class="lds-ripple"><div></div><div></div></div>
+<!-- end circular waves -->
+
+
+
+
+<!-- start of classic loading circle (spinning) -->
+<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+<!-- end of classic loading circle (spinning) -->
+
+<!-- start of 6 dots loader -->
+<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+<!-- end of 6 dots loader -->
+
+<br> <!-- separation for example purposes -->
+
+<!-- start of continuous spinning circle -->
+<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+<!-- end of continuous spinning circle -->
+
+<!-- start of dual spinning circle -->
+<div class="lds-dual-ring"></div>
+<!-- end of dual spinning circle -->
+
+<!-- start of default dot circle -->
+<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+<!-- end of default dot circle -->
+
+<!-- start of 3squares animation -->
+<div class="lds-3squares"><div></div><div></div><div></div></div>
+<!-- end of 3squares animation -->
+
+<!-- end of picking different basic loaders -->
+
+<div> <!-- end of loader wrapper -->
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+  :root{
+    --main_animated_figure_color: #fa6602; /* <-- you can change the main figure color here */
+    --loader_main_background_color: #565656; /* <-- you can change the page background color here */
+  }
+/* .... end of css global vars ....*/
+
+/* general css (wrapper) */
+.basic_loader_wrapper.visible_loader{
+  display: table-cell;
+}
+.basic_loader_wrapper{
+  display: none;
+  width: 100vw;
+  height:100vh;
+  background-color: var(--loader_main_background_color);
+  text-align: center;
+  vertical-align: middle;
+}
+/* end of general css */
+
+/* ----------------------------------- */
+/* start of circle flips like a coin */
+.lds-circle {
+  display: inline-block;
+  transform: translateZ(1px);
+}
+.lds-circle > div {
+  display: inline-block;
+  width: 64px; /* <-- you can change the circle width  here */
+  height: 64px; /* <-- you can change the circle height  here */
+  margin: 8px;
+  border-radius: 50%;
+  background: var(--main_animated_figure_color);
+  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;  /* <-- you can change the circle's speed here by decreasing the duration (or slower it by increasing 
+  duration) */
+}
+@keyframes lds-circle {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  100% {
+    transform: rotateY(3600deg);
+  }
+}
+
+/* end of circle flips like a coin */
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of heart beating */
+
+.lds-heart {
+  display: inline-block;
+  position: relative;
+  width: 80px; 
+  height: 80px;
+  transform: rotate(45deg);
+  transform-origin: 40px 40px; 
+}
+.lds-heart div {
+  top: 32px;
+  left: 32px;
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  background: var(--main_animated_figure_color);
+  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); /* <-- you can change the heart beating duration  here */
+}
+.lds-heart div:after,
+.lds-heart div:before {
+  content: " ";
+  position: absolute;
+  display: block;
+  width: 32px; 
+  height: 32px;
+  background: var(--main_animated_figure_color);
+}
+.lds-heart div:before {
+  left: -24px;
+  border-radius: 50% 0 0 50%;
+}
+.lds-heart div:after {
+  top: -24px;
+  border-radius: 50% 50% 0 0;
+}
+@keyframes lds-heart {
+  0% {
+    transform: scale(0.95);
+  }
+  5% {
+    transform: scale(1.1);
+  }
+  39% {
+    transform: scale(0.85);
+  }
+  45% {
+    transform: scale(1);
+  }
+  60% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(0.9);
+  }
+}
+
+/* end of heart beating */
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of loading roller */
+.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: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--main_animated_figure_color);
+  margin: -4px 0 0 -4px;
+}
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+  top: 63px;
+  left: 63px;
+}
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+  top: 68px;
+  left: 56px;
+}
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+  top: 71px;
+  left: 48px;
+}
+.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: 71px;
+  left: 32px;
+}
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+  top: 68px;
+  left: 24px;
+}
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+  top: 63px;
+  left: 17px;
+}
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+  top: 56px;
+  left: 12px;
+}
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* end of loading roller */
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of 3 dots moving*/
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--main_animated_figure_color);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+/* end of 3 dots moving*/
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of hour glass spinning*/
+
+.lds-hourglass {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-hourglass:after {
+  content: " ";
+  display: block;
+  border-radius: 50%;
+  width: 0;
+  height: 0;
+  margin: 8px;
+  box-sizing: border-box;
+  border: 32px solid var(--main_animated_figure_color);
+  border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+  animation: lds-hourglass 1.2s infinite;
+}
+@keyframes lds-hourglass {
+  0% {
+    transform: rotate(0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  50% {
+    transform: rotate(900deg);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  100% {
+    transform: rotate(1800deg);
+  }
+}
+
+/* end of hour glass spinning*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of circular waves*/
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid var(--main_animated_figure_color);
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}
+/* end of circular waves*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of classic loading circle (spinning)*/
+
+.lds-spinner {
+  color: official;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-spinner div {
+  transform-origin: 40px 40px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+.lds-spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 18px;
+  border-radius: 20%;
+  background: var(--main_animated_figure_color);
+}
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* end of classic loading circle (spinning)*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of 6 dots loader*/
+.lds-grid {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-grid div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--main_animated_figure_color);
+  animation: lds-grid 1.2s linear infinite;
+}
+.lds-grid div:nth-child(1) {
+  top: 8px;
+  left: 8px;
+  animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+  top: 8px;
+  left: 32px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+  top: 8px;
+  left: 56px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+  top: 32px;
+  left: 8px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+  top: 32px;
+  left: 32px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+  top: 32px;
+  left: 56px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+  top: 56px;
+  left: 8px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+  top: 56px;
+  left: 32px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+  top: 56px;
+  left: 56px;
+  animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* end of 6 dots loader*/
+/* ----------------------------------- */
+
+
+
+
+
+/* ----------------------------------- */
+/* start of continuous spinning circle*/
+.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 var(--main_animated_figure_color);
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--main_animated_figure_color) 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);
+  }
+}
+
+/* end of continuous spinning circle*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of dual spinning circle*/
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6px solid var(--main_animated_figure_color);
+  border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* end of dual spinning circle*/
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of default dot circle*/
+.lds-default {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-default div {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--main_animated_figure_color);
+  border-radius: 50%;
+  animation: lds-default 1.2s linear infinite;
+}
+.lds-default div:nth-child(1) {
+  animation-delay: 0s;
+  top: 37px;
+  left: 66px;
+}
+.lds-default div:nth-child(2) {
+  animation-delay: -0.1s;
+  top: 22px;
+  left: 62px;
+}
+.lds-default div:nth-child(3) {
+  animation-delay: -0.2s;
+  top: 11px;
+  left: 52px;
+}
+.lds-default div:nth-child(4) {
+  animation-delay: -0.3s;
+  top: 7px;
+  left: 37px;
+}
+.lds-default div:nth-child(5) {
+  animation-delay: -0.4s;
+  top: 11px;
+  left: 22px;
+}
+.lds-default div:nth-child(6) {
+  animation-delay: -0.5s;
+  top: 22px;
+  left: 11px;
+}
+.lds-default div:nth-child(7) {
+  animation-delay: -0.6s;
+  top: 37px;
+  left: 7px;
+}
+.lds-default div:nth-child(8) {
+  animation-delay: -0.7s;
+  top: 52px;
+  left: 11px;
+}
+.lds-default div:nth-child(9) {
+  animation-delay: -0.8s;
+  top: 62px;
+  left: 22px;
+}
+.lds-default div:nth-child(10) {
+  animation-delay: -0.9s;
+  top: 66px;
+  left: 37px;
+}
+.lds-default div:nth-child(11) {
+  animation-delay: -1s;
+  top: 62px;
+  left: 52px;
+}
+.lds-default div:nth-child(12) {
+  animation-delay: -1.1s;
+  top: 52px;
+  left: 62px;
+}
+@keyframes lds-default {
+  0%, 20%, 80%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}
+
+/* end of default dot circle*/
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of 3squares animation*/
+.lds-3squares {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-3squares div {
+  display: inline-block;
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  background: var(--main_animated_figure_color);
+  animation: lds-3squares 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.lds-3squares div:nth-child(1) {
+  left: 8px;
+  animation-delay: -0.24s;
+}
+.lds-3squares div:nth-child(2) {
+  left: 32px;
+  animation-delay: -0.12s;
+}
+.lds-3squares div:nth-child(3) {
+  left: 56px;
+  animation-delay: 0;
+}
+@keyframes lds-3squares {
+  0% {
+    top: 8px;
+    height: 64px;
+  }
+  50%, 100% {
+    top: 24px;
+    height: 32px;
+  }
+}
+
+/* 3squares animation*/
+/* ----------------------------------- */
+
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('basic_loaders_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+    --main_animated_figure_color: #fa6602; /* <-- you can change the main figure color here */
+    --loader_main_background_color: #565656; /* <-- you can change the page background color here */
+  }
+
+
+```
+
diff --git a/loaders/12_one_color_examples/loader.css b/loaders/12_one_color_examples/loader.css
new file mode 100644
index 0000000..8de352b
--- /dev/null
+++ b/loaders/12_one_color_examples/loader.css
@@ -0,0 +1,729 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --main_animated_figure_color: #fa6602; /* <-- you can change the main figure color here */
+  --loader_main_background_color: #565656; /* <-- you can change the page background color here */
+}
+/* .... end of css global vars ....*/
+
+/* general css (wrapper) */
+.basic_loader_wrapper.visible_loader{
+display: table-cell;
+}
+.basic_loader_wrapper{
+display: none;
+width: 100vw;
+height:100vh;
+background-color: var(--loader_main_background_color);
+text-align: center;
+vertical-align: middle;
+}
+/* end of general css */
+
+/* ----------------------------------- */
+/* start of circle flips like a coin */
+.lds-circle {
+display: inline-block;
+transform: translateZ(1px);
+}
+.lds-circle > div {
+display: inline-block;
+width: 64px; /* <-- you can change the circle width  here */
+height: 64px; /* <-- you can change the circle height  here */
+margin: 8px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;  /* <-- you can change the circle's speed here by decreasing the duration (or slower it by increasing 
+duration) */
+}
+@keyframes lds-circle {
+0%, 100% {
+  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+}
+0% {
+  transform: rotateY(0deg);
+}
+50% {
+  transform: rotateY(1800deg);
+  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+}
+100% {
+  transform: rotateY(3600deg);
+}
+}
+
+/* end of circle flips like a coin */
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of heart beating */
+
+.lds-heart {
+display: inline-block;
+position: relative;
+width: 80px; 
+height: 80px;
+transform: rotate(45deg);
+transform-origin: 40px 40px; 
+}
+.lds-heart div {
+top: 32px;
+left: 32px;
+position: absolute;
+width: 32px;
+height: 32px;
+background: var(--main_animated_figure_color);
+animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); /* <-- you can change the heart beating duration  here */
+}
+.lds-heart div:after,
+.lds-heart div:before {
+content: " ";
+position: absolute;
+display: block;
+width: 32px; 
+height: 32px;
+background: var(--main_animated_figure_color);
+}
+.lds-heart div:before {
+left: -24px;
+border-radius: 50% 0 0 50%;
+}
+.lds-heart div:after {
+top: -24px;
+border-radius: 50% 50% 0 0;
+}
+@keyframes lds-heart {
+0% {
+  transform: scale(0.95);
+}
+5% {
+  transform: scale(1.1);
+}
+39% {
+  transform: scale(0.85);
+}
+45% {
+  transform: scale(1);
+}
+60% {
+  transform: scale(0.95);
+}
+100% {
+  transform: scale(0.9);
+}
+}
+
+/* end of heart beating */
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of loading roller */
+.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: 7px;
+height: 7px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+margin: -4px 0 0 -4px;
+}
+.lds-roller div:nth-child(1) {
+animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+top: 63px;
+left: 63px;
+}
+.lds-roller div:nth-child(2) {
+animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+top: 68px;
+left: 56px;
+}
+.lds-roller div:nth-child(3) {
+animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+top: 71px;
+left: 48px;
+}
+.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: 71px;
+left: 32px;
+}
+.lds-roller div:nth-child(6) {
+animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+top: 68px;
+left: 24px;
+}
+.lds-roller div:nth-child(7) {
+animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+top: 63px;
+left: 17px;
+}
+.lds-roller div:nth-child(8) {
+animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+top: 56px;
+left: 12px;
+}
+@keyframes lds-roller {
+0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
+}
+
+/* end of loading roller */
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of 3 dots moving*/
+.lds-ellipsis {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-ellipsis div {
+position: absolute;
+top: 33px;
+width: 13px;
+height: 13px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+left: 8px;
+animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+left: 8px;
+animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+left: 32px;
+animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+left: 56px;
+animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+0% {
+  transform: scale(0);
+}
+100% {
+  transform: scale(1);
+}
+}
+@keyframes lds-ellipsis3 {
+0% {
+  transform: scale(1);
+}
+100% {
+  transform: scale(0);
+}
+}
+@keyframes lds-ellipsis2 {
+0% {
+  transform: translate(0, 0);
+}
+100% {
+  transform: translate(24px, 0);
+}
+}
+/* end of 3 dots moving*/
+/* ----------------------------------- */
+
+
+
+/* ----------------------------------- */
+/* start of hour glass spinning*/
+
+.lds-hourglass {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-hourglass:after {
+content: " ";
+display: block;
+border-radius: 50%;
+width: 0;
+height: 0;
+margin: 8px;
+box-sizing: border-box;
+border: 32px solid var(--main_animated_figure_color);
+border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+animation: lds-hourglass 1.2s infinite;
+}
+@keyframes lds-hourglass {
+0% {
+  transform: rotate(0);
+  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+50% {
+  transform: rotate(900deg);
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+100% {
+  transform: rotate(1800deg);
+}
+}
+
+/* end of hour glass spinning*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of circular waves*/
+
+.lds-ripple {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-ripple div {
+position: absolute;
+border: 4px solid var(--main_animated_figure_color);
+opacity: 1;
+border-radius: 50%;
+animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+0% {
+  top: 36px;
+  left: 36px;
+  width: 0;
+  height: 0;
+  opacity: 1;
+}
+100% {
+  top: 0px;
+  left: 0px;
+  width: 72px;
+  height: 72px;
+  opacity: 0;
+}
+}
+/* end of circular waves*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of classic loading circle (spinning)*/
+
+.lds-spinner {
+color: official;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-spinner div {
+transform-origin: 40px 40px;
+animation: lds-spinner 1.2s linear infinite;
+}
+.lds-spinner div:after {
+content: " ";
+display: block;
+position: absolute;
+top: 3px;
+left: 37px;
+width: 6px;
+height: 18px;
+border-radius: 20%;
+background: var(--main_animated_figure_color);
+}
+.lds-spinner div:nth-child(1) {
+transform: rotate(0deg);
+animation-delay: -1.1s;
+}
+.lds-spinner div:nth-child(2) {
+transform: rotate(30deg);
+animation-delay: -1s;
+}
+.lds-spinner div:nth-child(3) {
+transform: rotate(60deg);
+animation-delay: -0.9s;
+}
+.lds-spinner div:nth-child(4) {
+transform: rotate(90deg);
+animation-delay: -0.8s;
+}
+.lds-spinner div:nth-child(5) {
+transform: rotate(120deg);
+animation-delay: -0.7s;
+}
+.lds-spinner div:nth-child(6) {
+transform: rotate(150deg);
+animation-delay: -0.6s;
+}
+.lds-spinner div:nth-child(7) {
+transform: rotate(180deg);
+animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(8) {
+transform: rotate(210deg);
+animation-delay: -0.4s;
+}
+.lds-spinner div:nth-child(9) {
+transform: rotate(240deg);
+animation-delay: -0.3s;
+}
+.lds-spinner div:nth-child(10) {
+transform: rotate(270deg);
+animation-delay: -0.2s;
+}
+.lds-spinner div:nth-child(11) {
+transform: rotate(300deg);
+animation-delay: -0.1s;
+}
+.lds-spinner div:nth-child(12) {
+transform: rotate(330deg);
+animation-delay: 0s;
+}
+@keyframes lds-spinner {
+0% {
+  opacity: 1;
+}
+100% {
+  opacity: 0;
+}
+}
+
+/* end of classic loading circle (spinning)*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of 6 dots loader*/
+.lds-grid {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-grid div {
+position: absolute;
+width: 16px;
+height: 16px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation: lds-grid 1.2s linear infinite;
+}
+.lds-grid div:nth-child(1) {
+top: 8px;
+left: 8px;
+animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+top: 8px;
+left: 32px;
+animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+top: 8px;
+left: 56px;
+animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+top: 32px;
+left: 8px;
+animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+top: 32px;
+left: 32px;
+animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+top: 32px;
+left: 56px;
+animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+top: 56px;
+left: 8px;
+animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+top: 56px;
+left: 32px;
+animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+top: 56px;
+left: 56px;
+animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+0%, 100% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.5;
+}
+}
+
+/* end of 6 dots loader*/
+/* ----------------------------------- */
+
+
+
+
+
+/* ----------------------------------- */
+/* start of continuous spinning circle*/
+.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 var(--main_animated_figure_color);
+border-radius: 50%;
+animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+border-color: var(--main_animated_figure_color) 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);
+}
+}
+
+/* end of continuous spinning circle*/
+/* ----------------------------------- */
+
+
+
+
+/* ----------------------------------- */
+/* start of dual spinning circle*/
+.lds-dual-ring {
+display: inline-block;
+width: 80px;
+height: 80px;
+}
+.lds-dual-ring:after {
+content: " ";
+display: block;
+width: 64px;
+height: 64px;
+margin: 8px;
+border-radius: 50%;
+border: 6px solid var(--main_animated_figure_color);
+border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
+}
+/* end of dual spinning circle*/
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of default dot circle*/
+.lds-default {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-default div {
+position: absolute;
+width: 6px;
+height: 6px;
+background: var(--main_animated_figure_color);
+border-radius: 50%;
+animation: lds-default 1.2s linear infinite;
+}
+.lds-default div:nth-child(1) {
+animation-delay: 0s;
+top: 37px;
+left: 66px;
+}
+.lds-default div:nth-child(2) {
+animation-delay: -0.1s;
+top: 22px;
+left: 62px;
+}
+.lds-default div:nth-child(3) {
+animation-delay: -0.2s;
+top: 11px;
+left: 52px;
+}
+.lds-default div:nth-child(4) {
+animation-delay: -0.3s;
+top: 7px;
+left: 37px;
+}
+.lds-default div:nth-child(5) {
+animation-delay: -0.4s;
+top: 11px;
+left: 22px;
+}
+.lds-default div:nth-child(6) {
+animation-delay: -0.5s;
+top: 22px;
+left: 11px;
+}
+.lds-default div:nth-child(7) {
+animation-delay: -0.6s;
+top: 37px;
+left: 7px;
+}
+.lds-default div:nth-child(8) {
+animation-delay: -0.7s;
+top: 52px;
+left: 11px;
+}
+.lds-default div:nth-child(9) {
+animation-delay: -0.8s;
+top: 62px;
+left: 22px;
+}
+.lds-default div:nth-child(10) {
+animation-delay: -0.9s;
+top: 66px;
+left: 37px;
+}
+.lds-default div:nth-child(11) {
+animation-delay: -1s;
+top: 62px;
+left: 52px;
+}
+.lds-default div:nth-child(12) {
+animation-delay: -1.1s;
+top: 52px;
+left: 62px;
+}
+@keyframes lds-default {
+0%, 20%, 80%, 100% {
+  transform: scale(1);
+}
+50% {
+  transform: scale(1.5);
+}
+}
+
+/* end of default dot circle*/
+/* ----------------------------------- */
+
+
+/* ----------------------------------- */
+/* start of 3squares animation*/
+.lds-3squares {
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
+}
+.lds-3squares div {
+display: inline-block;
+position: absolute;
+left: 8px;
+width: 16px;
+background: var(--main_animated_figure_color);
+animation: lds-3squares 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.lds-3squares div:nth-child(1) {
+left: 8px;
+animation-delay: -0.24s;
+}
+.lds-3squares div:nth-child(2) {
+left: 32px;
+animation-delay: -0.12s;
+}
+.lds-3squares div:nth-child(3) {
+left: 56px;
+animation-delay: 0;
+}
+@keyframes lds-3squares {
+0% {
+  top: 8px;
+  height: 64px;
+}
+50%, 100% {
+  top: 24px;
+  height: 32px;
+}
+}
+
+/* 3squares animation*/
+/* ----------------------------------- */
diff --git a/loaders/12_one_color_examples/loader.html b/loaders/12_one_color_examples/loader.html
new file mode 100644
index 0000000..4db847d
--- /dev/null
+++ b/loaders/12_one_color_examples/loader.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 12 one color examples</title>
+
+</head>
+<body>
+  <div id="basic_loaders_holder" class="basic_loader_wrapper visible_loader"> <!-- main wrapper -->
+
+    <!-- here you can pick different basic loaders -->
+    
+    <!-- circle flips like a coin -->
+    <div class="lds-circle"><div></div></div>
+    <!-- circle flips like a coin -->
+    
+    <!-- start of heart beating -->
+    <div class="lds-heart"><div></div></div>
+    <!-- end of heart beating -->
+    
+    <!-- start of loading roller -->
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of loading roller -->
+    
+    
+    <!-- start of 3 dots moving -->
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+    <!-- end of 3 dots moving -->
+    
+    <br> <!-- separation for example purposes -->
+    
+    <!-- start of hour glass spinning -->
+    <div class="lds-hourglass"></div>
+    <!-- end of hour glass spinning -->
+    
+    <!-- start circular waves -->
+    <div class="lds-ripple"><div></div><div></div></div>
+    <!-- end circular waves -->
+    
+    
+    
+    
+    <!-- start of classic loading circle (spinning) -->
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of classic loading circle (spinning) -->
+    
+    <!-- start of 6 dots loader -->
+    <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of 6 dots loader -->
+    
+    <br> <!-- separation for example purposes -->
+    
+    <!-- start of continuous spinning circle -->
+    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+    <!-- end of continuous spinning circle -->
+    
+    <!-- start of dual spinning circle -->
+    <div class="lds-dual-ring"></div>
+    <!-- end of dual spinning circle -->
+    
+    <!-- start of default dot circle -->
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of default dot circle -->
+    
+    <!-- start of 3squares animation -->
+    <div class="lds-3squares"><div></div><div></div><div></div></div>
+    <!-- end of 3squares animation -->
+    
+    <!-- end of picking different basic loaders -->
+    
+    <div> <!-- end of loader wrapper -->
+  
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/12_one_color_examples/video_loader_example_12_one_color_examples.mp4 b/loaders/12_one_color_examples/video_loader_example_12_one_color_examples.mp4
new file mode 100644
index 0000000..f2b1e92
Binary files /dev/null and b/loaders/12_one_color_examples/video_loader_example_12_one_color_examples.mp4 differ
diff --git a/loaders/3d_cube_scale/3d_cube_scale.mp4 b/loaders/3d_cube_scale/3d_cube_scale.mp4
new file mode 100644
index 0000000..c78c952
Binary files /dev/null and b/loaders/3d_cube_scale/3d_cube_scale.mp4 differ
diff --git a/loaders/3d_cube_scale/README.md b/loaders/3d_cube_scale/README.md
new file mode 100644
index 0000000..33c53c4
--- /dev/null
+++ b/loaders/3d_cube_scale/README.md
@@ -0,0 +1,254 @@
+# LOADER: 3D Cube Scale
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [3d_cube_scale.mp4](3d_cube_scale.mp4)
+
+Original Source on Codepen: [https://codepen.io/Rplus/pen/yXzaoW](https://codepen.io/Rplus/pen/yXzaoW)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_box">
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #ccc;
+  
+  /* 2. items container size */
+  --cl-size: 30vmin;
+
+  /* 2. item top side color */
+  --cl-item-color: #7f8084;
+
+  /* 3. item left side color */
+  --cl-item-left-side: #3a343c;
+
+  /* 4. item left side color */
+  --cl-item-right-side: #3a343c;
+}
+
+.custom_loader_box {
+  width: calc(var(--cl-size) * 2);
+  height: calc(var(--cl-size) * 2);
+  margin: auto;
+  transform-style: preserve-3d;
+  transform: rotateX(60deg) rotateZ(45deg);
+}
+
+.custom_loader_item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  transform-style: preserve-3d;
+  animation: animate_move 2s var(--animate-delay) linear infinite;
+}
+
+.custom_loader_item:nth-of-type(1) {
+  --animate-delay: -2s;
+}
+
+.custom_loader_item:nth-of-type(2) {
+  --animate-delay: -1.33333s;
+}
+
+.custom_loader_item:nth-of-type(3) {
+  --animate-delay: -0.66667s;
+}
+
+@keyframes animate_move {
+  0%, 100% {
+    transform: translateZ(calc(var(--cl-size) / 2));
+  }
+  10% {
+    transform: translateZ(0px);
+  }
+  20% {
+    transform: translateZ(calc(var(--cl-size) / -2));
+  }
+}
+
+.item_scale {
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: calc(var(--cl-size) / 5);
+  height: 100%;
+  color: var(--cl-item-color);
+  background-color: currentColor;
+  transform-origin: 100% 50%;
+  transform-style: preserve-3d;
+  animation: inherit;
+  animation-name: animate_scale;
+}
+
+@keyframes animate_scale {
+  0%,
+  100%,
+  5% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.1)) scaleY(0.2);
+  }
+  20% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.25)) scaleY(0.5);
+  }
+  30% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.5)) scaleY(1);
+  }
+  60% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.4)) scaleY(0.8);
+  }
+}
+
+.item_scale::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(100% * var(--d, 1));
+  bottom: 0;
+  width: 100%;
+  background-color: var(--color-dl, #2d282e);
+  transform-origin: 0% 50%;
+  transform: rotateY(90deg);
+}
+
+.item_scale:nth-of-type(2) {
+  --color-dl: var(--cl-item-left-side);
+  --item-rotate: 90deg;
+}
+
+.item_scale:nth-of-type(3) {
+  --d: 0;
+  --item-rotate: 180deg;
+}
+
+.item_scale:nth-of-type(4) {
+  --color-dl: var(--cl-item-right-side);
+  --d: 0;
+  --item-rotate: 270deg;
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #ccc;
+
+/* 2. items container size */
+--cl-size: 30vmin;
+
+/* 2. item top side color */
+--cl-item-color: #7f8084;
+
+/* 3. item left side color */
+--cl-item-left-side: #3a343c;
+
+/* 4. item left side color */
+--cl-item-right-side: #3a343c;
+
+
+```
+
+
+
+
diff --git a/loaders/3d_cube_scale/loader.css b/loaders/3d_cube_scale/loader.css
new file mode 100644
index 0000000..a452ae8
--- /dev/null
+++ b/loaders/3d_cube_scale/loader.css
@@ -0,0 +1,150 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #ccc;
+  
+  /* 2. items container size */
+  --cl-size: 30vmin;
+
+  /* 2. item top side color */
+  --cl-item-color: #7f8084;
+
+  /* 3. item left side color */
+  --cl-item-left-side: #3a343c;
+
+  /* 4. item left side color */
+  --cl-item-right-side: #3a343c;
+}
+
+.custom_loader_box {
+  width: calc(var(--cl-size) * 2);
+  height: calc(var(--cl-size) * 2);
+  margin: auto;
+  transform-style: preserve-3d;
+  transform: rotateX(60deg) rotateZ(45deg);
+}
+
+.custom_loader_item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  transform-style: preserve-3d;
+  animation: animate_move 2s var(--animate-delay) linear infinite;
+}
+
+.custom_loader_item:nth-of-type(1) {
+  --animate-delay: -2s;
+}
+
+.custom_loader_item:nth-of-type(2) {
+  --animate-delay: -1.33333s;
+}
+
+.custom_loader_item:nth-of-type(3) {
+  --animate-delay: -0.66667s;
+}
+
+@keyframes animate_move {
+  0%, 100% {
+    transform: translateZ(calc(var(--cl-size) / 2));
+  }
+  10% {
+    transform: translateZ(0px);
+  }
+  20% {
+    transform: translateZ(calc(var(--cl-size) / -2));
+  }
+}
+
+.item_scale {
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: calc(var(--cl-size) / 5);
+  height: 100%;
+  color: var(--cl-item-color);
+  background-color: currentColor;
+  transform-origin: 100% 50%;
+  transform-style: preserve-3d;
+  animation: inherit;
+  animation-name: animate_scale;
+}
+
+@keyframes animate_scale {
+  0%,
+  100%,
+  5% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.1)) scaleY(0.2);
+  }
+  20% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.25)) scaleY(0.5);
+  }
+  30% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.5)) scaleY(1);
+  }
+  60% {
+    transform: rotate(var(--item-rotate, 0deg)) translateX(calc(var(--cl-size) * 0.4)) scaleY(0.8);
+  }
+  
+}
+
+.item_scale::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(100% * var(--d, 1));
+  bottom: 0;
+  width: 100%;
+  background-color: var(--color-dl, #2d282e);
+  transform-origin: 0% 50%;
+  transform: rotateY(90deg);
+}
+
+.item_scale:nth-of-type(2) {
+  --color-dl: var(--cl-item-left-side);
+  --item-rotate: 90deg;
+}
+
+.item_scale:nth-of-type(3) {
+  --d: 0;
+  --item-rotate: 180deg;
+}
+
+.item_scale:nth-of-type(4) {
+  --color-dl: var(--cl-item-right-side);
+  --d: 0;
+  --item-rotate: 270deg;
+}
\ No newline at end of file
diff --git a/loaders/3d_cube_scale/loader.html b/loaders/3d_cube_scale/loader.html
new file mode 100644
index 0000000..f69220e
--- /dev/null
+++ b/loaders/3d_cube_scale/loader.html
@@ -0,0 +1,22 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_box">
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+    <div class="custom_loader_item">
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+      <div class="item_scale"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/3d_cube_scale/loader.js b/loaders/3d_cube_scale/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/3d_cube_scale/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/3d_cube_spinner/3d_cube_spinner_video.mp4 b/loaders/3d_cube_spinner/3d_cube_spinner_video.mp4
new file mode 100644
index 0000000..b8cef0c
Binary files /dev/null and b/loaders/3d_cube_spinner/3d_cube_spinner_video.mp4 differ
diff --git a/loaders/3d_cube_spinner/README.md b/loaders/3d_cube_spinner/README.md
new file mode 100644
index 0000000..3808894
--- /dev/null
+++ b/loaders/3d_cube_spinner/README.md
@@ -0,0 +1,289 @@
+# LOADER: 3D Cube Spinner
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [3d_cube_spinner_video.mp4](3d_cube_spinner_video.mp4)
+
+Original Source on Codepen: [https://codepen.io/CompuIves/pen/Ojjdoj](https://codepen.io/CompuIves/pen/Ojjdoj)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner_wrap">
+    <div class="custom_loader_cube">
+      <div class="custom_loader_sides">
+        <div class="cude_side cube_top"></div>
+        <div class="cude_side cube_bottom"></div>
+        <div class="cude_side cube_front"></div>
+        <div class="cude_side cube_back"></div>
+        <div class="cube_side cube_left"></div>
+        <div class="cube_side cube_right"></div>
+      </div>
+    </div>
+    <div class="custom_loader_text">
+      BUNDLING DEPENDENCIES
+    </div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* Custom styles starts here */
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@600&display=swap');
+
+* { box-sizing: border-box; }
+
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */ 
+  --cl-background: #FFD399;    
+
+  /* 2. cube border color */
+  --cl-cube-border-color: white; 
+
+  /* 3. cube width, width from 15vmin to 30vmin will look great */
+  --cl-cube-width: 25vmin; 
+
+  /* 4. border width (1/10 of cube width) */
+  --cl-cube-border-width: calc(var(--cl-cube-width) / 10); 
+
+  /* 5. cube background color */
+  --cl-cube-background: rgba(242, 119, 119, .5); 
+
+  /* 6. text color */
+  --cl-text-color: rgba(242, 119, 119, 1); 
+
+  /* 7. text font size */
+  --cl-text-font-size: 1rem; 
+
+  /* 8. text font weight */
+  --cl-text-font-weight: 600; 
+}
+
+.custom_loader_inner_wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.custom_loader_cube, 
+.custom_loader_cube * {
+  position: absolute;
+  width: calc(var(--cl-cube-width) + 1px);
+  height: calc(var(--cl-cube-width) + 1px);
+}
+
+.custom_loader_sides {
+  transform-style: preserve-3d;
+  transform: rotateX(-37.5deg) rotateY(45deg);
+  animation: sides_rotate 3s ease infinite;
+  animation-delay: 0.8s;
+}
+
+@keyframes sides_rotate {
+  0% {
+    transform: rotateX(-37.5deg) rotateY(45deg);
+  }
+  50% {
+    transform: rotateX(-37.5deg) rotateY(405deg);
+  }
+  100% {
+    transform: rotateX(-37.5deg) rotateY(405deg);
+  }
+}
+
+.custom_loader_sides * {
+  background-color: var(--cl-cube-background);
+  border: var(--cl-cube-border-width) solid var(--cl-cube-border-color);
+  transform-origin: 50% 50%;
+}
+
+.custom_loader_text {
+  margin-top: calc(var(--cl-cube-width) * 3.5);
+  color: var(--cl-text-color);
+  font-size: var(--cl-text-font-size);
+  font-weight: var(--cl-text-font-weight);
+  width: 100%;
+  text-align: center;
+}
+
+.cube_top {
+  --cube-animate-delay: 0;
+  --cube-rotate-x: 90deg;
+  --cube-rotate-y: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate; 
+  animation-delay: var(--cube-animate-delay); 
+}
+
+.cube_bottom {
+  --cube-animate-delay: 0;
+  --cube-rotate-x: -90deg;
+  --cube-rotate-y: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_front {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: 0deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_back {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: -180deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_left {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: -90deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_right {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: 90deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+@keyframes cube_animate {
+  0% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+  20% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(calc(var(--cl-cube-width) / 2));
+  }
+  70% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(calc(var(--cl-cube-width) / 2));
+  }
+  90% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+  100% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+}
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */ 
+--cl-background: #FFD399;    
+
+/* 2. cube border color */
+--cl-cube-border-color: white; 
+
+/* 3. cube width, width from 15vmin to 30vmin will look great */
+--cl-cube-width: 25vmin; 
+
+/* 4. border width (1/10 of cube width) */
+--cl-cube-border-width: calc(var(--cl-cube-width) / 10); 
+
+/* 5. cube background color */
+--cl-cube-background: rgba(242, 119, 119, .5); 
+
+/* 6. text color */
+--cl-text-color: rgba(242, 119, 119, 1); 
+
+/* 7. text font size */
+--cl-text-font-size: 1rem; 
+
+/* 8. text font weight */
+--cl-text-font-weight: 600; 
+
+
+```
+
+
+
+
diff --git a/loaders/3d_cube_spinner/loader.css b/loaders/3d_cube_spinner/loader.css
new file mode 100644
index 0000000..f40a80b
--- /dev/null
+++ b/loaders/3d_cube_spinner/loader.css
@@ -0,0 +1,181 @@
+/* Custom styles starts here */
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@600&display=swap');
+
+* { box-sizing: border-box; }
+
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */ 
+  --cl-background: #FFD399;    
+
+  /* 2. cube border color */
+  --cl-cube-border-color: white; 
+
+  /* 3. cube width, width from 15vmin to 30vmin will look great */
+  --cl-cube-width: 25vmin; 
+
+  /* 4. border width (1/10 of cube width) */
+  --cl-cube-border-width: calc(var(--cl-cube-width) / 10); 
+
+  /* 5. cube background color */
+  --cl-cube-background: rgba(242, 119, 119, .5); 
+
+  /* 6. text color */
+  --cl-text-color: rgba(242, 119, 119, 1); 
+
+  /* 7. text font size */
+  --cl-text-font-size: 1rem; 
+
+  /* 8. text font weight */
+  --cl-text-font-weight: 600; 
+}
+
+.custom_loader_inner_wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.custom_loader_cube, 
+.custom_loader_cube * {
+  position: absolute;
+  width: calc(var(--cl-cube-width) + 1px);
+  height: calc(var(--cl-cube-width) + 1px);
+}
+
+.custom_loader_sides {
+  transform-style: preserve-3d;
+  transform: rotateX(-37.5deg) rotateY(45deg);
+  animation: sides_rotate 3s ease infinite;
+  animation-delay: 0.8s;
+}
+
+@keyframes sides_rotate {
+  0% {
+    transform: rotateX(-37.5deg) rotateY(45deg);
+  }
+  50% {
+    transform: rotateX(-37.5deg) rotateY(405deg);
+  }
+  100% {
+    transform: rotateX(-37.5deg) rotateY(405deg);
+  }
+}
+
+.custom_loader_sides * {
+  background-color: var(--cl-cube-background);
+  border: var(--cl-cube-border-width) solid var(--cl-cube-border-color);
+  transform-origin: 50% 50%;
+}
+
+.custom_loader_text {
+  margin-top: calc(var(--cl-cube-width) * 3.5);
+  color: var(--cl-text-color);
+  font-size: var(--cl-text-font-size);
+  font-weight: var(--cl-text-font-weight);
+  width: 100%;
+  text-align: center;
+}
+
+.cube_top {
+  --cube-animate-delay: 0;
+  --cube-rotate-x: 90deg;
+  --cube-rotate-y: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate; 
+  animation-delay: var(--cube-animate-delay); 
+}
+
+.cube_bottom {
+  --cube-animate-delay: 0;
+  --cube-rotate-x: -90deg;
+  --cube-rotate-y: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_front {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: 0deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_back {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: -180deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_left {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: -90deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+.cube_right {
+  --cube-animate-delay: 0.1s;
+  --cube-rotate-y: 90deg;
+  --cube-rotate-x: 0;
+  transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  animation: 3s ease infinite forwards cube_animate;
+  animation-delay: var(--cube-animate-delay);
+}
+
+@keyframes cube_animate {
+  0% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+  20% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(calc(var(--cl-cube-width) / 2));
+  }
+  70% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(calc(var(--cl-cube-width) / 2));
+  }
+  90% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+  100% {
+    opacity: 1;
+    transform: rotateX(var(--cube-rotate-x)) rotateY(var(--cube-rotate-y)) translateZ(var(--cl-cube-width));
+  }
+}
\ No newline at end of file
diff --git a/loaders/3d_cube_spinner/loader.html b/loaders/3d_cube_spinner/loader.html
new file mode 100644
index 0000000..ae609f7
--- /dev/null
+++ b/loaders/3d_cube_spinner/loader.html
@@ -0,0 +1,17 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner_wrap">
+    <div class="custom_loader_cube">
+      <div class="custom_loader_sides">
+        <div class="cude_side cube_top"></div>
+        <div class="cude_side cube_bottom"></div>
+        <div class="cude_side cube_front"></div>
+        <div class="cude_side cube_back"></div>
+        <div class="cube_side cube_left"></div>
+        <div class="cube_side cube_right"></div>
+      </div>
+    </div>
+    <div class="custom_loader_text">
+      BUNDLING DEPENDENCIES
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/3d_cube_spinner/loader.js b/loaders/3d_cube_spinner/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/3d_cube_spinner/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/3d_falling_rings/README.md b/loaders/3d_falling_rings/README.md
new file mode 100644
index 0000000..ef3b473
--- /dev/null
+++ b/loaders/3d_falling_rings/README.md
@@ -0,0 +1,168 @@
+
+# LOADER: 3d falling rings
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_3d_falling_rings.mp4](video_loader_example_3d_falling_rings.mp4)
+
+Original Source on Codepen: [https://codepen.io/phpcodertech/pen/aboPGBm](https://codepen.io/phpcodertech/pen/aboPGBm)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="ring_loader_holder" class="rings_loader_wrapper visible_loader">
+  <div class="rings_loader">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+:root{
+   --loader_color_rings_background: #d7d7d7;  /*<-- you can change here the page background color */
+   --loader_size_rings: 180px;   /*<-- you can change here the size of the rings */
+   --loader_color_ring_upside: #2d2613;   /*<-- you can change here the color of the ring (upside) */
+   --loader_color_ring_inside: #e62a2a;   /*<-- you can change here the color of the ring (inside) */
+   --loader_color_ring_side: #e05113;   /*<-- you can change here the color of the ring (main side) */
+   --loader_duration_rings: 5s;   /*<-- you can change here the duration (in seconds) of the rings animation */
+   --loader_duration_ring2: 1s;   /*<-- you can change here the delay (in seconds) of the ring#2 to start its animation */
+   --loader_duration_ring3: 2s;   /*<-- you can change here the delay (in seconds) of the ring#3 to start its animation */
+}
+.rings_loader_wrapper.visible_loader
+{
+	display: flex;
+}
+.rings_loader_wrapper
+{
+	margin: 0;
+	padding: 0;
+	display: none;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	background-color: var(--loader_color_rings_background);
+}
+.rings_loader
+{
+	position: relative;
+	width: var(--loader_size_rings);
+	height: var(--loader_size_rings);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transform-style: preserve-3d;
+	transform: perspective(500px) rotateX(45deg);
+}
+.rings_loader span
+{
+	position: absolute;
+	display: block;
+	border: 15px solid var(--loader_color_ring_upside);
+	box-sizing: border-box;
+	border-radius: 50%;
+	box-shadow: 0 10px 0 var(--loader_color_ring_side), inset 0 10px 0 var(--loader_color_ring_inside);
+	animation: animate var(--loader_duration_rings) ease-in-out infinite;
+}
+.rings_loader span:nth-child(1)
+{
+	animation-delay: 0s;
+}
+.rings_loader span:nth-child(2)
+{
+	animation-delay: var(--loader_duration_ring2);
+}
+.rings_loader span:nth-child(3)
+{
+	animation-delay: var(--loader_duration_ring3);
+}
+@keyframes animate
+{
+	0%{
+		transform: translateZ(-100px);
+		width: 100%;
+		height: 100%;
+	}
+	25%{
+		transform: translateZ(100px);
+		width: 100%;
+		height: 100%;
+	}
+	50%{
+		transform: translateZ(100px);
+		width: 35%;
+		height: 35%;
+	}
+	75%{
+		transform: translateZ(-100px);
+		width: 35%;
+		height: 35%;
+	}
+	100%{
+		transform: translateZ(-100px);
+		width: 100%;
+		height: 100%;
+	}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('ring_loader_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+   --loader_color_rings_background: #d7d7d7;  /*<-- you can change here the page background color */
+   --loader_size_rings: 180px;   /*<-- you can change here the size of the rings */
+   --loader_color_ring_upside: #2d2613;   /*<-- you can change here the color of the ring (upside) */
+   --loader_color_ring_inside: #e62a2a;   /*<-- you can change here the color of the ring (inside) */
+   --loader_color_ring_side: #e05113;   /*<-- you can change here the color of the ring (main side) */
+   --loader_duration_rings: 5s;   /*<-- you can change here the duration (in seconds) of the rings animation */
+   --loader_duration_ring2: 1s;   /*<-- you can change here the delay (in seconds) of the ring#2 to start its animation */
+   --loader_duration_ring3: 2s;   /*<-- you can change here the delay (in seconds) of the ring#3 to start its animation */
+}
+
+
+```
+
diff --git a/loaders/3d_falling_rings/loader.css b/loaders/3d_falling_rings/loader.css
new file mode 100644
index 0000000..5fdb221
--- /dev/null
+++ b/loaders/3d_falling_rings/loader.css
@@ -0,0 +1,90 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+**  or, if you require a completely different custom loader,
+**  you can always contact us at support@awe.media
+*/
+:root{
+  --loader_color_rings_background: #d7d7d7;  /*<-- you can change here the page background color */
+  --loader_size_rings: 180px;   /*<-- you can change here the size of the rings */
+  --loader_color_ring_upside: #2d2613;   /*<-- you can change here the color of the ring (upside) */
+  --loader_color_ring_inside: #e62a2a;   /*<-- you can change here the color of the ring (inside) */
+  --loader_color_ring_side: #e05113;   /*<-- you can change here the color of the ring (main side) */
+  --loader_duration_rings: 5s;   /*<-- you can change here the duration (in seconds) of the rings animation */
+  --loader_duration_ring2: 1s;   /*<-- you can change here the delay (in seconds) of the ring#2 to start its animation */
+  --loader_duration_ring3: 2s;   /*<-- you can change here the delay (in seconds) of the ring#3 to start its animation */
+}
+.rings_loader_wrapper.visible_loader
+{
+	display: flex;
+}
+.rings_loader_wrapper
+{
+ margin: 0;
+ padding: 0;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: var(--loader_color_rings_background);
+}
+.rings_loader
+{
+ position: relative;
+ width: var(--loader_size_rings);
+ height: var(--loader_size_rings);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform-style: preserve-3d;
+ transform: perspective(500px) rotateX(45deg);
+}
+.rings_loader span
+{
+ position: absolute;
+ display: block;
+ border: 15px solid var(--loader_color_ring_upside);
+ box-sizing: border-box;
+ border-radius: 50%;
+ box-shadow: 0 10px 0 var(--loader_color_ring_side), inset 0 10px 0 var(--loader_color_ring_inside);
+ animation: animate var(--loader_duration_rings) ease-in-out infinite;
+}
+.rings_loader span:nth-child(1)
+{
+ animation-delay: 0s;
+}
+.rings_loader span:nth-child(2)
+{
+ animation-delay: var(--loader_duration_ring2);
+}
+.rings_loader span:nth-child(3)
+{
+ animation-delay: var(--loader_duration_ring3);
+}
+@keyframes animate
+{
+ 0%{
+   transform: translateZ(-100px);
+   width: 100%;
+   height: 100%;
+ }
+ 25%{
+   transform: translateZ(100px);
+   width: 100%;
+   height: 100%;
+ }
+ 50%{
+   transform: translateZ(100px);
+   width: 35%;
+   height: 35%;
+ }
+ 75%{
+   transform: translateZ(-100px);
+   width: 35%;
+   height: 35%;
+ }
+ 100%{
+   transform: translateZ(-100px);
+   width: 100%;
+   height: 100%;
+ }
+}
\ No newline at end of file
diff --git a/loaders/3d_falling_rings/loader.html b/loaders/3d_falling_rings/loader.html
new file mode 100644
index 0000000..9340ada
--- /dev/null
+++ b/loaders/3d_falling_rings/loader.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 3d falling rings</title>
+
+</head>
+<body>
+  <div id="ring_loader_holder" class="rings_loader_wrapper visible_loader">
+    <div class="rings_loader">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/3d_falling_rings/video_loader_example_3d_falling_rings.mp4 b/loaders/3d_falling_rings/video_loader_example_3d_falling_rings.mp4
new file mode 100644
index 0000000..0d3402a
Binary files /dev/null and b/loaders/3d_falling_rings/video_loader_example_3d_falling_rings.mp4 differ
diff --git a/loaders/3d_flying_ball/README.md b/loaders/3d_flying_ball/README.md
new file mode 100644
index 0000000..e5e5005
--- /dev/null
+++ b/loaders/3d_flying_ball/README.md
@@ -0,0 +1,167 @@
+
+# LOADER: 3d flying ball
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_3d_flying_ball.mp4](video_loader_example_3d_flying_ball.mp4)
+
+Original Source on Codepen: [https://codepen.io/Hornebom/pen/lwCDe](https://codepen.io/Hornebom/pen/lwCDe)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="3d_flying_ball_loader" class="visible_loader loader_wrapper_space">
+  <div class="MrCenter">
+    <div class="rotate_3dball"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --loader_hole_background_color: #292929; /* <-- you can change background color of holes in here */
+  --loader_space_background_color: #cecdc9;  /* <-- you can change background color of the space here*/
+  --loader_ball_translation_speed: 1s; /* <-- you can change the ball speed in here (time to complete 1 cycle) */
+}
+
+.visible_loader.loader_wrapper_space{
+  display: flex;
+}
+.loader_wrapper_space{
+    background-color:  var(--loader_hole_background_color); 
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    justify-content: center;
+    display: none;
+}
+.MrCenter,
+.rotate_3dball {
+  -webkit-perspective:20rem;
+	-webkit-transform-style: preserve-3d;
+  perspective:20rem;
+	transform-style: preserve-3d;
+}
+.MrCenter {
+  position:relative;
+  margin:auto;
+  padding:2rem;
+  background:radial-gradient(transparent 0%, transparent 60%,var( --loader_space_background_color) 61%, var( --loader_space_background_color) 100%),
+             linear-gradient( var( --loader_space_background_color) , var( --loader_space_background_color)),
+             radial-gradient(transparent 0%, transparent 60%, var( --loader_space_background_color) 61%, var( --loader_space_background_color) 100%);
+  background-size:6rem 6rem, 12rem 6rem, 6rem 6rem;
+  background-repeat:no-repeat;
+  background-position:0 0, 50% 0, 100% 0;
+  box-shadow:0 0 0 10000rem var( --loader_space_background_color);
+}
+.MrCenter:before,
+.MrCenter:after {
+  content:'';
+  position:absolute;
+  top:.45rem;
+  height:5.1rem;
+  width:5.1rem;
+  border-radius:50%;
+  background:transparent;
+  box-shadow:-2px -2px 4px rgba(0,0,0,0.5),
+             2px 2px 4px white;
+}
+.MrCenter:before {left:.45rem;}
+.MrCenter:after {right:.4rem;}
+.rotate_3dball {
+  position:relative;
+  width:20rem;
+  height:2rem;
+  -webkit-transform-origin:50%;
+  transform-origin:50%;
+  -webkit-animation:rotating 1s linear infinite;  
+  animation:rotating 1s linear infinite;
+  animation-duration: var(--loader_ball_translation_speed);
+}
+.rotate_3dball:after {
+  content:'';
+  position:absolute;
+  top:0;
+  right:0;
+  width:2rem;
+  height:2rem;
+  background:#fcfcfc;
+  border-radius:50%;
+  box-shadow:inset 0 -3px 4px rgba(255,255,255,0.6),
+             inset 0 -4px 8px rgba(0,0,0,0.5),
+             inset 0 -9px 12px #787775;
+  -webkit-animation:rotating 1s linear infinite reverse;
+  animation:rotating 1s linear infinite reverse;
+  animation-duration: var(--loader_ball_translation_speed);
+}
+@-webkit-keyframes rotating {
+  0% {-webkit-transform:rotateY(0);}
+  100% {-webkit-transform:rotateY(400grad);}
+}
+@keyframes rotating {
+  0% {tansform:rotateY(0);}
+  100% {transform:rotateY(400grad);}
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('3d_flying_ball_loader').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+  --loader_hole_background_color: #292929; /* <-- you can change background color of holes in here */
+  --loader_space_background_color: #cecdc9;  /* <-- you can change background color of the space here*/
+  --loader_ball_translation_speed: 1s; /* <-- you can change the ball speed in here (time to complete 1 cycle) */
+}
+
+
+
+```
+
diff --git a/loaders/3d_flying_ball/loader.css b/loaders/3d_flying_ball/loader.css
new file mode 100644
index 0000000..7ff6bf7
--- /dev/null
+++ b/loaders/3d_flying_ball/loader.css
@@ -0,0 +1,89 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --loader_hole_background_color: #292929; /* <-- you can change background color of holes in here */
+  --loader_space_background_color: #cecdc9;  /* <-- you can change background color of the space here*/
+  --loader_ball_translation_speed: 1s; /* <-- you can change the ball speed in here (time to complete 1 cycle) */
+}
+
+.visible_loader.loader_wrapper_space{
+  display: flex;
+}
+.loader_wrapper_space{
+    background-color:  var(--loader_hole_background_color); 
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    justify-content: center;
+    display: none;
+}
+.MrCenter,
+.rotate_3dball {
+  -webkit-perspective:20rem;
+	-webkit-transform-style: preserve-3d;
+  perspective:20rem;
+	transform-style: preserve-3d;
+}
+.MrCenter {
+  position:relative;
+  margin:auto;
+  padding:2rem;
+  background:radial-gradient(transparent 0%, transparent 60%,var( --loader_space_background_color) 61%, var( --loader_space_background_color) 100%),
+             linear-gradient( var( --loader_space_background_color) , var( --loader_space_background_color)),
+             radial-gradient(transparent 0%, transparent 60%, var( --loader_space_background_color) 61%, var( --loader_space_background_color) 100%);
+  background-size:6rem 6rem, 12rem 6rem, 6rem 6rem;
+  background-repeat:no-repeat;
+  background-position:0 0, 50% 0, 100% 0;
+  box-shadow:0 0 0 10000rem var( --loader_space_background_color);
+}
+.MrCenter:before,
+.MrCenter:after {
+  content:'';
+  position:absolute;
+  top:.45rem;
+  height:5.1rem;
+  width:5.1rem;
+  border-radius:50%;
+  background:transparent;
+  box-shadow:-2px -2px 4px rgba(0,0,0,0.5),
+             2px 2px 4px white;
+}
+.MrCenter:before {left:.45rem;}
+.MrCenter:after {right:.4rem;}
+.rotate_3dball {
+  position:relative;
+  width:20rem;
+  height:2rem;
+  -webkit-transform-origin:50%;
+  transform-origin:50%;
+  -webkit-animation:rotating 1s linear infinite;  
+  animation:rotating 1s linear infinite;
+  animation-duration: var(--loader_ball_translation_speed);
+}
+.rotate_3dball:after {
+  content:'';
+  position:absolute;
+  top:0;
+  right:0;
+  width:2rem;
+  height:2rem;
+  background:#fcfcfc;
+  border-radius:50%;
+  box-shadow:inset 0 -3px 4px rgba(255,255,255,0.6),
+             inset 0 -4px 8px rgba(0,0,0,0.5),
+             inset 0 -9px 12px #787775;
+  -webkit-animation:rotating 1s linear infinite reverse;
+  animation:rotating 1s linear infinite reverse;
+  animation-duration: var(--loader_ball_translation_speed);
+}
+@-webkit-keyframes rotating {
+  0% {-webkit-transform:rotateY(0);}
+  100% {-webkit-transform:rotateY(400grad);}
+}
+@keyframes rotating {
+  0% {tansform:rotateY(0);}
+  100% {transform:rotateY(400grad);}
+}
\ No newline at end of file
diff --git a/loaders/3d_flying_ball/loader.html b/loaders/3d_flying_ball/loader.html
new file mode 100644
index 0000000..bbe0fab
--- /dev/null
+++ b/loaders/3d_flying_ball/loader.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 4 plates spinner</title>
+
+</head>
+<body>
+
+  <div id="3d_flying_ball_loader" class="visible_loader loader_wrapper_space">
+    <div class="MrCenter">
+      <div class="rotate_3dball"></div>
+    </div>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/3d_flying_ball/video_loader_example_3d_flying_ball.mp4 b/loaders/3d_flying_ball/video_loader_example_3d_flying_ball.mp4
new file mode 100644
index 0000000..26560a8
Binary files /dev/null and b/loaders/3d_flying_ball/video_loader_example_3d_flying_ball.mp4 differ
diff --git a/loaders/3d_graphic_going_up/README.md b/loaders/3d_graphic_going_up/README.md
new file mode 100644
index 0000000..345babb
--- /dev/null
+++ b/loaders/3d_graphic_going_up/README.md
@@ -0,0 +1,215 @@
+
+
+# LOADER: 3d graphic going up
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_3d_graphic_going_up.mp4](video_loader_example_3d_graphic_going_up.mp4)
+
+Original Source on Codepen: [https://codepen.io/brandrocket/pen/Vvpjvw](https://codepen.io/brandrocket/pen/Vvpjvw)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="graphic_loader_holder" class="loading-container_graphics visible_loader">
+  <div class="loader_graphics">
+		<span class="loader-row square1"></span>
+		<span class="loader-row square2"></span>
+		<span class="loader-row square3"></span>
+	</div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+:root{
+  --loading_graphics_background: #000000; /*<-- you can change here the page background color */
+  --loading_graphics_cube1: #fff; /*<-- you can change here color of the first cube*/
+  --loading_graphics_cube2: #fff;  /*<-- you can change here color of the 2nd cube*/
+  --loading_graphics_cube3: #fff;  /*<-- you can change here color of the 3rd cube*/
+  --loader_graphics_duration: 3s;  /*<-- you can change here the speed of the loader (less seconds make it faster)*/
+  --loader_graphics_square2_delay: 0.33s;  /*<-- seconds to start animating of 2nd square (delay) */
+  --loader_graphics_square3_delay: 0.66s;  /*<-- seconds to start animating of 3rd square (delay)*/
+}
+.loading-container_graphics.visible_loader{
+	display: block;
+}
+.loading-container_graphics {
+	height: 100vh;
+	width: 100vw;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	background: var(--loading_graphics_background);
+	display:none;
+}
+.loading-container_graphics .loader_graphics {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	-o-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+span.loader-row {
+	display: block;
+	float: left;
+	height: 30vmin;
+	width: 10vmin;
+	-webkit-animation: loader 3s ease-in-out infinite;
+	-moz-animation: loader 3s ease-in-out infinite;
+	animation: loader 3s ease-in-out infinite;
+	transform-style: preserve-3d;
+	-webkit-transform: rotateX(30deg) rotateY(30deg);
+	-moz-transform: rotateX(30deg) rotateY(30deg);
+	transform: rotateX(30deg) rotateY(30deg);
+  animation-duration: var(--loader_graphics_duration);
+}
+span.loader-row.square1 {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2 {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3 {
+  background: var(--loading_graphics_cube3);
+}
+span.loader-row:before {
+	content: "";
+	display: block;
+	position: absolute;
+	height: 10vmin;
+	width: 10vmin;
+	background: rgb(240, 240, 240);
+	top: -10vmin;
+	-webkit-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+	-moz-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+	transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+}
+span.loader-row.square1:before {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2:before {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3:before {
+  background: var(--loading_graphics_cube3);
+}
+span.loader-row:after {
+	content: "";
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 10vmin;
+	background: rgb(240, 240, 240);
+	left: 100%;
+	-webkit-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+	-moz-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+	transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+}
+span.loader-row.square1:after {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2:after {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3:after {
+  background: var(--loading_graphics_cube3);
+}
+span.loader-row:nth-child(even) {
+	margin: 0 10vmin;
+}
+span.loader-row:nth-child(2) {
+	-webkit-animation-delay: var(--loader_graphics_square2_delay);
+	-moz-animation-delay: var(--loader_graphics_square2_delay);
+	animation-delay: var(--loader_graphics_square2_delay);
+}
+span.loader-row:nth-child(3) {
+	-webkit-animation-delay: var(--loader_graphics_square3_delay);
+	-moz-animation-delay: var(--loader_graphics_square3_delay);
+	animation-delay: var(--loader_graphics_square3_delay);
+}
+@-webkit-keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
+
+@-moz-keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
+
+@keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('graphic_loader_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+  --loading_graphics_background: #000000; /*<-- you can change here the page background color */
+  --loading_graphics_cube1: #fff; /*<-- you can change here color of the first cube*/
+  --loading_graphics_cube2: #fff;  /*<-- you can change here color of the 2nd cube*/
+  --loading_graphics_cube3: #fff;  /*<-- you can change here color of the 3rd cube*/
+  --loader_graphics_duration: 3s;  /*<-- you can change here the speed of the loader (less seconds make it faster)*/
+  --loader_graphics_square2_delay: 0.33s;  /*<-- seconds to start animating of 2nd square (delay) */
+  --loader_graphics_square3_delay: 0.66s;  /*<-- seconds to start animating of 3rd square (delay)*/
+}
+
+
+```
+
+
diff --git a/loaders/3d_graphic_going_up/loader.css b/loaders/3d_graphic_going_up/loader.css
new file mode 100644
index 0000000..db4d6a4
--- /dev/null
+++ b/loaders/3d_graphic_going_up/loader.css
@@ -0,0 +1,146 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --loading_graphics_background: #000000; /*<-- you can change here the page background color */
+  --loading_graphics_cube1: #fff; /*<-- you can change here color of the first cube*/
+  --loading_graphics_cube2: #fff;  /*<-- you can change here color of the 2nd cube*/
+  --loading_graphics_cube3: #fff;  /*<-- you can change here color of the 3rd cube*/
+  --loader_graphics_duration: 3s;  /*<-- you can change here the speed of the loader (less seconds make it faster)*/
+  --loader_graphics_square2_delay: 0.33s;  /*<-- seconds to start animating of 2nd square (delay) */
+  --loader_graphics_square3_delay: 0.66s;  /*<-- seconds to start animating of 3rd square (delay)*/
+}
+.loading-container_graphics.visible_loader{
+	display: block;
+}
+.loading-container_graphics {
+	height: 100vh;
+	width: 100vw;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	background: var(--loading_graphics_background);
+	display: none;
+}
+
+.loading-container_graphics .loader_graphics {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	-o-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+
+span.loader-row {
+	display: block;
+	float: left;
+	height: 30vmin;
+	width: 10vmin;
+	-webkit-animation: loader 3s ease-in-out infinite;
+	-moz-animation: loader 3s ease-in-out infinite;
+	animation: loader 3s ease-in-out infinite;
+	transform-style: preserve-3d;
+	-webkit-transform: rotateX(30deg) rotateY(30deg);
+	-moz-transform: rotateX(30deg) rotateY(30deg);
+	transform: rotateX(30deg) rotateY(30deg);
+        animation-duration: var(--loader_graphics_duration);
+}
+span.loader-row.square1 {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2 {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3 {
+  background: var(--loading_graphics_cube3);
+}
+
+span.loader-row:before {
+	content: "";
+	display: block;
+	position: absolute;
+	height: 10vmin;
+	width: 10vmin;
+	background: rgb(240, 240, 240);
+	top: -10vmin;
+	-webkit-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+	-moz-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+	transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
+}
+span.loader-row.square1:before {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2:before {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3:before {
+  background: var(--loading_graphics_cube3);
+}
+
+
+span.loader-row:after {
+	content: "";
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 10vmin;
+	background: rgb(240, 240, 240);
+	left: 100%;
+	-webkit-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+	-moz-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+	transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
+}
+
+span.loader-row.square1:after {
+  background: var(--loading_graphics_cube1);
+}
+span.loader-row.square2:after {
+  background: var(--loading_graphics_cube2);
+}
+span.loader-row.square3:after {
+  background: var(--loading_graphics_cube3);
+}
+
+
+span.loader-row:nth-child(even) {
+	margin: 0 10vmin;
+}
+
+span.loader-row:nth-child(2) {
+	-webkit-animation-delay: var(--loader_graphics_square2_delay);
+	-moz-animation-delay: var(--loader_graphics_square2_delay);
+	animation-delay: var(--loader_graphics_square2_delay);
+}
+
+span.loader-row:nth-child(3) {
+	-webkit-animation-delay: var(--loader_graphics_square3_delay);
+	-moz-animation-delay: var(--loader_graphics_square3_delay);
+	animation-delay: var(--loader_graphics_square3_delay);
+}
+
+@-webkit-keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
+
+@-moz-keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
+
+@keyframes loader {
+	50% {
+		margin-top: 20vmin;
+		height: 10vmin;
+	}
+}
\ No newline at end of file
diff --git a/loaders/3d_graphic_going_up/loader.html b/loaders/3d_graphic_going_up/loader.html
new file mode 100644
index 0000000..d9bba63
--- /dev/null
+++ b/loaders/3d_graphic_going_up/loader.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 3d graphic going up</title>
+
+</head>
+<body>
+  <div id="graphic_loader_holder" class="loading-container_graphics visible_loader">
+      <div class="loader_graphics">
+          <span class="loader-row square1"></span>
+          <span class="loader-row square2"></span>
+          <span class="loader-row square3"></span>
+      </div>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/3d_graphic_going_up/video_loader_example_3d_graphic_going_up.mp4 b/loaders/3d_graphic_going_up/video_loader_example_3d_graphic_going_up.mp4
new file mode 100644
index 0000000..72bce4b
Binary files /dev/null and b/loaders/3d_graphic_going_up/video_loader_example_3d_graphic_going_up.mp4 differ
diff --git a/loaders/3d_rotating_color_bars/README.md b/loaders/3d_rotating_color_bars/README.md
new file mode 100644
index 0000000..ebf92e1
--- /dev/null
+++ b/loaders/3d_rotating_color_bars/README.md
@@ -0,0 +1,232 @@
+
+# LOADER: 3d rotating color bars
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_3d_rotating_color_bars.mp4](video_loader_example_3d_rotating_color_bars.mp4)
+
+Original Source on Codepen: [https://codepen.io/websamples/pen/EzJwZV](https://codepen.io/websamples/pen/EzJwZV)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="3square_loader" class="visible_loader square_loader">
+  <div class="loader_holder">
+    <div class="square_color1">
+      <div class="square_front_side"></div>
+      <div class="square_back_side"></div>
+      <div class="square_left_side"></div>
+      <div class="square_right_side"></div>
+      <div class="square_top_side"></div>
+      <div class="square_bottom_side"></div>
+    </div>
+  
+    <div class="square_color2">
+      <div class="square_front_side"></div>
+      <div class="square_back_side"></div>
+      <div class="square_left_side"></div>
+      <div class="square_right_side"></div>
+      <div class="square_top_side"></div>
+      <div class="square_bottom_side"></div>
+    </div>
+  
+    <div class="square_color3">
+      <div class="square_front_side"></div>
+      <div class="square_back_side"></div>
+      <div class="square_left_side"></div>
+      <div class="square_right_side"></div>
+      <div class="square_top_side"></div>
+      <div class="square_bottom_side"></div>
+    </div>
+
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
+  --loader_3dcube_color1: cyan;  /* <-- first cube color */
+  --loader_3dcube_color2: magenta;  /* <-- second cube color */
+  --loader_3dcube_color3: yellow  /* <-- third cube color */
+}
+
+*{
+  box-sizing: border-box;
+}
+.visible_loader.square_loader{
+  display: flex;
+}
+
+.square_loader{
+  background-color: var( --loader_custom_color_background); 
+  display: none;
+  margin:0;
+  height:100vh;
+  width: 100vw;
+  justify-content:center;
+  align-items:center;
+  transform:scale(1.8);
+}
+.loader_holder {
+    width: 100px;
+    height: 100px;
+    font-size: 100px;
+    display: flex;
+    justify-content: space-between;
+    transform: perspective(100px);
+    transform-style: preserve-3d;
+}
+.loader_holder > div {
+    width: 30%;
+    height: 100%;
+    transform-style: preserve-3d;
+}
+.loader_holder > div > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.8;
+}
+
+.square_front_side, .back {
+    width: 100%;
+    height: 100%;
+}
+.square_front_side {
+    transform: translateZ(-0.15em);
+}
+.square_back_side {
+    transform: translateZ(0.15em);
+}
+.square_left_side {
+    width: 100%;
+    height: 100%;
+    transform-origin: left center;
+    transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
+}
+.square_right_side {
+    width: 100%;
+    height: 100%;
+    transform-origin: right center;
+    transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
+}
+
+.square_top_side {
+    width: 100%;
+    height: 30%;
+    transform-origin: center top;
+    transform: rotate3d(1, 0, 0, 90deg)
+               translateY(-0.15em);
+}
+.square_bottom_side {
+    width: 100%;
+    height: 30%;
+    transform-origin: center top;
+    transform: rotate3d(1, 0, 0, 90deg)
+               translateZ(-1em)
+               translateY(-0.15em);
+}
+
+.square_color1 > div {
+    background: var( --loader_3dcube_color1); 
+}
+.square_color2 > div {
+    background: var( --loader_3dcube_color2);
+}
+.square_color3 > div {
+    background: var( --loader_3dcube_color3); 
+}
+
+.loader_holder {
+    animation: 3s flip_loader infinite;
+    animation-delay: 1s;
+}
+.loader_holder .square_color2 {
+    animation: 3s flip_color2 infinite;
+    animation-delay: 1s;
+}
+.loader_holder .square_color1 {
+    animation: 3s flip_color1 infinite;
+    animation-delay: 1s;
+}
+
+@keyframes flip_loader {
+    100% {
+        transform: perspective(100px) 
+                   rotate3d(1, 1, 1, 360deg);
+    }
+}
+@keyframes flip_color2 {
+    100% {
+        transform: rotateX(180deg);
+    }
+}
+@keyframes flip_color1 {
+    100% {
+        transform: rotateX(-180deg);
+    }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('3square_loader').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+  --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
+  --loader_3dcube_color1: cyan;  /* <-- first cube color */
+  --loader_3dcube_color2: magenta;  /* <-- second cube color */
+  --loader_3dcube_color3: yellow  /* <-- third cube color */
+}
+
+
+```
+
diff --git a/loaders/3d_rotating_color_bars/loader.css b/loaders/3d_rotating_color_bars/loader.css
new file mode 100644
index 0000000..3ae4b94
--- /dev/null
+++ b/loaders/3d_rotating_color_bars/loader.css
@@ -0,0 +1,128 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
+  --loader_3dcube_color1: cyan;  /* <-- first cube color */
+  --loader_3dcube_color2: magenta;  /* <-- second cube color */
+  --loader_3dcube_color3: yellow  /* <-- third cube color */
+}
+
+*{
+  box-sizing: border-box;
+}
+.visible_loader.square_loader{
+  display: flex;
+}
+
+.square_loader{
+  background-color: var( --loader_custom_color_background); 
+  display: none;
+  margin:0;
+  height:100vh;
+  width: 100vw;
+  justify-content:center;
+  align-items:center;
+  transform:scale(1.8);
+}
+.loader_holder {
+    width: 100px;
+    height: 100px;
+    font-size: 100px;
+    display: flex;
+    justify-content: space-between;
+    transform: perspective(100px);
+    transform-style: preserve-3d;
+}
+.loader_holder > div {
+    width: 30%;
+    height: 100%;
+    transform-style: preserve-3d;
+}
+.loader_holder > div > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.8;
+}
+
+.square_front_side, .back {
+    width: 100%;
+    height: 100%;
+}
+.square_front_side {
+    transform: translateZ(-0.15em);
+}
+.square_back_side {
+    transform: translateZ(0.15em);
+}
+.square_left_side {
+    width: 100%;
+    height: 100%;
+    transform-origin: left center;
+    transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
+}
+.square_right_side {
+    width: 100%;
+    height: 100%;
+    transform-origin: right center;
+    transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
+}
+
+.square_top_side {
+    width: 100%;
+    height: 30%;
+    transform-origin: center top;
+    transform: rotate3d(1, 0, 0, 90deg)
+               translateY(-0.15em);
+}
+.square_bottom_side {
+    width: 100%;
+    height: 30%;
+    transform-origin: center top;
+    transform: rotate3d(1, 0, 0, 90deg)
+               translateZ(-1em)
+               translateY(-0.15em);
+}
+
+.square_color1 > div {
+    background: var( --loader_3dcube_color1); 
+}
+.square_color2 > div {
+    background: var( --loader_3dcube_color2);
+}
+.square_color3 > div {
+    background: var( --loader_3dcube_color3); 
+}
+
+.loader_holder {
+    animation: 3s flip_loader infinite;
+    animation-delay: 1s;
+}
+.loader_holder .square_color2 {
+    animation: 3s flip_color2 infinite;
+    animation-delay: 1s;
+}
+.loader_holder .square_color1 {
+    animation: 3s flip_color1 infinite;
+    animation-delay: 1s;
+}
+
+@keyframes flip_loader {
+    100% {
+        transform: perspective(100px) 
+                   rotate3d(1, 1, 1, 360deg);
+    }
+}
+@keyframes flip_color2 {
+    100% {
+        transform: rotateX(180deg);
+    }
+}
+@keyframes flip_color1 {
+    100% {
+        transform: rotateX(-180deg);
+    }
+}
\ No newline at end of file
diff --git a/loaders/3d_rotating_color_bars/loader.html b/loaders/3d_rotating_color_bars/loader.html
new file mode 100644
index 0000000..45d0405
--- /dev/null
+++ b/loaders/3d_rotating_color_bars/loader.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 3d rotating color bars</title>
+
+</head>
+<body>
+  <div id="3square_loader" class="visible_loader square_loader">
+    <div class="loader_holder">
+      <div class="square_color1">
+        <div class="square_front_side"></div>
+        <div class="square_back_side"></div>
+        <div class="square_left_side"></div>
+        <div class="square_right_side"></div>
+        <div class="square_top_side"></div>
+        <div class="square_bottom_side"></div>
+      </div>
+    
+      <div class="square_color2">
+        <div class="square_front_side"></div>
+        <div class="square_back_side"></div>
+        <div class="square_left_side"></div>
+        <div class="square_right_side"></div>
+        <div class="square_top_side"></div>
+        <div class="square_bottom_side"></div>
+      </div>
+    
+      <div class="square_color3">
+        <div class="square_front_side"></div>
+        <div class="square_back_side"></div>
+        <div class="square_left_side"></div>
+        <div class="square_right_side"></div>
+        <div class="square_top_side"></div>
+        <div class="square_bottom_side"></div>
+      </div>
+  
+    </div>
+  </div>
+  
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/3d_rotating_color_bars/video_loader_example_3d_rotating_color_bars.mp4 b/loaders/3d_rotating_color_bars/video_loader_example_3d_rotating_color_bars.mp4
new file mode 100644
index 0000000..2ab41ac
Binary files /dev/null and b/loaders/3d_rotating_color_bars/video_loader_example_3d_rotating_color_bars.mp4 differ
diff --git a/loaders/4_plates_spinner/README.md b/loaders/4_plates_spinner/README.md
new file mode 100644
index 0000000..509cca0
--- /dev/null
+++ b/loaders/4_plates_spinner/README.md
@@ -0,0 +1,188 @@
+
+# LOADER: 4 plates spinner
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_4_plates_spinner.mp4](video_loader_example_4_plates_spinner.mp4)
+
+Original Source on Codepen: [https://codepen.io/martinvd/pen/GehBy](https://codepen.io/martinvd/pen/GehBy)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="loader_plates_spinner" class="spinner_wrapper visible_loader">
+   <div class="spinner_loader spinner_lower_side">
+      <div class="spinner_outer_side">
+        <div class="spinner_inner_side tl_spinner"></div>
+        <div class="spinner_inner_side tr_spinner"></div>
+        <div class="spinner_inner_side br_spinner"></div>
+        <div class="spinner_inner_side bl_spinner"></div>
+      </div>
+   </div>
+  <div class="spinner_loader">
+    <div class="spinner_outer_side">
+      <div class="spinner_inner_side tl_spinner"></div>
+      <div class="spinner_inner_side tr_spinner"></div>
+      <div class="spinner_inner_side br_spinner"></div>
+      <div class="spinner_inner_side bl_spinner"></div>
+    </div>
+  </div>
+</div>
+
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  /*  you can change background color of the space here*/
+  --loader_space_background_color_center: #A6FF21;  /* <-- center color of gradient (lighter color) */
+  --loader_space_background_color_edge: #1E521A ;  /* <-- edge color of gradient (darker color) */
+  --loader_disk_color_center: #fff;  /* <-- center color of gradient (lighter color) */
+  --loader_disk_color_edge: #eee;  /* <-- edge color of gradient (darker color) */
+  --loader_spin_duration: 1s;  /* <-- duration of a 360 cicle (smaller numbers make it faster) */
+}
+
+.spinner_wrapper.visible_loader {
+  display: block;
+}
+
+.spinner_wrapper {
+  background-image: radial-gradient(circle farthest-corner at center, var(--loader_space_background_color_center) 0%, var(--loader_space_background_color_edge) 100%);
+  height: 100vh;
+  width: 100vw;
+ display:none;
+}
+
+.spinner_loader {
+  position: absolute;
+  width: 128px;
+  height: 128px;
+  top: 50%;
+  left: 50%;
+  margin: -64px 0 0 -64px;
+  transform: perspective( 128px ) rotateX( 45deg );
+}
+
+  .spinner_loader.spinner_lower_side {
+    top: 60%;
+    opacity: .9;
+    filter: blur(30px);
+  }
+
+  .spinner_loader.spinner_lower_side  .spinner_inner_side {
+      background: #333;
+  }
+
+.spinner_outer_side {
+  box-sizing: border-box;
+  animation: spin_circles 1.5s linear infinite;
+  animation-duration: var( --loader_spin_duration);
+  height: 100%;
+}
+
+.spinner_inner_side {
+  position: absolute;
+  border-radius: 50%;
+  width: 64px;
+  height: 64px;
+  background: radial-gradient(circle farthest-corner at center, var( --loader_disk_color_center) 0%, var( --loader_disk_color_edge) 100%);
+}
+
+.spinner_inner_side.tl_spinner {
+    top: 0;
+    left: 0;
+}
+
+  .spinner_inner_side.tr_spinner {
+    top: 0;
+    right: 0;
+  }
+
+ .spinner_inner_side.br_spinner {
+    bottom: 0;
+    right: 0;
+  }
+
+ 
+ .spinner_inner_side.bl_spinner {
+    bottom: 0;
+    left: 0;
+ }
+
+@keyframes spin_circles {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('loader_plates_spinner').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+  /*  you can change background color of the space here*/
+  --loader_space_background_color_center: #A6FF21;  /* <-- center color of gradient (lighter color) */
+  --loader_space_background_color_edge: #1E521A ;  /* <-- edge color of gradient (darker color) */
+
+  /*  you can change spinner color of the plates here*/
+  --loader_disk_color_center: #fff;  /* <-- center color of gradient (lighter color) */
+  --loader_disk_color_edge: #eee;  /* <-- edge color of gradient (darker color) */
+
+  /*  you can change spinner speed here*/
+  --loader_spin_duration: 1s;  /* <-- duration of a 360 cicle (smaller numbers make it faster) */
+}
+
+
+
+```
+
diff --git a/loaders/4_plates_spinner/loader.css b/loaders/4_plates_spinner/loader.css
new file mode 100644
index 0000000..6e41ee6
--- /dev/null
+++ b/loaders/4_plates_spinner/loader.css
@@ -0,0 +1,91 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root{
+  /*  you can change background color of the space here*/
+  --loader_space_background_color_center: #A6FF21;  /* <-- center color of gradient (lighter color) */
+  --loader_space_background_color_edge: #1E521A ;  /* <-- edge color of gradient (darker color) */
+
+/*  you can change spinner color of the plates in here*/
+  --loader_disk_color_center: #fff;  /* <-- center color of gradient (lighter color) */
+  --loader_disk_color_edge: #eee;  /* <-- edge color of gradient (darker color) */
+  --loader_spin_duration: 1s;  /* <-- duration of a 360 cicle (smaller numbers make it faster) */
+}
+
+.spinner_wrapper.visible_loader {
+  display: block;
+}
+
+.spinner_wrapper {
+  background-image: radial-gradient(circle farthest-corner at center, var(--loader_space_background_color_center) 0%, var(--loader_space_background_color_edge) 100%);
+  height: 100vh;
+  width: 100vw;
+ display:none;
+}
+
+.spinner_loader {
+  position: absolute;
+  width: 128px;
+  height: 128px;
+  top: 50%;
+  left: 50%;
+  margin: -64px 0 0 -64px;
+  transform: perspective( 128px ) rotateX( 45deg );
+}
+
+  .spinner_loader.spinner_lower_side {
+    top: 60%;
+    opacity: .9;
+    filter: blur(30px);
+  }
+
+  .spinner_loader.spinner_lower_side  .spinner_inner_side {
+      background: #333;
+  }
+
+.spinner_outer_side {
+  box-sizing: border-box;
+  animation: spin_circles 1.5s linear infinite;
+  animation-duration: var( --loader_spin_duration);
+  height: 100%;
+}
+
+.spinner_inner_side {
+  position: absolute;
+  border-radius: 50%;
+  width: 64px;
+  height: 64px;
+  background: radial-gradient(circle farthest-corner at center, var( --loader_disk_color_center) 0%, var( --loader_disk_color_edge) 100%);
+}
+
+.spinner_inner_side.tl_spinner {
+    top: 0;
+    left: 0;
+}
+
+  .spinner_inner_side.tr_spinner {
+    top: 0;
+    right: 0;
+  }
+
+ .spinner_inner_side.br_spinner {
+    bottom: 0;
+    right: 0;
+  }
+
+ 
+ .spinner_inner_side.bl_spinner {
+    bottom: 0;
+    left: 0;
+ }
+
+@keyframes spin_circles {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/loaders/4_plates_spinner/loader.html b/loaders/4_plates_spinner/loader.html
new file mode 100644
index 0000000..427ad1b
--- /dev/null
+++ b/loaders/4_plates_spinner/loader.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: 4 plates spinner</title>
+
+</head>
+<body>
+
+  <div id="loader_plates_spinner" class="spinner_wrapper visible_loader">
+    <div class="spinner_loader spinner_lower_side">
+       <div class="spinner_outer_side">
+         <div class="spinner_inner_side tl_spinner"></div>
+         <div class="spinner_inner_side tr_spinner"></div>
+         <div class="spinner_inner_side br_spinner"></div>
+         <div class="spinner_inner_side bl_spinner"></div>
+       </div>
+    </div>
+   <div class="spinner_loader">
+     <div class="spinner_outer_side">
+       <div class="spinner_inner_side tl_spinner"></div>
+       <div class="spinner_inner_side tr_spinner"></div>
+       <div class="spinner_inner_side br_spinner"></div>
+       <div class="spinner_inner_side bl_spinner"></div>
+     </div>
+   </div>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/4_plates_spinner/video_loader_example_4_plates_spinner.mp4 b/loaders/4_plates_spinner/video_loader_example_4_plates_spinner.mp4
new file mode 100644
index 0000000..1a7d6af
Binary files /dev/null and b/loaders/4_plates_spinner/video_loader_example_4_plates_spinner.mp4 differ
diff --git a/loaders/climbing_box/README.md b/loaders/climbing_box/README.md
new file mode 100644
index 0000000..95fa9a7
--- /dev/null
+++ b/loaders/climbing_box/README.md
@@ -0,0 +1,196 @@
+# LOADER: Climbing Box
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [climbing_box.mp4](climbing_box.mp4)
+
+Original Source on Codepen: [https://codepen.io/pawelqcm/pen/dMqrqd](https://codepen.io/pawelqcm/pen/dMqrqd)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader_box"></div>
+    <div class="custom_loader_hill"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+
+.custom_loader_wrap {
+  overflow: auto; 
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #404456; 
+
+  /* 2. animation container width, recommended value from 20vin - 60vmin*/
+  --cl-width: 50vmin; 
+
+  /* 3. hill color */
+  --cl-hill-color: whitesmoke; 
+
+  /* 4. box animation duration */
+  --cl-box-animation: 2.5s;
+  
+}
+
+.custom_loader_inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: calc(var(--cl-width) / -2);
+  margin-left: calc(var(--cl-width) / -2);
+  width: var(--cl-width);
+  height: var(--cl-width);
+}
+
+.custom_loader_hill {
+  position: absolute;
+  width: calc(var(--cl-width) * 1.3);
+  height: calc(var(--cl-width) * 1.3);
+  top: calc(var(--cl-width) * 0.3);
+  left: calc(var(--cl-width) * 0.3);
+  background-color: transparent;
+  border-left: calc(var(--cl-width) * 0.045) solid var(--cl-hill-color);
+  transform: rotate(45deg);
+}
+
+.custom_loader_box {
+  position: absolute;
+  left: 0;
+  bottom: calc(var(--cl-width) * -.0185);
+  width: calc(var(--cl-width) * 0.185);
+  height: calc(var(--cl-width) * 0.185);
+  background-color: transparent;
+  border: calc(var(--cl-width) * 0.045) solid var(--cl-hill-color);
+  border-radius: 15%;
+  transform: translate(0, calc(var(--cl-width) * -.0185)) rotate(-45deg);
+  animation: box-push var(--cl-box-animation) cubic-bezier(.79, 0, .47, .97) infinite;
+}
+
+@keyframes box-push {
+  0% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-45deg);
+  }
+  5% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-50deg);
+  }
+  20% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(47deg);
+  }
+  25% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(45deg);
+  }
+  30% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(40deg);
+  }
+  45% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(137deg);
+  }
+  50% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(135deg);
+  }
+  55% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(130deg);
+  }
+  70% {
+    transform: translate(calc(var(--cl-width) * 0.56), calc(var(--cl-width) * -0.74)) rotate(217deg);
+  }
+  75% {
+    transform: translate(calc(var(--cl-width) * 0.56), calc(var(--cl-width) * -0.74)) rotate(220deg);
+  }
+  100% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-225deg);
+  }
+}
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #404456; 
+
+/* 2. animation container width, recommended value from 20vin - 60vmin*/
+--cl-width: 50vmin; 
+
+/* 3. hill color */
+--cl-hill-color: whitesmoke; 
+
+/* 4. box animation duration */
+--cl-box-animation: 2.5s;
+
+
+```
+
+
+
+
diff --git a/loaders/climbing_box/climbing_box.mp4 b/loaders/climbing_box/climbing_box.mp4
new file mode 100644
index 0000000..1b24069
Binary files /dev/null and b/loaders/climbing_box/climbing_box.mp4 differ
diff --git a/loaders/climbing_box/loader.css b/loaders/climbing_box/loader.css
new file mode 100644
index 0000000..e07c457
--- /dev/null
+++ b/loaders/climbing_box/loader.css
@@ -0,0 +1,114 @@
+/* Custom styles starts here */
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+.custom_loader_wrap {
+  overflow: auto; 
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #404456; 
+
+  /* 2. animation container width, recommended value from 20vin - 60vmin*/
+  --cl-width: 50vmin; 
+
+  /* 3. hill color */
+  --cl-hill-color: whitesmoke; 
+
+  /* 4. box animation duration */
+  --cl-box-animation: 2.5s;
+  
+}
+
+.custom_loader_inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: calc(var(--cl-width) / -2);
+  margin-left: calc(var(--cl-width) / -2);
+  width: var(--cl-width);
+  height: var(--cl-width);
+}
+
+.custom_loader_hill {
+  position: absolute;
+  width: calc(var(--cl-width) * 1.3);
+  height: calc(var(--cl-width) * 1.3);
+  top: calc(var(--cl-width) * 0.3);
+  left: calc(var(--cl-width) * 0.3);
+  background-color: transparent;
+  border-left: calc(var(--cl-width) * 0.045) solid var(--cl-hill-color);
+  transform: rotate(45deg);
+}
+
+.custom_loader_box {
+  position: absolute;
+  left: 0;
+  bottom: calc(var(--cl-width) * -.0185);
+  width: calc(var(--cl-width) * 0.185);
+  height: calc(var(--cl-width) * 0.185);
+  background-color: transparent;
+  border: calc(var(--cl-width) * 0.045) solid var(--cl-hill-color);
+  border-radius: 15%;
+  transform: translate(0, calc(var(--cl-width) * -.0185)) rotate(-45deg);
+  animation: box-push var(--cl-box-animation) cubic-bezier(.79, 0, .47, .97) infinite;
+}
+
+@keyframes box-push {
+  0% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-45deg);
+  }
+  5% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-50deg);
+  }
+  20% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(47deg);
+  }
+  25% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(45deg);
+  }
+  30% {
+    transform: translate(calc(var(--cl-width) * 0.185), calc(var(--cl-width) * -0.37)) rotate(40deg);
+  }
+  45% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(137deg);
+  }
+  50% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(135deg);
+  }
+  55% {
+    transform: translate(calc(var(--cl-width) * 0.37), calc(var(--cl-width) * -0.56)) rotate(130deg);
+  }
+  70% {
+    transform: translate(calc(var(--cl-width) * 0.56), calc(var(--cl-width) * -0.74)) rotate(217deg);
+  }
+  75% {
+    transform: translate(calc(var(--cl-width) * 0.56), calc(var(--cl-width) * -0.74)) rotate(220deg);
+  }
+  100% {
+    transform: translate(0, calc(var(--cl-width) * -0.185)) rotate(-225deg);
+  }
+}
\ No newline at end of file
diff --git a/loaders/climbing_box/loader.html b/loaders/climbing_box/loader.html
new file mode 100644
index 0000000..dd64f28
--- /dev/null
+++ b/loaders/climbing_box/loader.html
@@ -0,0 +1,6 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader_box"></div>
+    <div class="custom_loader_hill"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/climbing_box/loader.js b/loaders/climbing_box/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/climbing_box/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/disappearing_falling_cube/README.md b/loaders/disappearing_falling_cube/README.md
new file mode 100644
index 0000000..8f2d1b1
--- /dev/null
+++ b/loaders/disappearing_falling_cube/README.md
@@ -0,0 +1,755 @@
+
+# LOADER: disappearing falling cube
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_disappearing_falling_cube.mp4](video_loader_example_disappearing_falling_cube.mp4)
+
+Original Source on Codepen: [https://codepen.io/aaroniker/pen/MWgRBdV](https://codepen.io/aaroniker/pen/MWgRBdV)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="cubes_loader_holder" class="loader_bigcube_wrapper visible_loader">
+  <div class="loader_bigcube">
+    <div class="box3d box0">
+      <div></div>
+    </div>
+    <div class="box3d box1">
+      <div></div>
+    </div>
+    <div class="box3d box2">
+      <div></div>
+    </div>
+    <div class="box3d box3">
+      <div></div>
+    </div>
+    <div class="box3d box4">
+      <div></div>
+    </div>
+    <div class="box3d box5">
+      <div></div>
+    </div>
+    <div class="box3d box6">
+      <div></div>
+    </div>
+    <div class="box3d box7">
+      <div></div>
+    </div>
+    <div class="ground">
+      <div></div>
+    </div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+:root {
+  --background-loader-color: #121621; /* <-- you can change here the page background color */
+  --primary-cube-loader-color: rgba(39, 94, 254, 1); /* <-- you can change here the page square primary color  */
+  --primary-light: #2f71ff; /* <-- you can change here the page square primary color (light version)  */
+  --primary-rgba: rgba(39, 94, 254, 0); /* <-- you can change here the page square primary color (darker version) */
+  --duration-loader-animation: 3s; /* <-- you can change here the animation duration */
+}
+.loader_bigcube_wrapper.visible_loader {
+  display: flex;
+}
+.loader_bigcube_wrapper {
+  background-color: var(--background-loader-color);
+  min-width: 100vw;
+  min-height: 100vh;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.loader_bigcube {
+  width: 200px;
+  height: 320px;
+  position: relative;
+  transform-style: preserve-3d;
+  margin: auto;
+}
+@media (max-width: 480px) {
+  .loader_bigcube {
+    zoom: 0.44;
+  }
+}
+.loader_bigcube:before, .loader_bigcube:after {
+  --r: 20.5deg;
+  content: "";
+  width: 320px;
+  height: 140px;
+  position: absolute;
+  right: 32%;
+  bottom: -11px;
+  background: var(--background-loader-color);
+  transform: translateZ(200px) rotate(var(--r));
+  -webkit-animation: mask var(--duration-loader-animation) linear forwards infinite;
+          animation: mask var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube:after {
+  --r: -20.5deg;
+  right: auto;
+  left: 32%;
+}
+.loader_bigcube .ground {
+  position: absolute;
+  left: -50px;
+  bottom: -120px;
+  transform-style: preserve-3d;
+  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+}
+.loader_bigcube .ground div {
+  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  width: 200px;
+  height: 200px;
+  background: var(--primary-cube-loader-color);
+  background: linear-gradient(45deg, var(--primary-cube-loader-color) 0%, var(--primary-cube-loader-color) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
+  transform-style: preserve-3d;
+  -webkit-animation: ground var(--duration-loader-animation) linear forwards infinite;
+          animation: ground var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube .ground div:before, .loader_bigcube .ground div:after {
+  --rx: 90deg;
+  --ry: 0deg;
+  --x: 44px;
+  --y: 162px;
+  --z: -50px;
+  content: "";
+  width: 156px;
+  height: 300px;
+  opacity: 0;
+  background: linear-gradient(var(--primary-cube-loader-color), var(--primary-rgba));
+  position: absolute;
+  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+  -webkit-animation: ground-shine var(--duration-loader-animation) linear forwards infinite;
+          animation: ground-shine var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube .ground div:after {
+  --rx: 90deg;
+  --ry: 90deg;
+  --x: 0;
+  --y: 177px;
+  --z: 150px;
+}
+.loader_bigcube .box3d{
+  --x: 0;
+  --y: 0;
+  position: absolute;
+  -webkit-animation: var(--duration-loader-animation) linear forwards infinite;
+          animation: var(--duration-loader-animation) linear forwards infinite;
+  transform: translate(var(--x), var(--y));
+}
+.loader_bigcube .box3d div {
+  background-color: var(--primary-cube-loader-color);
+  width: 48px;
+  height: 48px;
+  position: relative;
+  transform-style: preserve-3d;
+  -webkit-animation: var(--duration-loader-animation) ease forwards infinite;
+          animation: var(--duration-loader-animation) ease forwards infinite;
+  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+}
+.loader_bigcube .box3d div:before, .loader_bigcube .box3d div:after {
+  --rx: 90deg;
+  --ry: 0deg;
+  --z: 24px;
+  --y: -24px;
+  --x: 0;
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  width: inherit;
+  height: inherit;
+  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+  filter: brightness(var(--b, 1.2));
+}
+.loader_bigcube .box3d div:after {
+  --rx: 0deg;
+  --ry: 90deg;
+  --x: 24px;
+  --y: 0;
+  --b: 1.4;
+}
+.loader_bigcube .box3d.box0 {
+  --x: -220px;
+  --y: -120px;
+  left: 58px;
+  top: 108px;
+}
+.loader_bigcube .box3d.box1 {
+  --x: -260px;
+  --y: 120px;
+  left: 25px;
+  top: 120px;
+}
+.loader_bigcube .box3d.box2 {
+  --x: 120px;
+  --y: -190px;
+  left: 58px;
+  top: 64px;
+}
+.loader_bigcube .box3d.box3 {
+  --x: 280px;
+  --y: -40px;
+  left: 91px;
+  top: 120px;
+}
+.loader_bigcube .box3d.box4 {
+  --x: 60px;
+  --y: 200px;
+  left: 58px;
+  top: 132px;
+}
+.loader_bigcube .box3d.box5 {
+  --x: -220px;
+  --y: -120px;
+  left: 25px;
+  top: 76px;
+}
+.loader_bigcube .box3d.box6 {
+  --x: -260px;
+  --y: 120px;
+  left: 91px;
+  top: 76px;
+}
+.loader_bigcube .box3d.box7 {
+  --x: -240px;
+  --y: 200px;
+  left: 58px;
+  top: 87px;
+}
+.loader_bigcube .box0 {
+  -webkit-animation-name: box-move0;
+          animation-name: box-move0;
+}
+.loader_bigcube .box0 div {
+  -webkit-animation-name: box-scale0;
+          animation-name: box-scale0;
+}
+.loader_bigcube .box1 {
+  -webkit-animation-name: box-move1;
+          animation-name: box-move1;
+}
+.loader_bigcube .box1 div {
+  -webkit-animation-name: box-scale1;
+          animation-name: box-scale1;
+}
+.loader_bigcube .box2 {
+  -webkit-animation-name: box-move2;
+          animation-name: box-move2;
+}
+.loader_bigcube .box2 div {
+  -webkit-animation-name: box-scale2;
+          animation-name: box-scale2;
+}
+.loader_bigcube .box3 {
+  -webkit-animation-name: box-move3;
+          animation-name: box-move3;
+}
+.loader_bigcube .box3 div {
+  -webkit-animation-name: box-scale3;
+          animation-name: box-scale3;
+}
+.loader_bigcube .box4 {
+  -webkit-animation-name: box-move4;
+          animation-name: box-move4;
+}
+.loader_bigcube .box4 div {
+  -webkit-animation-name: box-scale4;
+          animation-name: box-scale4;
+}
+.loader_bigcube .box5 {
+  -webkit-animation-name: box-move5;
+          animation-name: box-move5;
+}
+.loader_bigcube .box5 div {
+  -webkit-animation-name: box-scale5;
+          animation-name: box-scale5;
+}
+.loader_bigcube .box6 {
+  -webkit-animation-name: box-move6;
+          animation-name: box-move6;
+}
+.loader_bigcube .box6 div {
+  -webkit-animation-name: box-scale6;
+          animation-name: box-scale6;
+}
+.loader_bigcube .box7 {
+  -webkit-animation-name: box-move7;
+          animation-name: box-move7;
+}
+.loader_bigcube .box7 div {
+  -webkit-animation-name: box-scale7;
+          animation-name: box-scale7;
+}
+@-webkit-keyframes box-move0 {
+  12% {
+    transform: translate(var(--x), var(--y));
+  }
+  25%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+
+@keyframes box-move0 {
+  12% {
+    transform: translate(var(--x), var(--y));
+  }
+  25%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale0 {
+  6% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  14%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale0 {
+  6% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  14%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move1 {
+  16% {
+    transform: translate(var(--x), var(--y));
+  }
+  29%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move1 {
+  16% {
+    transform: translate(var(--x), var(--y));
+  }
+  29%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale1 {
+  10% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  18%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale1 {
+  10% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  18%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move2 {
+  20% {
+    transform: translate(var(--x), var(--y));
+  }
+  33%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move2 {
+  20% {
+    transform: translate(var(--x), var(--y));
+  }
+  33%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale2 {
+  14% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  22%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale2 {
+  14% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  22%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move3 {
+  24% {
+    transform: translate(var(--x), var(--y));
+  }
+  37%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move3 {
+  24% {
+    transform: translate(var(--x), var(--y));
+  }
+  37%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale3 {
+  18% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  26%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale3 {
+  18% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  26%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move4 {
+  28% {
+    transform: translate(var(--x), var(--y));
+  }
+  41%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move4 {
+  28% {
+    transform: translate(var(--x), var(--y));
+  }
+  41%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale4 {
+  22% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  30%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale4 {
+  22% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  30%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move5 {
+  32% {
+    transform: translate(var(--x), var(--y));
+  }
+  45%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move5 {
+  32% {
+    transform: translate(var(--x), var(--y));
+  }
+  45%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale5 {
+  26% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  34%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale5 {
+  26% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  34%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move6 {
+  36% {
+    transform: translate(var(--x), var(--y));
+  }
+  49%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move6 {
+  36% {
+    transform: translate(var(--x), var(--y));
+  }
+  49%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale6 {
+  30% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  38%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale6 {
+  30% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  38%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move7 {
+  40% {
+    transform: translate(var(--x), var(--y));
+  }
+  53%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move7 {
+  40% {
+    transform: translate(var(--x), var(--y));
+  }
+  53%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale7 {
+  34% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  42%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale7 {
+  34% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  42%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes ground {
+  0%, 65% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+  75%, 90% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+}
+@keyframes ground {
+  0%, 65% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+  75%, 90% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+}
+@-webkit-keyframes ground-shine {
+  0%, 70% {
+    opacity: 0;
+  }
+  75%, 87% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ground-shine {
+  0%, 70% {
+    opacity: 0;
+  }
+  75%, 87% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes mask {
+  0%, 65% {
+    opacity: 0;
+  }
+  66%, 100% {
+    opacity: 1;
+  }
+}
+@keyframes mask {
+  0%, 65% {
+    opacity: 0;
+  }
+  66%, 100% {
+    opacity: 1;
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('cubes_loader_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root {
+  --background-loader-color: #121621; /* <-- you can change here the page background color */
+  --primary-cube-loader-color: rgba(39, 94, 254, 1); /* <-- you can change here the page square primary color  */
+  --primary-light: #2f71ff; /* <-- you can change here the page square primary color (light version)  */
+  --primary-rgba: rgba(39, 94, 254, 0); /* <-- you can change here the page square primary color (darker version) */
+  --duration-loader-animation: 3s; /* <-- you can change here the animation duration */
+}
+
+```
+
diff --git a/loaders/disappearing_falling_cube/loader.css b/loaders/disappearing_falling_cube/loader.css
new file mode 100644
index 0000000..3afffef
--- /dev/null
+++ b/loaders/disappearing_falling_cube/loader.css
@@ -0,0 +1,658 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+**  or, if you require a completely different custom loader,
+**  you can always contact us at support@awe.media
+*/
+:root {
+  --background-loader-color: #121621; /* <-- you can change here the page background color */
+  --primary-cube-loader-color: rgba(39, 94, 254, 1); /* <-- you can change here the page square primary color  */
+  --primary-light: #2f71ff; /* <-- you can change here the page square primary color (light version)  */
+  --primary-rgba: rgba(39, 94, 254, 0); /* <-- you can change here the page square primary color (darker version) */
+  --duration-loader-animation: 3s; /* <-- you can change here the animation duration */
+}
+.loader_bigcube_wrapper.visible_loader {
+  display: flex;
+}
+.loader_bigcube_wrapper {
+  background-color: var(--background-loader-color);
+  min-width: 100vw;
+  min-height: 100vh;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.loader_bigcube {
+  width: 200px;
+  height: 320px;
+  position: relative;
+  transform-style: preserve-3d;
+  margin: auto;
+}
+@media (max-width: 480px) {
+  .loader_bigcube {
+    zoom: 0.44;
+  }
+}
+.loader_bigcube:before, .loader_bigcube:after {
+  --r: 20.5deg;
+  content: "";
+  width: 320px;
+  height: 140px;
+  position: absolute;
+  right: 32%;
+  bottom: -11px;
+  background: var(--background-loader-color);
+  transform: translateZ(200px) rotate(var(--r));
+  -webkit-animation: mask var(--duration-loader-animation) linear forwards infinite;
+          animation: mask var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube:after {
+  --r: -20.5deg;
+  right: auto;
+  left: 32%;
+}
+.loader_bigcube .ground {
+  position: absolute;
+  left: -50px;
+  bottom: -120px;
+  transform-style: preserve-3d;
+  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+}
+.loader_bigcube .ground div {
+  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  width: 200px;
+  height: 200px;
+  background: var(--primary-cube-loader-color);
+  background: linear-gradient(45deg, var(--primary-cube-loader-color) 0%, var(--primary-cube-loader-color) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
+  transform-style: preserve-3d;
+  -webkit-animation: ground var(--duration-loader-animation) linear forwards infinite;
+          animation: ground var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube .ground div:before, .loader_bigcube .ground div:after {
+  --rx: 90deg;
+  --ry: 0deg;
+  --x: 44px;
+  --y: 162px;
+  --z: -50px;
+  content: "";
+  width: 156px;
+  height: 300px;
+  opacity: 0;
+  background: linear-gradient(var(--primary-cube-loader-color), var(--primary-rgba));
+  position: absolute;
+  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+  -webkit-animation: ground-shine var(--duration-loader-animation) linear forwards infinite;
+          animation: ground-shine var(--duration-loader-animation) linear forwards infinite;
+}
+.loader_bigcube .ground div:after {
+  --rx: 90deg;
+  --ry: 90deg;
+  --x: 0;
+  --y: 177px;
+  --z: 150px;
+}
+.loader_bigcube .box3d{
+  --x: 0;
+  --y: 0;
+  position: absolute;
+  -webkit-animation: var(--duration-loader-animation) linear forwards infinite;
+          animation: var(--duration-loader-animation) linear forwards infinite;
+  transform: translate(var(--x), var(--y));
+}
+.loader_bigcube .box3d div {
+  background-color: var(--primary-cube-loader-color);
+  width: 48px;
+  height: 48px;
+  position: relative;
+  transform-style: preserve-3d;
+  -webkit-animation: var(--duration-loader-animation) ease forwards infinite;
+          animation: var(--duration-loader-animation) ease forwards infinite;
+  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+}
+.loader_bigcube .box3d div:before, .loader_bigcube .box3d div:after {
+  --rx: 90deg;
+  --ry: 0deg;
+  --z: 24px;
+  --y: -24px;
+  --x: 0;
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  width: inherit;
+  height: inherit;
+  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
+  filter: brightness(var(--b, 1.2));
+}
+.loader_bigcube .box3d div:after {
+  --rx: 0deg;
+  --ry: 90deg;
+  --x: 24px;
+  --y: 0;
+  --b: 1.4;
+}
+.loader_bigcube .box3d.box0 {
+  --x: -220px;
+  --y: -120px;
+  left: 58px;
+  top: 108px;
+}
+.loader_bigcube .box3d.box1 {
+  --x: -260px;
+  --y: 120px;
+  left: 25px;
+  top: 120px;
+}
+.loader_bigcube .box3d.box2 {
+  --x: 120px;
+  --y: -190px;
+  left: 58px;
+  top: 64px;
+}
+.loader_bigcube .box3d.box3 {
+  --x: 280px;
+  --y: -40px;
+  left: 91px;
+  top: 120px;
+}
+.loader_bigcube .box3d.box4 {
+  --x: 60px;
+  --y: 200px;
+  left: 58px;
+  top: 132px;
+}
+.loader_bigcube .box3d.box5 {
+  --x: -220px;
+  --y: -120px;
+  left: 25px;
+  top: 76px;
+}
+.loader_bigcube .box3d.box6 {
+  --x: -260px;
+  --y: 120px;
+  left: 91px;
+  top: 76px;
+}
+.loader_bigcube .box3d.box7 {
+  --x: -240px;
+  --y: 200px;
+  left: 58px;
+  top: 87px;
+}
+.loader_bigcube .box0 {
+  -webkit-animation-name: box-move0;
+          animation-name: box-move0;
+}
+.loader_bigcube .box0 div {
+  -webkit-animation-name: box-scale0;
+          animation-name: box-scale0;
+}
+.loader_bigcube .box1 {
+  -webkit-animation-name: box-move1;
+          animation-name: box-move1;
+}
+.loader_bigcube .box1 div {
+  -webkit-animation-name: box-scale1;
+          animation-name: box-scale1;
+}
+.loader_bigcube .box2 {
+  -webkit-animation-name: box-move2;
+          animation-name: box-move2;
+}
+.loader_bigcube .box2 div {
+  -webkit-animation-name: box-scale2;
+          animation-name: box-scale2;
+}
+.loader_bigcube .box3 {
+  -webkit-animation-name: box-move3;
+          animation-name: box-move3;
+}
+.loader_bigcube .box3 div {
+  -webkit-animation-name: box-scale3;
+          animation-name: box-scale3;
+}
+.loader_bigcube .box4 {
+  -webkit-animation-name: box-move4;
+          animation-name: box-move4;
+}
+.loader_bigcube .box4 div {
+  -webkit-animation-name: box-scale4;
+          animation-name: box-scale4;
+}
+.loader_bigcube .box5 {
+  -webkit-animation-name: box-move5;
+          animation-name: box-move5;
+}
+.loader_bigcube .box5 div {
+  -webkit-animation-name: box-scale5;
+          animation-name: box-scale5;
+}
+.loader_bigcube .box6 {
+  -webkit-animation-name: box-move6;
+          animation-name: box-move6;
+}
+.loader_bigcube .box6 div {
+  -webkit-animation-name: box-scale6;
+          animation-name: box-scale6;
+}
+.loader_bigcube .box7 {
+  -webkit-animation-name: box-move7;
+          animation-name: box-move7;
+}
+.loader_bigcube .box7 div {
+  -webkit-animation-name: box-scale7;
+          animation-name: box-scale7;
+}
+
+@-webkit-keyframes box-move0 {
+  12% {
+    transform: translate(var(--x), var(--y));
+  }
+  25%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+
+@keyframes box-move0 {
+  12% {
+    transform: translate(var(--x), var(--y));
+  }
+  25%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale0 {
+  6% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  14%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale0 {
+  6% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  14%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move1 {
+  16% {
+    transform: translate(var(--x), var(--y));
+  }
+  29%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move1 {
+  16% {
+    transform: translate(var(--x), var(--y));
+  }
+  29%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale1 {
+  10% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  18%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale1 {
+  10% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  18%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move2 {
+  20% {
+    transform: translate(var(--x), var(--y));
+  }
+  33%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move2 {
+  20% {
+    transform: translate(var(--x), var(--y));
+  }
+  33%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale2 {
+  14% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  22%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale2 {
+  14% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  22%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move3 {
+  24% {
+    transform: translate(var(--x), var(--y));
+  }
+  37%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move3 {
+  24% {
+    transform: translate(var(--x), var(--y));
+  }
+  37%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale3 {
+  18% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  26%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale3 {
+  18% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  26%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move4 {
+  28% {
+    transform: translate(var(--x), var(--y));
+  }
+  41%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move4 {
+  28% {
+    transform: translate(var(--x), var(--y));
+  }
+  41%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale4 {
+  22% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  30%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale4 {
+  22% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  30%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move5 {
+  32% {
+    transform: translate(var(--x), var(--y));
+  }
+  45%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move5 {
+  32% {
+    transform: translate(var(--x), var(--y));
+  }
+  45%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale5 {
+  26% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  34%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale5 {
+  26% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  34%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move6 {
+  36% {
+    transform: translate(var(--x), var(--y));
+  }
+  49%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move6 {
+  36% {
+    transform: translate(var(--x), var(--y));
+  }
+  49%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale6 {
+  30% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  38%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale6 {
+  30% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  38%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes box-move7 {
+  40% {
+    transform: translate(var(--x), var(--y));
+  }
+  53%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@keyframes box-move7 {
+  40% {
+    transform: translate(var(--x), var(--y));
+  }
+  53%, 52% {
+    transform: translate(0, 0);
+  }
+  80% {
+    transform: translate(0, -32px);
+  }
+  90%, 100% {
+    transform: translate(0, 188px);
+  }
+}
+@-webkit-keyframes box-scale7 {
+  34% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  42%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@keyframes box-scale7 {
+  34% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
+  }
+  42%, 100% {
+    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
+  }
+}
+@-webkit-keyframes ground {
+  0%, 65% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+  75%, 90% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+}
+@keyframes ground {
+  0%, 65% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+  75%, 90% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
+  }
+  100% {
+    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
+  }
+}
+@-webkit-keyframes ground-shine {
+  0%, 70% {
+    opacity: 0;
+  }
+  75%, 87% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ground-shine {
+  0%, 70% {
+    opacity: 0;
+  }
+  75%, 87% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes mask {
+  0%, 65% {
+    opacity: 0;
+  }
+  66%, 100% {
+    opacity: 1;
+  }
+}
+@keyframes mask {
+  0%, 65% {
+    opacity: 0;
+  }
+  66%, 100% {
+    opacity: 1;
+  }
+}
diff --git a/loaders/disappearing_falling_cube/loader.html b/loaders/disappearing_falling_cube/loader.html
new file mode 100644
index 0000000..d638e48
--- /dev/null
+++ b/loaders/disappearing_falling_cube/loader.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: disappearing falling cube</title>
+
+</head>
+<body>
+  <div id="cubes_loader_holder" class="loader_bigcube_wrapper visible_loader">
+    <div class="loader_bigcube">
+      <div class="box3d box0">
+        <div></div>
+      </div>
+      <div class="box3d box1">
+        <div></div>
+      </div>
+      <div class="box3d box2">
+        <div></div>
+      </div>
+      <div class="box3d box3">
+        <div></div>
+      </div>
+      <div class="box3d box4">
+        <div></div>
+      </div>
+      <div class="box3d box5">
+        <div></div>
+      </div>
+      <div class="box3d box6">
+        <div></div>
+      </div>
+      <div class="box3d box7">
+        <div></div>
+      </div>
+      <div class="ground">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/disappearing_falling_cube/video_loader_example_disappearing_falling_cube.mp4 b/loaders/disappearing_falling_cube/video_loader_example_disappearing_falling_cube.mp4
new file mode 100644
index 0000000..8a55f67
Binary files /dev/null and b/loaders/disappearing_falling_cube/video_loader_example_disappearing_falling_cube.mp4 differ
diff --git a/loaders/flipping_paper_rhombus/README.md b/loaders/flipping_paper_rhombus/README.md
new file mode 100644
index 0000000..b668025
--- /dev/null
+++ b/loaders/flipping_paper_rhombus/README.md
@@ -0,0 +1,265 @@
+
+# LOADER: flipping paper rhombus
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_flipping_paper_rhombus.mp4](video_loader_example_flipping_paper_rhombus.mp4)
+
+Original Source on icons8, example #1 by morningtrain [https://icons8.com/cssload/en/3d-loaders](https://icons8.com/cssload/en/3d-loaders)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="paper_loader_holder" class="loader_origami_wrapper visible_loader">
+    <div class="cssload-thecube">
+	    <div class="cssload-cube cssload-c1"></div>
+	    <div class="cssload-cube cssload-c2"></div>
+	    <div class="cssload-cube cssload-c4"></div>
+	    <div class="cssload-cube cssload-c3"></div>
+    </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+
+:root{
+  --loader_origami_background: #e3e3e3; /*<-- you can change here the page background color */
+  --loader_origami_square_size: 150px; /*<-- size of each square */
+  --loader_origami_square_color: rgb(250 102 2); /*<-- color of each square */
+  --loader_origami_cycle_duration: 2.76s; /*<-- duration in seconds of a full cycle */
+}
+.loader_origami_wrapper.visible_loader {
+  display: flex;
+}
+.loader_origami_wrapper {
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: var(--loader_origami_background);
+  display: none;
+  justify-content: center;
+  align-items: center
+}
+
+.cssload-thecube {
+	width: var(--loader_origami_square_size);
+	height: var(--loader_origami_square_size);
+	margin: 0 auto;
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	float: left;
+	width: 50%;
+	height: 50%;
+	position: relative;
+	transform: scale(1.1);
+		-o-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+}
+.cssload-thecube .cssload-cube:before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--loader_origami_square_color);
+	animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-o-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-ms-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-webkit-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-moz-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+	transform-origin: 100% 100%;
+		-o-transform-origin: 100% 100%;
+		-ms-transform-origin: 100% 100%;
+		-webkit-transform-origin: 100% 100%;
+		-moz-transform-origin: 100% 100%;
+}
+.cssload-thecube .cssload-c2 {
+	transform: scale(1.1) rotateZ(90deg);
+		-o-transform: scale(1.1) rotateZ(90deg);
+		-ms-transform: scale(1.1) rotateZ(90deg);
+		-webkit-transform: scale(1.1) rotateZ(90deg);
+		-moz-transform: scale(1.1) rotateZ(90deg);
+}
+.cssload-thecube .cssload-c3 {
+	transform: scale(1.1) rotateZ(180deg);
+		-o-transform: scale(1.1) rotateZ(180deg);
+		-ms-transform: scale(1.1) rotateZ(180deg);
+		-webkit-transform: scale(1.1) rotateZ(180deg);
+		-moz-transform: scale(1.1) rotateZ(180deg);
+}
+.cssload-thecube .cssload-c4 {
+	transform: scale(1.1) rotateZ(270deg);
+		-o-transform: scale(1.1) rotateZ(270deg);
+		-ms-transform: scale(1.1) rotateZ(270deg);
+		-webkit-transform: scale(1.1) rotateZ(270deg);
+		-moz-transform: scale(1.1) rotateZ(270deg);
+}
+.cssload-thecube .cssload-c2:before {
+	animation-delay: 0.35s;
+		-o-animation-delay: 0.35s;
+		-ms-animation-delay: 0.35s;
+		-webkit-animation-delay: 0.35s;
+		-moz-animation-delay: 0.35s;
+}
+.cssload-thecube .cssload-c3:before {
+	animation-delay: 0.69s;
+		-o-animation-delay: 0.69s;
+		-ms-animation-delay: 0.69s;
+		-webkit-animation-delay: 0.69s;
+		-moz-animation-delay: 0.69s;
+}
+.cssload-thecube .cssload-c4:before {
+	animation-delay: 1.04s;
+		-o-animation-delay: 1.04s;
+		-ms-animation-delay: 1.04s;
+		-webkit-animation-delay: 1.04s;
+		-moz-animation-delay: 1.04s;
+}
+@keyframes cssload-fold-thecube {
+	0%, 10% {
+		transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%, 75% {
+		transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%, 100% {
+		transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-o-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%, 75% {
+		-o-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%, 100% {
+		-o-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-ms-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-ms-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%, 75% {
+		-ms-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%, 100% {
+		-ms-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-webkit-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-webkit-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%, 75% {
+		-webkit-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%, 100% {
+		-webkit-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-moz-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%, 75% {
+		-moz-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%, 100% {
+		-moz-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('paper_loader_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+  --loader_origami_background: #e3e3e3; /*<-- you can change here the page background color */
+  --loader_origami_square_size: 150px; /*<-- size of each square */
+  --loader_origami_square_color: rgb(250 102 2); /*<-- color of each square */
+  --loader_origami_cycle_duration: 2.76s; /*<-- duration in seconds of a full cycle */
+}
+
+
+```
+
diff --git a/loaders/flipping_paper_rhombus/loader.css b/loaders/flipping_paper_rhombus/loader.css
new file mode 100644
index 0000000..72ce9e5
--- /dev/null
+++ b/loaders/flipping_paper_rhombus/loader.css
@@ -0,0 +1,203 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+**  or, if you require a completely different custom loader,
+**  you can always contact us at support@awe.media
+*/
+:root{
+  --loader_origami_background: #e3e3e3; /*<-- you can change here the page background color */
+  --loader_origami_square_size: 150px; /*<-- size of each square */
+  --loader_origami_square_color: rgb(250 102 2); /*<-- color of each square */
+  --loader_origami_cycle_duration: 2.76s; /*<-- duration in seconds of a full cycle */
+}
+
+.loader_origami_wrapper.visible_loader {
+  display: flex;
+}
+
+.loader_origami_wrapper {
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: var(--loader_origami_background);
+  display: none;
+  justify-content: center;
+  align-items: center
+}
+
+.cssload-thecube {
+	width: var(--loader_origami_square_size);
+	height: var(--loader_origami_square_size);
+	margin: 0 auto;
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	position: relative;
+	transform: rotateZ(45deg);
+		-o-transform: rotateZ(45deg);
+		-ms-transform: rotateZ(45deg);
+		-webkit-transform: rotateZ(45deg);
+		-moz-transform: rotateZ(45deg);
+}
+.cssload-thecube .cssload-cube {
+	float: left;
+	width: 50%;
+	height: 50%;
+	position: relative;
+	transform: scale(1.1);
+		-o-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+}
+.cssload-thecube .cssload-cube:before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--loader_origami_square_color);
+	animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-o-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-ms-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-webkit-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+		-moz-animation: cssload-fold-thecube var(--loader_origami_cycle_duration) infinite linear both;
+	transform-origin: 100% 100%;
+		-o-transform-origin: 100% 100%;
+		-ms-transform-origin: 100% 100%;
+		-webkit-transform-origin: 100% 100%;
+		-moz-transform-origin: 100% 100%;
+}
+.cssload-thecube .cssload-c2 {
+	transform: scale(1.1) rotateZ(90deg);
+		-o-transform: scale(1.1) rotateZ(90deg);
+		-ms-transform: scale(1.1) rotateZ(90deg);
+		-webkit-transform: scale(1.1) rotateZ(90deg);
+		-moz-transform: scale(1.1) rotateZ(90deg);
+}
+.cssload-thecube .cssload-c3 {
+	transform: scale(1.1) rotateZ(180deg);
+		-o-transform: scale(1.1) rotateZ(180deg);
+		-ms-transform: scale(1.1) rotateZ(180deg);
+		-webkit-transform: scale(1.1) rotateZ(180deg);
+		-moz-transform: scale(1.1) rotateZ(180deg);
+}
+.cssload-thecube .cssload-c4 {
+	transform: scale(1.1) rotateZ(270deg);
+		-o-transform: scale(1.1) rotateZ(270deg);
+		-ms-transform: scale(1.1) rotateZ(270deg);
+		-webkit-transform: scale(1.1) rotateZ(270deg);
+		-moz-transform: scale(1.1) rotateZ(270deg);
+}
+.cssload-thecube .cssload-c2:before {
+	animation-delay: 0.35s;
+		-o-animation-delay: 0.35s;
+		-ms-animation-delay: 0.35s;
+		-webkit-animation-delay: 0.35s;
+		-moz-animation-delay: 0.35s;
+}
+.cssload-thecube .cssload-c3:before {
+	animation-delay: 0.69s;
+		-o-animation-delay: 0.69s;
+		-ms-animation-delay: 0.69s;
+		-webkit-animation-delay: 0.69s;
+		-moz-animation-delay: 0.69s;
+}
+.cssload-thecube .cssload-c4:before {
+	animation-delay: 1.04s;
+		-o-animation-delay: 1.04s;
+		-ms-animation-delay: 1.04s;
+		-webkit-animation-delay: 1.04s;
+		-moz-animation-delay: 1.04s;
+}
+
+
+
+@keyframes cssload-fold-thecube {
+	0%, 10% {
+		transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-o-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-o-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-o-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-ms-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-ms-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-ms-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-ms-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-webkit-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-webkit-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-webkit-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-webkit-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes cssload-fold-thecube {
+	0%, 10% {
+		-moz-transform: perspective(280px) rotateX(-180deg);
+		opacity: 0;
+	}
+	25%,
+				75% {
+		-moz-transform: perspective(280px) rotateX(0deg);
+		opacity: 1;
+	}
+	90%,
+				100% {
+		-moz-transform: perspective(280px) rotateY(180deg);
+		opacity: 0;
+	}
+}
\ No newline at end of file
diff --git a/loaders/flipping_paper_rhombus/loader.html b/loaders/flipping_paper_rhombus/loader.html
new file mode 100644
index 0000000..86bd7c5
--- /dev/null
+++ b/loaders/flipping_paper_rhombus/loader.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: flipping paper rhombus</title>
+
+</head>
+<body>
+  
+  <div id="paper_loader_holder" class="loader_origami_wrapper visible_loader">
+    <div class="cssload-thecube">
+	    <div class="cssload-cube cssload-c1"></div>
+	    <div class="cssload-cube cssload-c2"></div>
+	    <div class="cssload-cube cssload-c4"></div>
+	    <div class="cssload-cube cssload-c3"></div>
+    </div>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/flipping_paper_rhombus/video_loader_example_flipping_paper_rhombus.mp4 b/loaders/flipping_paper_rhombus/video_loader_example_flipping_paper_rhombus.mp4
new file mode 100644
index 0000000..775b287
Binary files /dev/null and b/loaders/flipping_paper_rhombus/video_loader_example_flipping_paper_rhombus.mp4 differ
diff --git a/loaders/flying_panel/README.md b/loaders/flying_panel/README.md
new file mode 100644
index 0000000..dde634b
--- /dev/null
+++ b/loaders/flying_panel/README.md
@@ -0,0 +1,249 @@
+# LOADER: Flying Panel
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [flying_panel.mp4](flying_panel.mp4)
+
+Original Source: [https://icons8.com/cssload/en/3d-loaders/2](https://icons8.com/cssload/en/3d-loaders/2)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader">
+    <div class="custom_loader_dot"></div>
+    <div class="custom_loader_dot"></div>
+    <div class="custom_loader_dot"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #fff;
+  
+  /* 2. loader size */
+  --cl-size: 200px;
+
+  /* 3. animation duration */
+  --cl-animation-duration: 1150ms;
+
+  /* 4. inner circle colors */
+  --cl-inner-circle-color1: rgb(30,63,87);
+  --cl-inner-circle-color2: rgb(30,87,79);
+
+	/* 5. middle circle colors */
+  --cl-middle-circle-color1: rgb(68,120,145);
+  --cl-middle-circle-color2: rgb(68,145,128);
+
+	/* 6. outter circle colors */
+  --cl-outter-circle-color1: rgb(107,178,205);
+  --cl-outter-circle-color2: rgb(107,205,178);
+}
+
+.custom_loader {
+	position: absolute;
+	left: 54%;
+	width: var(--cl-size);
+	height: var(--cl-size);
+	margin-top: calc(var(--cl-size) * -0.5);
+	margin-left: calc(var(--cl-size) * -0.5);
+	perspective: var(--cl-size);
+}
+
+.custom_loader_dot {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: calc(var(--cl-size) * 117 / 195);
+	height: calc(var(--cl-size) * 117 / 195);
+	margin-top: calc(var(--cl-size) * -58 / 195);
+	margin-left: calc(var(--cl-size) * -58 / 195);
+	border-radius: calc(var(--cl-size) * 97 / 195);
+	border: calc(var(--cl-size) * 39 / 195) outset var(--cl-inner-circle-color1);
+	background-color: transparent;
+	transform-origin: 50% 50%;
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	animation: cssload-dot1 var(--cl-animation-duration) cubic-bezier(.49,.06,.43,.85) infinite;
+}
+
+.custom_loader_dot:nth-child(2) {
+	width: calc((var(--cl-size) * 136 / 195));
+	height: calc((var(--cl-size) * 136 / 195));
+	margin-top: calc((var(--cl-size) * -68 / 195));
+	margin-left: calc((var(--cl-size) * -68 / 195));
+	border-width: calc((var(--cl-size) * 29 / 195));
+	border-color: var(--cl-middle-circle-color1);
+	animation-name: cssload-dot2;
+	animation-delay: calc(var(--cl-animation-duration) * 86.25 / 1150);
+	box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+}
+
+.custom_loader_dot:nth-child(3) {
+	width: calc((var(--cl-size) * 156 / 195));
+	height: calc((var(--cl-size) * 156 / 195));
+	margin-top: calc((var(--cl-size) * -78 / 195));
+	margin-left: calc((var(--cl-size) * -78 / 195));
+	border-width: calc((var(--cl-size) * 19 / 195));
+	border-color: var(--cl-outter-circle-color1);
+	animation-name: cssload-dot3;
+	animation-delay: calc(var(--cl-animation-duration) * 172.5 / 1150);
+	box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+}
+
+@keyframes cssload-dot1 {
+	0% {
+		border-color: var(--cl-inner-circle-color1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-inner-circle-color2);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-inner-circle-color1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
+
+@keyframes cssload-dot2 {
+	0% {
+		border-color: var(--cl-middle-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-middle-circle-color2);
+		box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.8);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-middle-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
+
+@keyframes cssload-dot3 {
+	0% {
+		border-color: var(--cl-outter-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-outter-circle-color2);
+		box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-outter-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #fff;
+
+/* 2. loader size */
+--cl-size: 200px;
+
+/* 3. animation duration */
+--cl-animation-duration: 1150ms;
+
+/* 4. inner circle colors */
+--cl-inner-circle-color1: rgb(30,63,87);
+--cl-inner-circle-color2: rgb(30,87,79);
+
+/* 5. middle circle colors */
+--cl-middle-circle-color1: rgb(68,120,145);
+--cl-middle-circle-color2: rgb(68,145,128);
+
+/* 6. outter circle colors */
+--cl-outter-circle-color1: rgb(107,178,205);
+--cl-outter-circle-color2: rgb(107,205,178);
+
+
+```
+
+
+
+
diff --git a/loaders/flying_panel/flying_panel.mp4 b/loaders/flying_panel/flying_panel.mp4
new file mode 100644
index 0000000..24e55ec
Binary files /dev/null and b/loaders/flying_panel/flying_panel.mp4 differ
diff --git a/loaders/flying_panel/loader.css b/loaders/flying_panel/loader.css
new file mode 100644
index 0000000..5e47734
--- /dev/null
+++ b/loaders/flying_panel/loader.css
@@ -0,0 +1,154 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #fff;
+  
+  /* 2. loader size */
+  --cl-size: 200px;
+
+  /* 3. animation duration */
+  --cl-animation-duration: 1150ms;
+
+  /* 4. inner circle colors */
+  --cl-inner-circle-color1: rgb(30,63,87);
+  --cl-inner-circle-color2: rgb(30,87,79);
+
+	/* 5. middle circle colors */
+  --cl-middle-circle-color1: rgb(68,120,145);
+  --cl-middle-circle-color2: rgb(68,145,128);
+
+	/* 6. outter circle colors */
+  --cl-outter-circle-color1: rgb(107,178,205);
+  --cl-outter-circle-color2: rgb(107,205,178);
+}
+
+.custom_loader {
+	position: absolute;
+	left: 54%;
+	width: var(--cl-size);
+	height: var(--cl-size);
+	margin-top: calc(var(--cl-size) * -0.5);
+	margin-left: calc(var(--cl-size) * -0.5);
+	perspective: var(--cl-size);
+}
+
+.custom_loader_dot {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: calc(var(--cl-size) * 117 / 195);
+	height: calc(var(--cl-size) * 117 / 195);
+	margin-top: calc(var(--cl-size) * -58 / 195);
+	margin-left: calc(var(--cl-size) * -58 / 195);
+	border-radius: calc(var(--cl-size) * 97 / 195);
+	border: calc(var(--cl-size) * 39 / 195) outset var(--cl-inner-circle-color1);
+	background-color: transparent;
+	transform-origin: 50% 50%;
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	animation: cssload-dot1 var(--cl-animation-duration) cubic-bezier(.49,.06,.43,.85) infinite;
+}
+
+.custom_loader_dot:nth-child(2) {
+	width: calc((var(--cl-size) * 136 / 195));
+	height: calc((var(--cl-size) * 136 / 195));
+	margin-top: calc((var(--cl-size) * -68 / 195));
+	margin-left: calc((var(--cl-size) * -68 / 195));
+	border-width: calc((var(--cl-size) * 29 / 195));
+	border-color: var(--cl-middle-circle-color1);
+	animation-name: cssload-dot2;
+	animation-delay: calc(var(--cl-animation-duration) * 86.25 / 1150);
+	box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+}
+
+.custom_loader_dot:nth-child(3) {
+	width: calc((var(--cl-size) * 156 / 195));
+	height: calc((var(--cl-size) * 156 / 195));
+	margin-top: calc((var(--cl-size) * -78 / 195));
+	margin-left: calc((var(--cl-size) * -78 / 195));
+	border-width: calc((var(--cl-size) * 19 / 195));
+	border-color: var(--cl-outter-circle-color1);
+	animation-name: cssload-dot3;
+	animation-delay: calc(var(--cl-animation-duration) * 172.5 / 1150);
+	box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+	transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+}
+
+@keyframes cssload-dot1 {
+	0% {
+		border-color: var(--cl-inner-circle-color1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-inner-circle-color2);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-inner-circle-color1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
+
+@keyframes cssload-dot2 {
+	0% {
+		border-color: var(--cl-middle-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-middle-circle-color2);
+		box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.8);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-middle-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
+
+@keyframes cssload-dot3 {
+	0% {
+		border-color: var(--cl-outter-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+	50% {
+		border-color: var(--cl-outter-circle-color2);
+		box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
+		transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
+	}
+	100% {
+		border-color: var(--cl-outter-circle-color1);
+		box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
+		transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
+	}
+}
\ No newline at end of file
diff --git a/loaders/flying_panel/loader.html b/loaders/flying_panel/loader.html
new file mode 100644
index 0000000..02aae81
--- /dev/null
+++ b/loaders/flying_panel/loader.html
@@ -0,0 +1,7 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader">
+    <div class="custom_loader_dot"></div>
+    <div class="custom_loader_dot"></div>
+    <div class="custom_loader_dot"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/flying_panel/loader.js b/loaders/flying_panel/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/flying_panel/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/moving_truck/README.md b/loaders/moving_truck/README.md
new file mode 100644
index 0000000..a2668e7
--- /dev/null
+++ b/loaders/moving_truck/README.md
@@ -0,0 +1,318 @@
+# LOADER: Moving Truck
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [moving_truck.mp4](moving_truck.mp4)
+
+Original Source on Codepen: [https://codepen.io/ChrisJohnson/pen/OyXWpr](https://codepen.io/ChrisJohnson/pen/OyXWpr)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="loop_wrapper">
+    <div class="mountain"></div>
+    <div class="hill"></div>
+    <div class="tree"></div>
+    <div class="tree"></div>
+    <div class="tree"></div>
+    <div class="rock"></div>
+    <div class="truck"></div>
+    <div class="wheels"></div>
+  </div> 
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #009688;
+  
+  /* 2. hill color */
+  --cl-hill-color: #4DB6AC;
+
+  /* 3. mountain color */
+  --cl-mountain-color: #4DB6AC;
+
+  /* 4. road color */
+  --cl-road-color: #fff;
+
+  /* 5. rock color */
+  --cl-rock-color: #ddd;
+  
+  /* 6. mountain animation duration (other animation durations will response to this value), change 20s to 10s will speed up every animation by 2 
+  */
+  --cl-mountain-animation: 20s;
+}
+
+.loop_wrapper {
+  margin: 0 auto;
+  position: relative;
+  display: block;
+  width: 600px;
+  height: 250px;
+  overflow: hidden;
+  border-bottom: 3px solid var(--cl-road-color);
+  transform: translateY(-50%);
+}
+
+.mountain {
+  position: absolute;
+  right: -900px;
+  bottom: -20px;
+  width: 2px;
+  height: 2px;
+  box-shadow: 
+    0 0 0 50px var(--cl-mountain-color),
+    60px 50px 0 70px var(--cl-mountain-color),
+    90px 90px 0 50px var(--cl-mountain-color),
+    250px 250px 0 50px var(--cl-mountain-color),
+    290px 320px 0 50px var(--cl-mountain-color),
+    320px 400px 0 50px var(--cl-mountain-color);
+  transform: rotate(130deg);
+  animation: mtn var(--cl-mountain-animation) linear infinite;
+}
+
+.hill {
+  position: absolute;
+  right: -900px;
+  bottom: -50px;
+  width: 400px;
+  border-radius: 50%;
+  height: 20px;
+  box-shadow: 
+    0 0 0 50px #4DB6AC,
+    -20px 0 0 20px var(--cl-hill-color),
+    -90px 0 0 50px var(--cl-hill-color),
+    250px 0 0 50px var(--cl-hill-color),
+    290px 0 0 50px var(--cl-hill-color),
+    620px 0 0 50px var(--cl-hill-color);
+  animation: hill calc(var(--cl-mountain-animation) / 5) calc(var(--cl-mountain-animation) / 10) linear infinite;
+}
+
+.tree, .tree:nth-child(2), .tree:nth-child(3) {
+  position: absolute;
+  height: 100px; 
+  width: 35px;
+  bottom: 0;
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAzMiAxMDAiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zMS45NDUgNzQuOTg2TDE3LjM3IDEuMTQ4QTEuNDE2IDEuNDE2IDAgMCAwIDE1Ljk4OCAwYy0uNjczIDAtMS4yNTIuNDgtMS4zODMgMS4xNDhMLjAyNyA3NC45ODZjLS4wODMuNDIuMDI1Ljg1NC4yOTIgMS4xODYuMjY4LjMzMi42NjkuNTIzIDEuMDkxLjUyM2gxMy4xNjdWMTAwaDIuODIxVjc2LjY5NWgxMy4xNjVjLjQyMiAwIC44MjEtLjE5MSAxLjA5LS41MjMuMjctLjMzMS4zNzUtLjc2Ni4yOTItMS4xODZ6Ii8+Cjwvc3ZnPgo=') no-repeat;
+}
+
+.rock {
+  margin-top: -17%;
+  height: 2%; 
+  width: 2%;
+  bottom: -2px;
+  border-radius: 20px;
+  position: absolute;
+  background: var(--cl-rock-color);
+}
+
+.truck, .wheels {
+  transition: all ease;
+  width: 85px;
+  margin-right: -60px;
+  bottom: 0px;
+  right: 50%;
+  position: absolute;
+  background: #eee;
+}
+
+.truck {
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wYmV0YTIgKDJiNzFkMjUsIDIwMTktMTItMDMpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJ0cnVjay5zdmciCiAgIGlkPSJzdmcyNDAwIgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCA4NSA2MCIKICAgaGVpZ2h0PSI2MCIKICAgd2lkdGg9Ijg1Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyNDA2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjQwNCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMjQwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOmN5PSIzMCIKICAgICBpbmtzY2FwZTpjeD0iNDIuNSIKICAgICBpbmtzY2FwZTp6b29tPSI4LjYyMzUyOTQiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlkPSJuYW1lZHZpZXcyNDAyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjkwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMjM5NiIKICAgICBkPSJNNS4xMzggNTQuMDM5YTMuNzcgMy43NyAwIDAgMS0uMTQ5LS4wMDVsLS44NTkuMDAyQTQuMTM0IDQuMTM0IDAgMCAxIDAgNDkuOTA2VjUuMTk1YTQuMTM1IDQuMTM1IDAgMCAxIDQuMTMtNC4xMzNoNDYuOTczYzIuMjcyIDAgNC4xMjMgMS45NSA0LjEyMyA0LjIyOXY0NC42MTJhNC4xMzMgNC4xMzMgMCAwIDEtNC4xMjcgNC4xMzFIMjkuOTYyYy0xLjA5MS0uMDE5LTMuMjM5LS42OTEtMy43MjctMy4xMjgtMS4wNjctMy45NTctNC43NTUtNi43ODktOC45NDctNi43ODktNC4yOTEgMC04LjA5OCAzLjA0MS05LjA1MSA3LjIyOS0uMjI1IDEuODE3LTEuNzIzIDIuNjkzLTMuMDk5IDIuNjkzek00LjEyNyA0LjIwOGMtLjU5NiAwLTEuMDgzLjM4OS0xLjA4My45ODd2NDQuNzA5YzAgLjU5Ny40ODggMS4wODYgMS4wODYgMS4wODZoMS4wMDRjLjAwNS0uMDQ3LjEyMy0uMjcxLjEzMy0uMzE3IDEuMjY3LTUuNTYyIDYuMzIzLTkuNTk3IDEyLjAyMi05LjU5N2ExMi4zNTYgMTIuMzU2IDAgMCAxIDExLjkxMiA5LjEzN2MuMTUxLjczNC42ODEuNzc3Ljc4NS43NzdoMjEuMTExYy41OTYgMCAxLjA4My0uNDg3IDEuMDgzLTEuMDg0VjUuMjkzYzAtLjU5OC0uNDg1LTEuMDg1LTEuMDgzLTEuMDg1SDQuMTI3ek04NC45MjkgMzUuODI4cy0uMDkzLTIuMDkzLS4yODgtMy4xMThjLS4xNjQtLjg3My0xLjA4Ny0yLjY0NC0xLjA4Ny0yLjY0NGwtNy4yOTktMTMuNTljLS45NTEtMS41Mi0zLjExNS0yLjcwNy00LjU1OC0yLjcwN0g2MC43ODVhMi42MDggMi42MDggMCAwIDAtMi42MDYgMi42MDl2MzMuNTI2YTIuNjA5IDIuNjA5IDAgMCAwIDIuNjA2IDIuNjA5aC42NDNzLjk0OS0uMTIzIDEuMzA0LTEuMzEyYy45ODYtMy45MzMgNC41MTQtNi44NjIgOC43NDktNi44NjIgNC4xNDUgMCA3LjYxMiAyLjgwOCA4LjY4MiA2LjYxMy40NDIgMS42MTIgMi4yMzEgMS41NjEgMi4yMzEgMS41NjFBMi42MDggMi42MDggMCAwIDAgODUgNDkuOTA0bC0uMDcxLTE0LjA3NnptLTYuNjAzLTMuNTExSDY1LjMxMmExLjk5NiAxLjk5NiAwIDAgMS0xLjk4OS0xLjk5VjIwLjE0M2MwLTEuMDk4Ljg5NC0xLjk5IDEuOTg5LTEuOTloNC4zNjVjMi40ODMgMCA0LjExNyAyLjAwOSA0LjYzIDIuOTc4bDUuMDY1IDkuNDM0Yy41MjEuOTYyLjA1MyAxLjc1Mi0xLjA0NiAxLjc1MnoiCiAgICAgZmlsbD0iI0ZGRiIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOm5vbmUiCiAgICAgaWQ9InBhdGgyMzk4IgogICAgIGQ9Ik00LjEyNyA0LjIwOGMtLjU5NiAwLTEuMDgzLjM4OS0xLjA4My45ODd2NDQuNzA5YzAgLjU5Ny40ODggMS4wODYgMS4wODYgMS4wODZoMS4wMDRjLjAwNS0uMDQ3LjEyMy0uMjcxLjEzMy0uMzE3IDEuMjY3LTUuNTYyIDYuMzIzLTkuNTk3IDEyLjAyMi05LjU5N2ExMi4zNTYgMTIuMzU2IDAgMCAxIDExLjkxMiA5LjEzN2MuMTUxLjczNC42ODEuNzc3Ljc4NS43NzdoMjEuMTExYy41OTYgMCAxLjA4My0uNDg3IDEuMDgzLTEuMDg0VjUuMjkzYzAtLjU5OC0uNDg1LTEuMDg1LTEuMDgzLTEuMDg1SDQuMTI3eiIKICAgICBmaWxsPSIjMDA5Njg4IiAvPgo8L3N2Zz4K') no-repeat;
+  background-size: contain;
+  height: 60px;
+}
+
+.truck:before {
+  content: " ";
+  position: absolute;
+  width: 25px;
+  box-shadow:
+    -30px 28px 0 1.5px #fff,
+    -35px 18px 0 1.5px #fff;
+}
+
+.wheels {
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDg1IDE1Ij4KICA8Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxNy4yODkiIGN5PSI4LjQxMyIgcj0iNi41ODciLz4KICA8Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI3MS40OCIgY3k9IjguNDEyIiByPSI2LjU4NiIvPgo8L3N2Zz4K') no-repeat;
+  height: 15px;
+  margin-bottom: 0;
+}
+
+.tree { 
+  animation: tree calc(var(--cl-mountain-animation) / 6.67) 0.000s linear infinite; 
+}
+
+.tree:nth-child(2) { 
+  animation: tree2 calc(var(--cl-mountain-animation) / 10) 0.150s linear infinite; 
+}
+
+.tree:nth-child(3) { 
+  animation: tree3 calc(var(--cl-mountain-animation) / 2.5) 0.050s linear infinite; 
+}
+
+.rock { 
+  animation: rock calc(var(--cl-mountain-animation) / 5)   -0.530s linear infinite; 
+}
+
+.truck { 
+  animation: truck calc(var(--cl-mountain-animation) / 5)   0.080s ease infinite; 
+}
+
+.wheels { 
+  animation: truck calc(var(--cl-mountain-animation) / 5)   0.001s ease infinite; 
+}
+
+.truck:before { 
+  animation: wind calc(var(--cl-mountain-animation) / 13.3)   0.000s ease infinite; 
+}
+
+
+@keyframes tree {
+  0%   { transform: translate(1350px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes tree2 {
+  0%   { transform: translate(650px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes tree3 {
+  0%   { transform: translate(2750px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes rock {
+  0%   { right: -200px; }
+  100% { right: 2000px; }
+}
+
+@keyframes truck {
+  0%   { }
+  6%   { transform: translateY(0px); }
+  7%   { transform: translateY(-6px); }
+  9%   { transform: translateY(0px); }
+  10%  { transform: translateY(-1px); }
+  11%  { transform: translateY(0px); }
+  100% { }
+}
+
+@keyframes wind {
+  0%   {  }
+  50%  { transform: translateY(3px) }
+  100% {  }
+}
+
+@keyframes mtn {
+  100% { transform: translateX(-2000px) rotate(130deg); }
+}
+
+@keyframes hill {
+  100% { transform: translateX(-2000px); }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #009688;
+
+/* 2. hill color */
+--cl-hill-color: #4DB6AC;
+
+/* 3. mountain color */
+--cl-mountain-color: #4DB6AC;
+
+/* 4. road color */
+--cl-road-color: #fff;
+
+/* 5. rock color */
+--cl-rock-color: #ddd;
+
+/* 6. mountain animation duration (other animation durations will response to this value), change 20s to 10s will speed up every animation by 2 
+*/
+--cl-mountain-animation: 20s;
+
+
+```
+
+
+
+
diff --git a/loaders/moving_truck/loader.css b/loaders/moving_truck/loader.css
new file mode 100644
index 0000000..a9643da
--- /dev/null
+++ b/loaders/moving_truck/loader.css
@@ -0,0 +1,220 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #009688;
+  
+  /* 2. hill color */
+  --cl-hill-color: #4DB6AC;
+
+  /* 3. mountain color */
+  --cl-mountain-color: #4DB6AC;
+
+  /* 4. road color */
+  --cl-road-color: #fff;
+
+  /* 5. rock color */
+  --cl-rock-color: #ddd;
+  
+  /* 6. mountain animation duration (other animation durations will response to this value) 
+        change 20s to 10s will speed up every animation by 2 
+  */
+  --cl-mountain-animation: 20s;
+}
+
+.loop_wrapper {
+  margin: 0 auto;
+  position: relative;
+  display: block;
+  width: 600px;
+  height: 250px;
+  overflow: hidden;
+  border-bottom: 3px solid var(--cl-road-color);
+  transform: translateY(-50%);
+}
+
+.mountain {
+  position: absolute;
+  right: -900px;
+  bottom: -20px;
+  width: 2px;
+  height: 2px;
+  box-shadow: 
+    0 0 0 50px var(--cl-mountain-color),
+    60px 50px 0 70px var(--cl-mountain-color),
+    90px 90px 0 50px var(--cl-mountain-color),
+    250px 250px 0 50px var(--cl-mountain-color),
+    290px 320px 0 50px var(--cl-mountain-color),
+    320px 400px 0 50px var(--cl-mountain-color);
+  transform: rotate(130deg);
+  animation: mtn var(--cl-mountain-animation) linear infinite;
+}
+
+.hill {
+  position: absolute;
+  right: -900px;
+  bottom: -50px;
+  width: 400px;
+  border-radius: 50%;
+  height: 20px;
+  box-shadow: 
+    0 0 0 50px #4DB6AC,
+    -20px 0 0 20px var(--cl-hill-color),
+    -90px 0 0 50px var(--cl-hill-color),
+    250px 0 0 50px var(--cl-hill-color),
+    290px 0 0 50px var(--cl-hill-color),
+    620px 0 0 50px var(--cl-hill-color);
+  animation: hill calc(var(--cl-mountain-animation) / 5) calc(var(--cl-mountain-animation) / 10) linear infinite;
+}
+
+.tree, .tree:nth-child(2), .tree:nth-child(3) {
+  position: absolute;
+  height: 100px; 
+  width: 35px;
+  bottom: 0;
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAzMiAxMDAiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zMS45NDUgNzQuOTg2TDE3LjM3IDEuMTQ4QTEuNDE2IDEuNDE2IDAgMCAwIDE1Ljk4OCAwYy0uNjczIDAtMS4yNTIuNDgtMS4zODMgMS4xNDhMLjAyNyA3NC45ODZjLS4wODMuNDIuMDI1Ljg1NC4yOTIgMS4xODYuMjY4LjMzMi42NjkuNTIzIDEuMDkxLjUyM2gxMy4xNjdWMTAwaDIuODIxVjc2LjY5NWgxMy4xNjVjLjQyMiAwIC44MjEtLjE5MSAxLjA5LS41MjMuMjctLjMzMS4zNzUtLjc2Ni4yOTItMS4xODZ6Ii8+Cjwvc3ZnPgo=') no-repeat;
+}
+
+.rock {
+  margin-top: -17%;
+  height: 2%; 
+  width: 2%;
+  bottom: -2px;
+  border-radius: 20px;
+  position: absolute;
+  background: var(--cl-rock-color);
+}
+
+.truck, .wheels {
+  transition: all ease;
+  width: 85px;
+  margin-right: -60px;
+  bottom: 0px;
+  right: 50%;
+  position: absolute;
+  background: #eee;
+}
+
+.truck {
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wYmV0YTIgKDJiNzFkMjUsIDIwMTktMTItMDMpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJ0cnVjay5zdmciCiAgIGlkPSJzdmcyNDAwIgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCA4NSA2MCIKICAgaGVpZ2h0PSI2MCIKICAgd2lkdGg9Ijg1Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyNDA2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjQwNCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMjQwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOmN5PSIzMCIKICAgICBpbmtzY2FwZTpjeD0iNDIuNSIKICAgICBpbmtzY2FwZTp6b29tPSI4LjYyMzUyOTQiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlkPSJuYW1lZHZpZXcyNDAyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjkwMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMjM5NiIKICAgICBkPSJNNS4xMzggNTQuMDM5YTMuNzcgMy43NyAwIDAgMS0uMTQ5LS4wMDVsLS44NTkuMDAyQTQuMTM0IDQuMTM0IDAgMCAxIDAgNDkuOTA2VjUuMTk1YTQuMTM1IDQuMTM1IDAgMCAxIDQuMTMtNC4xMzNoNDYuOTczYzIuMjcyIDAgNC4xMjMgMS45NSA0LjEyMyA0LjIyOXY0NC42MTJhNC4xMzMgNC4xMzMgMCAwIDEtNC4xMjcgNC4xMzFIMjkuOTYyYy0xLjA5MS0uMDE5LTMuMjM5LS42OTEtMy43MjctMy4xMjgtMS4wNjctMy45NTctNC43NTUtNi43ODktOC45NDctNi43ODktNC4yOTEgMC04LjA5OCAzLjA0MS05LjA1MSA3LjIyOS0uMjI1IDEuODE3LTEuNzIzIDIuNjkzLTMuMDk5IDIuNjkzek00LjEyNyA0LjIwOGMtLjU5NiAwLTEuMDgzLjM4OS0xLjA4My45ODd2NDQuNzA5YzAgLjU5Ny40ODggMS4wODYgMS4wODYgMS4wODZoMS4wMDRjLjAwNS0uMDQ3LjEyMy0uMjcxLjEzMy0uMzE3IDEuMjY3LTUuNTYyIDYuMzIzLTkuNTk3IDEyLjAyMi05LjU5N2ExMi4zNTYgMTIuMzU2IDAgMCAxIDExLjkxMiA5LjEzN2MuMTUxLjczNC42ODEuNzc3Ljc4NS43NzdoMjEuMTExYy41OTYgMCAxLjA4My0uNDg3IDEuMDgzLTEuMDg0VjUuMjkzYzAtLjU5OC0uNDg1LTEuMDg1LTEuMDgzLTEuMDg1SDQuMTI3ek04NC45MjkgMzUuODI4cy0uMDkzLTIuMDkzLS4yODgtMy4xMThjLS4xNjQtLjg3My0xLjA4Ny0yLjY0NC0xLjA4Ny0yLjY0NGwtNy4yOTktMTMuNTljLS45NTEtMS41Mi0zLjExNS0yLjcwNy00LjU1OC0yLjcwN0g2MC43ODVhMi42MDggMi42MDggMCAwIDAtMi42MDYgMi42MDl2MzMuNTI2YTIuNjA5IDIuNjA5IDAgMCAwIDIuNjA2IDIuNjA5aC42NDNzLjk0OS0uMTIzIDEuMzA0LTEuMzEyYy45ODYtMy45MzMgNC41MTQtNi44NjIgOC43NDktNi44NjIgNC4xNDUgMCA3LjYxMiAyLjgwOCA4LjY4MiA2LjYxMy40NDIgMS42MTIgMi4yMzEgMS41NjEgMi4yMzEgMS41NjFBMi42MDggMi42MDggMCAwIDAgODUgNDkuOTA0bC0uMDcxLTE0LjA3NnptLTYuNjAzLTMuNTExSDY1LjMxMmExLjk5NiAxLjk5NiAwIDAgMS0xLjk4OS0xLjk5VjIwLjE0M2MwLTEuMDk4Ljg5NC0xLjk5IDEuOTg5LTEuOTloNC4zNjVjMi40ODMgMCA0LjExNyAyLjAwOSA0LjYzIDIuOTc4bDUuMDY1IDkuNDM0Yy41MjEuOTYyLjA1MyAxLjc1Mi0xLjA0NiAxLjc1MnoiCiAgICAgZmlsbD0iI0ZGRiIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOm5vbmUiCiAgICAgaWQ9InBhdGgyMzk4IgogICAgIGQ9Ik00LjEyNyA0LjIwOGMtLjU5NiAwLTEuMDgzLjM4OS0xLjA4My45ODd2NDQuNzA5YzAgLjU5Ny40ODggMS4wODYgMS4wODYgMS4wODZoMS4wMDRjLjAwNS0uMDQ3LjEyMy0uMjcxLjEzMy0uMzE3IDEuMjY3LTUuNTYyIDYuMzIzLTkuNTk3IDEyLjAyMi05LjU5N2ExMi4zNTYgMTIuMzU2IDAgMCAxIDExLjkxMiA5LjEzN2MuMTUxLjczNC42ODEuNzc3Ljc4NS43NzdoMjEuMTExYy41OTYgMCAxLjA4My0uNDg3IDEuMDgzLTEuMDg0VjUuMjkzYzAtLjU5OC0uNDg1LTEuMDg1LTEuMDgzLTEuMDg1SDQuMTI3eiIKICAgICBmaWxsPSIjMDA5Njg4IiAvPgo8L3N2Zz4K') no-repeat;
+  background-size: contain;
+  height: 60px;
+}
+
+.truck:before {
+  content: " ";
+  position: absolute;
+  width: 25px;
+  box-shadow:
+    -30px 28px 0 1.5px #fff,
+    -35px 18px 0 1.5px #fff;
+}
+
+.wheels {
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDg1IDE1Ij4KICA8Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxNy4yODkiIGN5PSI4LjQxMyIgcj0iNi41ODciLz4KICA8Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSI3MS40OCIgY3k9IjguNDEyIiByPSI2LjU4NiIvPgo8L3N2Zz4K') no-repeat;
+  height: 15px;
+  margin-bottom: 0;
+}
+
+.tree { 
+  animation: tree calc(var(--cl-mountain-animation) / 6.67) 0.000s linear infinite; 
+}
+
+.tree:nth-child(2) { 
+  animation: tree2 calc(var(--cl-mountain-animation) / 10) 0.150s linear infinite; 
+}
+
+.tree:nth-child(3) { 
+  animation: tree3 calc(var(--cl-mountain-animation) / 2.5) 0.050s linear infinite; 
+}
+
+.rock { 
+  animation: rock calc(var(--cl-mountain-animation) / 5)   -0.530s linear infinite; 
+}
+
+.truck { 
+  animation: truck calc(var(--cl-mountain-animation) / 5)   0.080s ease infinite; 
+}
+
+.wheels { 
+  animation: truck calc(var(--cl-mountain-animation) / 5)   0.001s ease infinite; 
+}
+
+.truck:before { 
+  animation: wind calc(var(--cl-mountain-animation) / 13.3)   0.000s ease infinite; 
+}
+
+
+@keyframes tree {
+  0%   { transform: translate(1350px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes tree2 {
+  0%   { transform: translate(650px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes tree3 {
+  0%   { transform: translate(2750px); }
+  50%  { }
+  100% { transform: translate(-50px); }
+}
+
+@keyframes rock {
+  0%   { right: -200px; }
+  100% { right: 2000px; }
+}
+
+@keyframes truck {
+  0%   { }
+  6%   { transform: translateY(0px); }
+  7%   { transform: translateY(-6px); }
+  9%   { transform: translateY(0px); }
+  10%  { transform: translateY(-1px); }
+  11%  { transform: translateY(0px); }
+  100% { }
+}
+
+@keyframes wind {
+  0%   {  }
+  50%  { transform: translateY(3px) }
+  100% {  }
+}
+
+@keyframes mtn {
+  100% { transform: translateX(-2000px) rotate(130deg); }
+}
+
+@keyframes hill {
+  100% { transform: translateX(-2000px); }
+}
\ No newline at end of file
diff --git a/loaders/moving_truck/loader.html b/loaders/moving_truck/loader.html
new file mode 100644
index 0000000..63a9aee
--- /dev/null
+++ b/loaders/moving_truck/loader.html
@@ -0,0 +1,12 @@
+<div class="custom_loader_wrap">
+  <div class="loop_wrapper">
+    <div class="mountain"></div>
+    <div class="hill"></div>
+    <div class="tree"></div>
+    <div class="tree"></div>
+    <div class="tree"></div>
+    <div class="rock"></div>
+    <div class="truck"></div>
+    <div class="wheels"></div>
+  </div> 
+</div>
\ No newline at end of file
diff --git a/loaders/moving_truck/loader.js b/loaders/moving_truck/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/moving_truck/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/moving_truck/moving_truck.mp4 b/loaders/moving_truck/moving_truck.mp4
new file mode 100644
index 0000000..87ce4dc
Binary files /dev/null and b/loaders/moving_truck/moving_truck.mp4 differ
diff --git a/loaders/rainbow_welcome/README.md b/loaders/rainbow_welcome/README.md
new file mode 100644
index 0000000..7768281
--- /dev/null
+++ b/loaders/rainbow_welcome/README.md
@@ -0,0 +1,5687 @@
+
+# LOADER: rainbow welcome
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_rainbow_welcome.mp4](video_loader_example_rainbow_welcome.mp4)
+
+Original Source on Codepen: [https://codepen.io/toshiya-marukubo/pen/dypmMQq](https://codepen.io/toshiya-marukubo/pen/dypmMQq)
+
+
+## Documentation
+
+This loader uses [loader.html](loader.html), [loader.css](loader.css) and [loader.js](loader.js), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="main_animation_holder" class="whole_animation_wrapper loader_visible">
+<div class="colors7_wrapper" id="inner_loader_content">
+  <div class="background background0"></div>
+  <div class="background background1"></div>
+  <div class="background background2"></div>
+  <div class="background background3"></div>
+  <div class="background background4"></div>
+  <div class="background background5"></div>
+  <div class="background background6"></div>
+  <div class="background background7"></div>
+  <div class="criterion">
+    <!-- you can change text content in here -->
+    <div class="text text0">W</div>
+    <div class="text text1">e</div>
+    <div class="text text2">l</div>
+    <div class="text text3">c</div>
+    <div class="text text4">o</div>
+    <div class="text text5">m</div>
+    <div class="text text6">e</div>
+    <div class="text text7">: )</div>
+    <!-- end of custom text content -->
+    <div class="frame frame0"></div>
+    <div class="frame frame1"></div>
+    <div class="frame frame2"></div>
+    <div class="frame frame3"></div>
+    <div class="frame frame4"></div>
+    <div class="frame frame5"></div>
+    <div class="frame frame6"></div>
+    <div class="frame frame7"></div>
+    <div class="particle particle00"></div>
+    <div class="particle particle01"></div>
+    <div class="particle particle02"></div>
+    <div class="particle particle03"></div>
+    <div class="particle particle04"></div>
+    <div class="particle particle05"></div>
+    <div class="particle particle06"></div>
+    <div class="particle particle07"></div>
+    <div class="particle particle08"></div>
+    <div class="particle particle09"></div>
+    <div class="particle particle010"></div>
+    <div class="particle particle011"></div>
+    <div class="particle particle10"></div>
+    <div class="particle particle11"></div>
+    <div class="particle particle12"></div>
+    <div class="particle particle13"></div>
+    <div class="particle particle14"></div>
+    <div class="particle particle15"></div>
+    <div class="particle particle16"></div>
+    <div class="particle particle17"></div>
+    <div class="particle particle18"></div>
+    <div class="particle particle19"></div>
+    <div class="particle particle110"></div>
+    <div class="particle particle111"></div>
+    <div class="particle particle20"></div>
+    <div class="particle particle21"></div>
+    <div class="particle particle22"></div>
+    <div class="particle particle23"></div>
+    <div class="particle particle24"></div>
+    <div class="particle particle25"></div>
+    <div class="particle particle26"></div>
+    <div class="particle particle27"></div>
+    <div class="particle particle28"></div>
+    <div class="particle particle29"></div>
+    <div class="particle particle210"></div>
+    <div class="particle particle211"></div>
+    <div class="particle particle30"></div>
+    <div class="particle particle31"></div>
+    <div class="particle particle32"></div>
+    <div class="particle particle33"></div>
+    <div class="particle particle34"></div>
+    <div class="particle particle35"></div>
+    <div class="particle particle36"></div>
+    <div class="particle particle37"></div>
+    <div class="particle particle38"></div>
+    <div class="particle particle39"></div>
+    <div class="particle particle310"></div>
+    <div class="particle particle311"></div>
+    <div class="particle particle40"></div>
+    <div class="particle particle41"></div>
+    <div class="particle particle42"></div>
+    <div class="particle particle43"></div>
+    <div class="particle particle44"></div>
+    <div class="particle particle45"></div>
+    <div class="particle particle46"></div>
+    <div class="particle particle47"></div>
+    <div class="particle particle48"></div>
+    <div class="particle particle49"></div>
+    <div class="particle particle410"></div>
+    <div class="particle particle411"></div>
+    <div class="particle particle50"></div>
+    <div class="particle particle51"></div>
+    <div class="particle particle52"></div>
+    <div class="particle particle53"></div>
+    <div class="particle particle54"></div>
+    <div class="particle particle55"></div>
+    <div class="particle particle56"></div>
+    <div class="particle particle57"></div>
+    <div class="particle particle58"></div>
+    <div class="particle particle59"></div>
+    <div class="particle particle510"></div>
+    <div class="particle particle511"></div>
+    <div class="particle particle60"></div>
+    <div class="particle particle61"></div>
+    <div class="particle particle62"></div>
+    <div class="particle particle63"></div>
+    <div class="particle particle64"></div>
+    <div class="particle particle65"></div>
+    <div class="particle particle66"></div>
+    <div class="particle particle67"></div>
+    <div class="particle particle68"></div>
+    <div class="particle particle69"></div>
+    <div class="particle particle610"></div>
+    <div class="particle particle611"></div>
+    <div class="particle particle70"></div>
+    <div class="particle particle71"></div>
+    <div class="particle particle72"></div>
+    <div class="particle particle73"></div>
+    <div class="particle particle74"></div>
+    <div class="particle particle75"></div>
+    <div class="particle particle76"></div>
+    <div class="particle particle77"></div>
+    <div class="particle particle78"></div>
+    <div class="particle particle79"></div>
+    <div class="particle particle710"></div>
+    <div class="particle particle711"></div>
+  </div>
+</div>
+</div>
+
+
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root {
+--loader_anim_main_page_background: #fff; /* main page background */
+--loader_anim_background_color0: #eb4747; /* first vertical bg and particle color  */
+--loader_anim_background_color1: #ebc247; /* 2nd vertical bg  and particle color  */
+--loader_anim_background_color2: #99eb47; /* 3rd vertical bg and particle color  */
+--loader_anim_background_color3: #47eb70; /* 4th vertical bg and particle color  */
+--loader_anim_background_color4: #47ebeb; /* 5th vertical bg and particle color  */
+--loader_anim_background_color5: #4770eb; /* 6th vertical bg and particle color  */
+--loader_anim_background_color6: #9947eb;  /* 7th vertical bg and particle color  */
+--loader_anim_background_color7: #eb47c2;  /* 8th vertical bg and particle color  */
+
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+
+.whole_animation_wrapper.loader_visible {
+  display: block;
+}
+.whole_animation_wrapper {
+  display: none;
+  min-width: 100vw;
+  min-height: 100vh;
+}
+.colors7_wrapper {
+  font-family: 'Montserrat', sans-serif;
+  background: var(--loader_anim_main_page_background);
+  position: relative;
+  overflow: hidden;
+  font-size: 100%;
+  text-align: center;
+  min-width: 100vw;
+  min-height: 100vh;
+}
+.criterion {
+  font-size: 1.6rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  transform: translate(-20px, -20px);
+}
+
+/*
+* background
+*/
+.background {
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  width: 0;
+  -webkit-animation: background-animation 2s ease-in-out 4s 1 normal forwards;
+          animation: background-animation 2s ease-in-out 4s 1 normal forwards;
+}
+.background0 {
+  left: 0%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color0);
+}
+.background1 {
+  left: 12.5%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color1);
+}
+.background2 {
+  left: 25%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color2);
+}
+.background3 {
+  left: 37.5%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color3);
+}
+.background4 {
+  left: 50%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color4);
+}
+.background5 {
+  left: 62.5%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color5);
+}
+.background6 {
+  left: 75%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color6);
+}
+.background7 {
+  left: 87.5%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color7);
+}
+.background8 {
+  left: 100%;
+  height: 100vh;
+  background-color: var(--loader_anim_background_color0);
+}
+/*
+* text
+*/
+.text {
+  position: absolute;
+  width: 40px;
+  line-height: 40px;
+  opacity: 0;
+  overflow: hidden;
+}
+.text::after {
+  z-index: -1;
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 40px;
+}
+.text0 {
+  left: -140px;
+  top: 0;
+  -webkit-animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
+}
+.text0::after {
+  -webkit-animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
+}
+.text1 {
+  left: -100px;
+  top: 0;
+  -webkit-animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
+}
+.text1::after {
+  -webkit-animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
+}
+.text2 {
+  left: -60px;
+  top: 0;
+  -webkit-animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
+}
+.text2::after {
+  -webkit-animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
+}
+.text3 {
+  left: -20px;
+  top: 0;
+  -webkit-animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
+}
+.text3::after {
+  -webkit-animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
+}
+.text4 {
+  left: 20px;
+  top: 0;
+  -webkit-animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
+}
+.text4::after {
+  -webkit-animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
+}
+.text5 {
+  left: 60px;
+  top: 0;
+  -webkit-animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
+}
+.text5::after {
+  -webkit-animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
+}
+.text6 {
+  left: 100px;
+  top: 0;
+  -webkit-animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
+}
+.text6::after {
+  -webkit-animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
+}
+.text7 {
+  left: 140px;
+  top: 0;
+  -webkit-animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
+}
+.text7::after {
+  -webkit-animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
+}
+.text8 {
+  left: 180px;
+  top: 0;
+  -webkit-animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
+          animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
+}
+.text8::after {
+  -webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
+          animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
+}
+@-webkit-keyframes text-animation0 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation0 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation1 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation1 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation2 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation2 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation3 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation3 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation4 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation4 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation5 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation5 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation6 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation6 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation7 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation7 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-animation8 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes text-animation8 {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(3, 3);
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes text-after-animation0 {
+  0% {
+    width: 0px;
+    background-color: #eb4747;
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation0 {
+  0% {
+    width: 0px;
+    background-color: #eb4747;
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation1 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color1);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation1 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color1);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation2 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color2);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation2 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color2);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation3 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color3);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation3 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color3);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation4 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color4);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation4 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color4);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation5 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color5);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation5 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color5);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation6 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color6);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation6 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color6);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation7 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color7);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation7 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color7);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text-after-animation8 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color0);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@keyframes text-after-animation8 {
+  0% {
+    width: 0px;
+    background-color: var(--loader_anim_background_color0);
+    opacity: 1;
+  }
+  50% {
+    width: 40px;
+    opacity: 1;
+  }
+  100% {
+    left: 40px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation0 {
+  0% {
+    left: -140px;
+    opacity: 1;
+  }
+  50% {
+    left: -100px;
+    opacity: 0;
+  }
+  100% {
+    left: -100px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation0 {
+  0% {
+    left: -140px;
+    opacity: 1;
+  }
+  50% {
+    left: -100px;
+    opacity: 0;
+  }
+  100% {
+    left: -100px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation1 {
+  0% {
+    left: -100px;
+    opacity: 1;
+  }
+  50% {
+    left: -60px;
+    opacity: 0;
+  }
+  100% {
+    left: -60px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation1 {
+  0% {
+    left: -100px;
+    opacity: 1;
+  }
+  50% {
+    left: -60px;
+    opacity: 0;
+  }
+  100% {
+    left: -60px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation2 {
+  0% {
+    left: -60px;
+    opacity: 1;
+  }
+  50% {
+    left: -20px;
+    opacity: 0;
+  }
+  100% {
+    left: -20px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation2 {
+  0% {
+    left: -60px;
+    opacity: 1;
+  }
+  50% {
+    left: -20px;
+    opacity: 0;
+  }
+  100% {
+    left: -20px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation3 {
+  0% {
+    left: -20px;
+    opacity: 1;
+  }
+  50% {
+    left: 20px;
+    opacity: 0;
+  }
+  100% {
+    left: 20px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation3 {
+  0% {
+    left: -20px;
+    opacity: 1;
+  }
+  50% {
+    left: 20px;
+    opacity: 0;
+  }
+  100% {
+    left: 20px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation4 {
+  0% {
+    left: 20px;
+    opacity: 1;
+  }
+  50% {
+    left: 60px;
+    opacity: 0;
+  }
+  100% {
+    left: 60px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation4 {
+  0% {
+    left: 20px;
+    opacity: 1;
+  }
+  50% {
+    left: 60px;
+    opacity: 0;
+  }
+  100% {
+    left: 60px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation5 {
+  0% {
+    left: 60px;
+    opacity: 1;
+  }
+  50% {
+    left: 100px;
+    opacity: 0;
+  }
+  100% {
+    left: 100px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation5 {
+  0% {
+    left: 60px;
+    opacity: 1;
+  }
+  50% {
+    left: 100px;
+    opacity: 0;
+  }
+  100% {
+    left: 100px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation6 {
+  0% {
+    left: 100px;
+    opacity: 1;
+  }
+  50% {
+    left: 140px;
+    opacity: 0;
+  }
+  100% {
+    left: 140px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation6 {
+  0% {
+    left: 100px;
+    opacity: 1;
+  }
+  50% {
+    left: 140px;
+    opacity: 0;
+  }
+  100% {
+    left: 140px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes text2-animation7 {
+  0% {
+    left: 140px;
+    opacity: 1;
+    top: 0;
+    transform: scale(1, 1);
+  }
+  50% {
+    left: 180px;
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  65% {
+    top: 0;
+    transform: scale(1, 1);
+  }
+  70% {
+    transform: scale(3, 3) rotate(90deg);
+    top: -30px;
+  }
+  75% {
+    left: 180px;
+    top: 0;
+    opacity: 1;
+    transform: scale(2, 2) rotate(90deg);
+  }
+  85% {
+    left: 180px;
+  }
+  100% {
+    left: 1000px;
+    opacity: 0;
+    transform: scale(2, 2) rotate(90deg);
+  }
+}
+@keyframes text2-animation7 {
+  0% {
+    left: 140px;
+    opacity: 1;
+    top: 0;
+    transform: scale(1, 1);
+  }
+  50% {
+    left: 180px;
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  65% {
+    top: 0;
+    transform: scale(1, 1);
+  }
+  70% {
+    transform: scale(3, 3) rotate(90deg);
+    top: -30px;
+  }
+  75% {
+    left: 180px;
+    top: 0;
+    opacity: 1;
+    transform: scale(2, 2) rotate(90deg);
+  }
+  85% {
+    left: 180px;
+  }
+  100% {
+    left: 1000px;
+    opacity: 0;
+    transform: scale(2, 2) rotate(90deg);
+  }
+}
+@-webkit-keyframes text2-animation8 {
+  0% {
+    left: 180px;
+    opacity: 1;
+  }
+  50% {
+    left: 220px;
+    opacity: 0;
+  }
+  100% {
+    left: 220px;
+    opacity: 0;
+  }
+}
+@keyframes text2-animation8 {
+  0% {
+    left: 180px;
+    opacity: 1;
+  }
+  50% {
+    left: 220px;
+    opacity: 0;
+  }
+  100% {
+    left: 220px;
+    opacity: 0;
+  }
+}
+/*
+* frame
+*/
+.frame {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  opacity: 0;
+}
+.frame0 {
+  left: -140px;
+  top: 0;
+  -webkit-animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
+          animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
+  background-color: #eb4747;
+}
+.frame1 {
+  left: -100px;
+  top: 0;
+  -webkit-animation: frame-animation1 1s ease-in-out 200ms 1 normal forwards;
+          animation: frame-animation1 1s ease-in-out 200ms 1 normal forwards;
+  background-color: #ebc247;
+}
+.frame2 {
+  left: -60px;
+  top: 0;
+  -webkit-animation: frame-animation2 1s ease-in-out 400ms 1 normal forwards;
+          animation: frame-animation2 1s ease-in-out 400ms 1 normal forwards;
+  background-color: #99eb47;
+}
+.frame3 {
+  left: -20px;
+  top: 0;
+  -webkit-animation: frame-animation3 1s ease-in-out 600ms 1 normal forwards;
+          animation: frame-animation3 1s ease-in-out 600ms 1 normal forwards;
+  background-color: #47eb70;
+}
+.frame4 {
+  left: 20px;
+  top: 0;
+  -webkit-animation: frame-animation4 1s ease-in-out 800ms 1 normal forwards;
+          animation: frame-animation4 1s ease-in-out 800ms 1 normal forwards;
+  background-color: #47ebeb;
+}
+.frame5 {
+  left: 60px;
+  top: 0;
+  -webkit-animation: frame-animation5 1s ease-in-out 1000ms 1 normal forwards;
+          animation: frame-animation5 1s ease-in-out 1000ms 1 normal forwards;
+  background-color: #4770eb;
+}
+.frame6 {
+  left: 100px;
+  top: 0;
+  -webkit-animation: frame-animation6 1s ease-in-out 1200ms 1 normal forwards;
+          animation: frame-animation6 1s ease-in-out 1200ms 1 normal forwards;
+  background-color: #9947eb;
+}
+.frame7 {
+  left: 140px;
+  top: 0;
+  -webkit-animation: frame-animation7 1s ease-in-out 1400ms 1 normal forwards;
+          animation: frame-animation7 1s ease-in-out 1400ms 1 normal forwards;
+  background-color: #eb47c2;
+}
+.frame8 {
+  left: 180px;
+  top: 0;
+  -webkit-animation: frame-animation8 1s ease-in-out 1600ms 1 normal forwards;
+          animation: frame-animation8 1s ease-in-out 1600ms 1 normal forwards;
+  background-color: #eb4747;
+}
+@-webkit-keyframes frame-animation0 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation0 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation1 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation1 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation2 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation2 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation3 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation3 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation4 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation4 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation5 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation5 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation6 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation6 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation7 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation7 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes frame-animation8 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+@keyframes frame-animation8 {
+  0% {
+    transform: translateY(-1000px);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+/*
+* particle
+*/
+.particle {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.particle00 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation00 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation00 1s ease-in-out 1s 1 normal forwards;
+}
+.particle01 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation01 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation01 1s ease-in-out 1s 1 normal forwards;
+}
+.particle02 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation02 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation02 1s ease-in-out 1s 1 normal forwards;
+}
+.particle03 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation03 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation03 1s ease-in-out 1s 1 normal forwards;
+}
+.particle04 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation04 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation04 1s ease-in-out 1s 1 normal forwards;
+}
+.particle05 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation05 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation05 1s ease-in-out 1s 1 normal forwards;
+}
+.particle06 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation06 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation06 1s ease-in-out 1s 1 normal forwards;
+}
+.particle07 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation07 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation07 1s ease-in-out 1s 1 normal forwards;
+}
+.particle08 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation08 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation08 1s ease-in-out 1s 1 normal forwards;
+}
+.particle09 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation09 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation09 1s ease-in-out 1s 1 normal forwards;
+}
+.particle010 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation010 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation010 1s ease-in-out 1s 1 normal forwards;
+}
+.particle011 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0)
+  -webkit-animation: particle-animation011 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation011 1s ease-in-out 1s 1 normal forwards;
+}
+.particle012 {
+  left: -140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation012 1s ease-in-out 1s 1 normal forwards;
+          animation: particle-animation012 1s ease-in-out 1s 1 normal forwards;
+}
+.particle10 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation10 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation10 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle11 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation11 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation11 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle12 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation12 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation12 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle13 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation13 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation13 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle14 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation14 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation14 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle15 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation15 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation15 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle16 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation16 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation16 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle17 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation17 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation17 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle18 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation18 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation18 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle19 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation19 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation19 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle110 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation110 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation110 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle111 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation111 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation111 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle112 {
+  left: -100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color1);
+  -webkit-animation: particle-animation112 1s ease-in-out 1.2s 1 normal forwards;
+          animation: particle-animation112 1s ease-in-out 1.2s 1 normal forwards;
+}
+.particle20 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation20 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation20 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle21 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation21 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation21 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle22 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation22 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation22 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle23 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation23 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation23 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle24 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation24 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation24 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle25 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation25 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation25 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle26 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation26 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation26 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle27 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation27 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation27 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle28 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation28 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation28 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle29 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation29 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation29 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle210 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation210 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation210 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle211 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation211 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation211 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle212 {
+  left: -60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color2);
+  -webkit-animation: particle-animation212 1s ease-in-out 1.4s 1 normal forwards;
+          animation: particle-animation212 1s ease-in-out 1.4s 1 normal forwards;
+}
+.particle30 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation30 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation30 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle31 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation31 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation31 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle32 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation32 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation32 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle33 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation33 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation33 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle34 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation34 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation34 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle35 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation35 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation35 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle36 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation36 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation36 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle37 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation37 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation37 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle38 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation38 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation38 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle39 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation39 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation39 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle310 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation310 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation310 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle311 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation311 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation311 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle312 {
+  left: -20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color3);
+  -webkit-animation: particle-animation312 1s ease-in-out 1.6s 1 normal forwards;
+          animation: particle-animation312 1s ease-in-out 1.6s 1 normal forwards;
+}
+.particle40 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation40 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation40 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle41 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation41 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation41 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle42 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation42 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation42 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle43 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation43 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation43 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle44 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation44 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation44 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle45 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation45 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation45 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle46 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation46 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation46 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle47 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation47 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation47 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle48 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation48 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation48 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle49 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation49 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation49 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle410 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation410 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation410 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle411 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation411 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation411 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle412 {
+  left: 20px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color4);
+  -webkit-animation: particle-animation412 1s ease-in-out 1.8s 1 normal forwards;
+          animation: particle-animation412 1s ease-in-out 1.8s 1 normal forwards;
+}
+.particle50 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation50 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation50 1s ease-in-out 2s 1 normal forwards;
+}
+.particle51 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation51 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation51 1s ease-in-out 2s 1 normal forwards;
+}
+.particle52 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation52 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation52 1s ease-in-out 2s 1 normal forwards;
+}
+.particle53 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation53 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation53 1s ease-in-out 2s 1 normal forwards;
+}
+.particle54 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation54 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation54 1s ease-in-out 2s 1 normal forwards;
+}
+.particle55 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation55 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation55 1s ease-in-out 2s 1 normal forwards;
+}
+.particle56 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation56 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation56 1s ease-in-out 2s 1 normal forwards;
+}
+.particle57 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation57 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation57 1s ease-in-out 2s 1 normal forwards;
+}
+.particle58 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation58 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation58 1s ease-in-out 2s 1 normal forwards;
+}
+.particle59 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation59 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation59 1s ease-in-out 2s 1 normal forwards;
+}
+.particle510 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation510 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation510 1s ease-in-out 2s 1 normal forwards;
+}
+.particle511 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation511 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation511 1s ease-in-out 2s 1 normal forwards;
+}
+.particle512 {
+  left: 60px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color5);
+  -webkit-animation: particle-animation512 1s ease-in-out 2s 1 normal forwards;
+          animation: particle-animation512 1s ease-in-out 2s 1 normal forwards;
+}
+.particle60 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation60 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation60 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle61 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation61 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation61 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle62 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation62 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation62 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle63 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation63 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation63 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle64 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation64 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation64 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle65 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation65 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation65 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle66 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation66 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation66 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle67 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation67 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation67 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle68 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation68 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation68 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle69 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation69 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation69 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle610 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation610 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation610 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle611 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation611 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation611 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle612 {
+  left: 100px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color6);
+  -webkit-animation: particle-animation612 1s ease-in-out 2.2s 1 normal forwards;
+          animation: particle-animation612 1s ease-in-out 2.2s 1 normal forwards;
+}
+.particle70 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation70 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation70 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle71 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation71 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation71 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle72 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation72 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation72 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle73 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation73 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation73 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle74 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation74 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation74 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle75 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation75 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation75 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle76 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation76 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation76 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle77 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation77 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation77 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle78 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation78 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation78 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle79 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation79 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation79 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle710 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation710 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation710 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle711 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation711 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation711 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle712 {
+  left: 140px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color7);
+  -webkit-animation: particle-animation712 1s ease-in-out 2.4s 1 normal forwards;
+          animation: particle-animation712 1s ease-in-out 2.4s 1 normal forwards;
+}
+.particle80 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation80 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation80 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle81 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation81 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation81 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle82 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation82 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation82 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle83 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation83 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation83 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle84 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation84 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation84 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle85 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation85 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation85 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle86 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation86 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation86 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle87 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation87 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation87 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle88 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation88 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation88 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle89 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation89 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation89 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle810 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation810 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation810 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle811 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation811 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation811 1s ease-in-out 2.6s 1 normal forwards;
+}
+.particle812 {
+  left: 180px;
+  opacity: 0;
+  background-color: var(--loader_anim_background_color0);
+  -webkit-animation: particle-animation812 1s ease-in-out 2.6s 1 normal forwards;
+          animation: particle-animation812 1s ease-in-out 2.6s 1 normal forwards;
+}
+@-webkit-keyframes particle-animation00 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation00 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation01 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -53.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation01 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -53.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation02 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -90px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation02 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -90px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation03 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -140px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation03 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -140px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation04 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -190px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation04 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -190px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation05 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -226.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation05 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -226.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation06 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation06 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation07 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -226.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation07 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -226.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation08 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -190px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation08 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -190px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation09 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -140px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation09 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -140px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation010 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -90px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation010 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -90px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation011 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -53.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation011 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -53.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation012 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation012 {
+  0% {
+    left: -140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation10 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation10 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation11 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -13.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation11 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -13.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation12 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -50px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation12 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -50px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation13 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -100px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation13 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -100px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation14 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -150px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation14 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -150px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation15 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -186.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation15 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -186.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation16 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation16 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation17 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -186.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation17 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -186.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation18 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -150px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation18 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -150px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation19 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -100px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation19 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -100px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation110 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -50px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation110 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -50px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation111 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -13.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation111 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -13.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation112 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation112 {
+  0% {
+    left: -100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation20 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation20 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation21 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 26.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation21 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 26.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation22 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -10px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation22 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -10px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation23 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -60px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation23 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -60px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation24 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -110px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation24 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -110px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation25 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -146.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation25 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -146.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation26 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation26 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation27 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -146.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation27 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -146.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation28 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -110px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation28 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -110px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation29 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -60px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation29 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -60px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation210 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -10px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation210 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -10px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation211 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 26.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation211 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 26.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation212 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation212 {
+  0% {
+    left: -60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation30 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation30 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation31 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 66.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation31 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 66.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation32 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 30px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation32 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 30px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation33 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -20px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation33 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -20px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation34 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -70px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation34 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -70px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation35 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -106.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation35 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -106.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation36 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation36 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation37 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -106.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation37 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -106.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation38 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -70px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation38 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -70px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation39 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -20px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation39 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -20px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation310 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 30px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation310 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 30px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation311 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 66.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation311 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 66.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation312 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation312 {
+  0% {
+    left: -20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation40 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation40 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation41 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 106.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation41 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 106.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation42 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 70px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation42 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 70px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation43 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 20px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation43 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 20px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation44 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -30px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation44 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -30px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation45 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -66.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation45 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -66.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation46 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation46 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation47 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -66.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation47 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -66.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation48 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -30px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation48 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -30px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation49 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 20px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation49 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 20px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation410 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 70px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation410 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 70px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation411 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 106.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation411 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 106.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation412 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation412 {
+  0% {
+    left: 20px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 120px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation50 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation50 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation51 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 146.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation51 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 146.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation52 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 110px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation52 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 110px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation53 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 60px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation53 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 60px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation54 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 10px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation54 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 10px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation55 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -26.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation55 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -26.60254040000001px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation56 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation56 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation57 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -26.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation57 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: -26.60254040000001px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation58 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 10px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation58 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 10px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation59 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 60px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation59 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 60px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation510 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 110px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation510 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 110px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation511 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 146.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation511 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 146.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation512 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation512 {
+  0% {
+    left: 60px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 160px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation60 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation60 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation61 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 186.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation61 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 186.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation62 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 150px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation62 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 150px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation63 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 100px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation63 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 100px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation64 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 50px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation64 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 50px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation65 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 13.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation65 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 13.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation66 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation66 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation67 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 13.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation67 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 13.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation68 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 50px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation68 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 50px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation69 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 100px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation69 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 100px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation610 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 150px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation610 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 150px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation611 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 186.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation611 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 186.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation612 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation612 {
+  0% {
+    left: 100px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 200px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation70 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation70 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation71 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 226.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation71 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 226.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation72 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 190px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation72 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 190px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation73 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 140px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation73 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 140px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation74 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 90px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation74 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 90px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation75 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 53.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation75 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 53.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation76 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation76 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 40px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation77 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 53.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation77 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 53.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation78 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 90px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation78 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 90px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation79 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 140px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation79 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 140px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation710 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 190px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation710 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 190px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation711 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 226.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation711 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 226.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation712 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation712 {
+  0% {
+    left: 140px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 240px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation80 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 280px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation80 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 280px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation81 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 266.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation81 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 266.6025404px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation82 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 230px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation82 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 230px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation83 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 180px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation83 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 180px;
+    top: 100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation84 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 130px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation84 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 130px;
+    top: 86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation85 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 93.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation85 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 93.39745959999999px;
+    top: 50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation86 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation86 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 80px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation87 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 93.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation87 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 93.39745959999999px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation88 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 130px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation88 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 130px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation89 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 180px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation89 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 180px;
+    top: -100px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation810 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 230px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation810 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 230px;
+    top: -86.60254040000001px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation811 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 266.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation811 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 266.6025404px;
+    top: -50px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes particle-animation812 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 280px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@keyframes particle-animation812 {
+  0% {
+    left: 180px;
+    top: 0;
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+  100% {
+    left: 280px;
+    top: 0px;
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+}
+@-webkit-keyframes background-animation {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 12.5%;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    width: 25%;
+  }
+}
+@keyframes background-animation {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 12.5%;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    width: 25%;
+  }
+}
+
+
+
+
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('main_animation_holder').classList.remove('visible_loader');
+})();
+
+
+```
+
+
+### Step Four
+
+Copy below **JS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section.
+
+```js
+
+var animation_reset_counter = 0;
+const animated_colorful_loader = document.querySelector('.text7');
+
+animated_colorful_loader.onanimationend = () => {
+   animation_reset_counter++;
+   if(animation_reset_counter >= 3){
+    //console.log('Animation ended');
+    document.querySelector('#inner_loader_content').style.display = "none";
+    animation_reset_counter = 0;
+     setTimeout(function(){ reset_color_animation(); }, 500);
+  }
+};
+function reset_color_animation(){
+	document.querySelector('#inner_loader_content').style.display = "flex";
+}
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root {
+--loader_anim_main_page_background: #fff; /* main page background */
+--loader_anim_background_color0: #eb4747; /* first vertical bg and particle color  */
+--loader_anim_background_color1: #ebc247; /* 2nd vertical bg  and particle color  */
+--loader_anim_background_color2: #99eb47; /* 3rd vertical bg and particle color  */
+--loader_anim_background_color3: #47eb70; /* 4th vertical bg and particle color  */
+--loader_anim_background_color4: #47ebeb; /* 5th vertical bg and particle color  */
+--loader_anim_background_color5: #4770eb; /* 6th vertical bg and particle color  */
+--loader_anim_background_color6: #9947eb;  /* 7th vertical bg and particle color  */
+--loader_anim_background_color7: #eb47c2;  /* 8th vertical bg and particle color  */
+}
+
+
+```
+
diff --git a/loaders/rainbow_welcome/loader.css b/loaders/rainbow_welcome/loader.css
new file mode 100644
index 0000000..5ce9573
--- /dev/null
+++ b/loaders/rainbow_welcome/loader.css
@@ -0,0 +1,5453 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+** or, if you require a completely different custom loader,
+** you can always contact us at support@awe.media
+*/
+:root {
+  --loader_anim_main_page_background: #fff; /* main page background */
+  --loader_anim_background_color0: #eb4747; /* first vertical bg and particle color  */
+  --loader_anim_background_color1: #ebc247; /* 2nd vertical bg  and particle color  */
+  --loader_anim_background_color2: #99eb47; /* 3rd vertical bg and particle color  */
+  --loader_anim_background_color3: #47eb70; /* 4th vertical bg and particle color  */
+  --loader_anim_background_color4: #47ebeb; /* 5th vertical bg and particle color  */
+  --loader_anim_background_color5: #4770eb; /* 6th vertical bg and particle color  */
+  --loader_anim_background_color6: #9947eb;  /* 7th vertical bg and particle color  */
+  --loader_anim_background_color7: #eb47c2;  /* 8th vertical bg and particle color  */
+  
+  }
+  
+  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+  
+  .whole_animation_wrapper.loader_visible {
+    display: block;
+  }
+  .whole_animation_wrapper {
+    display: none;
+    min-width: 100vw;
+    min-height: 100vh;
+  }
+  .colors7_wrapper {
+    font-family: 'Montserrat', sans-serif;
+    background: var(--loader_anim_main_page_background);
+    position: relative;
+    overflow: hidden;
+    font-size: 100%;
+    text-align: center;
+    min-width: 100vw;
+    min-height: 100vh;
+  }
+  .criterion {
+    font-size: 1.6rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 0;
+    width: 0;
+    transform: translate(-20px, -20px);
+  }
+  
+  /*
+  * background
+  */
+  .background {
+    position: absolute;
+    top: 0;
+    height: 100vh;
+    width: 0;
+    -webkit-animation: background-animation 2s ease-in-out 4s 1 normal forwards;
+            animation: background-animation 2s ease-in-out 4s 1 normal forwards;
+  }
+  .background0 {
+    left: 0%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color0);
+  }
+  .background1 {
+    left: 12.5%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color1);
+  }
+  .background2 {
+    left: 25%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color2);
+  }
+  .background3 {
+    left: 37.5%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color3);
+  }
+  .background4 {
+    left: 50%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color4);
+  }
+  .background5 {
+    left: 62.5%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color5);
+  }
+  .background6 {
+    left: 75%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color6);
+  }
+  .background7 {
+    left: 87.5%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color7);
+  }
+  .background8 {
+    left: 100%;
+    height: 100vh;
+    background-color: var(--loader_anim_background_color0);
+  }
+  /*
+  * text
+  */
+  .text {
+    position: absolute;
+    width: 40px;
+    line-height: 40px;
+    opacity: 0;
+    overflow: hidden;
+  }
+  .text::after {
+    z-index: -1;
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 40px;
+  }
+  .text0 {
+    left: -140px;
+    top: 0;
+    -webkit-animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text0::after {
+    -webkit-animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text1 {
+    left: -100px;
+    top: 0;
+    -webkit-animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text1::after {
+    -webkit-animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text2 {
+    left: -60px;
+    top: 0;
+    -webkit-animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text2::after {
+    -webkit-animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text3 {
+    left: -20px;
+    top: 0;
+    -webkit-animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text3::after {
+    -webkit-animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text4 {
+    left: 20px;
+    top: 0;
+    -webkit-animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text4::after {
+    -webkit-animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text5 {
+    left: 60px;
+    top: 0;
+    -webkit-animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text5::after {
+    -webkit-animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text6 {
+    left: 100px;
+    top: 0;
+    -webkit-animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text6::after {
+    -webkit-animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text7 {
+    left: 140px;
+    top: 0;
+    -webkit-animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text7::after {
+    -webkit-animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
+  }
+  .text8 {
+    left: 180px;
+    top: 0;
+    -webkit-animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
+            animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
+  }
+  .text8::after {
+    -webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
+            animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
+  }
+  @-webkit-keyframes text-animation0 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation0 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation1 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation1 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation2 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation2 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation3 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation3 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation4 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation4 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation5 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation5 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation6 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation6 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation7 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation7 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-animation8 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @keyframes text-animation8 {
+    0% {
+      transform: scale(0, 0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(3, 3);
+    }
+    100% {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes text-after-animation0 {
+    0% {
+      width: 0px;
+      background-color: #eb4747;
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation0 {
+    0% {
+      width: 0px;
+      background-color: #eb4747;
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation1 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color1);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation1 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color1);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation2 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color2);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation2 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color2);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation3 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color3);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation3 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color3);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation4 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color4);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation4 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color4);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation5 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color5);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation5 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color5);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation6 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color6);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation6 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color6);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation7 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color7);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation7 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color7);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text-after-animation8 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color0);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @keyframes text-after-animation8 {
+    0% {
+      width: 0px;
+      background-color: var(--loader_anim_background_color0);
+      opacity: 1;
+    }
+    50% {
+      width: 40px;
+      opacity: 1;
+    }
+    100% {
+      left: 40px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation0 {
+    0% {
+      left: -140px;
+      opacity: 1;
+    }
+    50% {
+      left: -100px;
+      opacity: 0;
+    }
+    100% {
+      left: -100px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation0 {
+    0% {
+      left: -140px;
+      opacity: 1;
+    }
+    50% {
+      left: -100px;
+      opacity: 0;
+    }
+    100% {
+      left: -100px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation1 {
+    0% {
+      left: -100px;
+      opacity: 1;
+    }
+    50% {
+      left: -60px;
+      opacity: 0;
+    }
+    100% {
+      left: -60px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation1 {
+    0% {
+      left: -100px;
+      opacity: 1;
+    }
+    50% {
+      left: -60px;
+      opacity: 0;
+    }
+    100% {
+      left: -60px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation2 {
+    0% {
+      left: -60px;
+      opacity: 1;
+    }
+    50% {
+      left: -20px;
+      opacity: 0;
+    }
+    100% {
+      left: -20px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation2 {
+    0% {
+      left: -60px;
+      opacity: 1;
+    }
+    50% {
+      left: -20px;
+      opacity: 0;
+    }
+    100% {
+      left: -20px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation3 {
+    0% {
+      left: -20px;
+      opacity: 1;
+    }
+    50% {
+      left: 20px;
+      opacity: 0;
+    }
+    100% {
+      left: 20px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation3 {
+    0% {
+      left: -20px;
+      opacity: 1;
+    }
+    50% {
+      left: 20px;
+      opacity: 0;
+    }
+    100% {
+      left: 20px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation4 {
+    0% {
+      left: 20px;
+      opacity: 1;
+    }
+    50% {
+      left: 60px;
+      opacity: 0;
+    }
+    100% {
+      left: 60px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation4 {
+    0% {
+      left: 20px;
+      opacity: 1;
+    }
+    50% {
+      left: 60px;
+      opacity: 0;
+    }
+    100% {
+      left: 60px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation5 {
+    0% {
+      left: 60px;
+      opacity: 1;
+    }
+    50% {
+      left: 100px;
+      opacity: 0;
+    }
+    100% {
+      left: 100px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation5 {
+    0% {
+      left: 60px;
+      opacity: 1;
+    }
+    50% {
+      left: 100px;
+      opacity: 0;
+    }
+    100% {
+      left: 100px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation6 {
+    0% {
+      left: 100px;
+      opacity: 1;
+    }
+    50% {
+      left: 140px;
+      opacity: 0;
+    }
+    100% {
+      left: 140px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation6 {
+    0% {
+      left: 100px;
+      opacity: 1;
+    }
+    50% {
+      left: 140px;
+      opacity: 0;
+    }
+    100% {
+      left: 140px;
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes text2-animation7 {
+    0% {
+      left: 140px;
+      opacity: 1;
+      top: 0;
+      transform: scale(1, 1);
+    }
+    50% {
+      left: 180px;
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+    65% {
+      top: 0;
+      transform: scale(1, 1);
+    }
+    70% {
+      transform: scale(3, 3) rotate(90deg);
+      top: -30px;
+    }
+    75% {
+      left: 180px;
+      top: 0;
+      opacity: 1;
+      transform: scale(2, 2) rotate(90deg);
+    }
+    85% {
+      left: 180px;
+    }
+    100% {
+      left: 1000px;
+      opacity: 0;
+      transform: scale(2, 2) rotate(90deg);
+    }
+  }
+  @keyframes text2-animation7 {
+    0% {
+      left: 140px;
+      opacity: 1;
+      top: 0;
+      transform: scale(1, 1);
+    }
+    50% {
+      left: 180px;
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+    65% {
+      top: 0;
+      transform: scale(1, 1);
+    }
+    70% {
+      transform: scale(3, 3) rotate(90deg);
+      top: -30px;
+    }
+    75% {
+      left: 180px;
+      top: 0;
+      opacity: 1;
+      transform: scale(2, 2) rotate(90deg);
+    }
+    85% {
+      left: 180px;
+    }
+    100% {
+      left: 1000px;
+      opacity: 0;
+      transform: scale(2, 2) rotate(90deg);
+    }
+  }
+  @-webkit-keyframes text2-animation8 {
+    0% {
+      left: 180px;
+      opacity: 1;
+    }
+    50% {
+      left: 220px;
+      opacity: 0;
+    }
+    100% {
+      left: 220px;
+      opacity: 0;
+    }
+  }
+  @keyframes text2-animation8 {
+    0% {
+      left: 180px;
+      opacity: 1;
+    }
+    50% {
+      left: 220px;
+      opacity: 0;
+    }
+    100% {
+      left: 220px;
+      opacity: 0;
+    }
+  }
+  /*
+  * frame
+  */
+  .frame {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    opacity: 0;
+  }
+  .frame0 {
+    left: -140px;
+    top: 0;
+    -webkit-animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
+            animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
+    background-color: #eb4747;
+  }
+  .frame1 {
+    left: -100px;
+    top: 0;
+    -webkit-animation: frame-animation1 1s ease-in-out 200ms 1 normal forwards;
+            animation: frame-animation1 1s ease-in-out 200ms 1 normal forwards;
+    background-color: #ebc247;
+  }
+  .frame2 {
+    left: -60px;
+    top: 0;
+    -webkit-animation: frame-animation2 1s ease-in-out 400ms 1 normal forwards;
+            animation: frame-animation2 1s ease-in-out 400ms 1 normal forwards;
+    background-color: #99eb47;
+  }
+  .frame3 {
+    left: -20px;
+    top: 0;
+    -webkit-animation: frame-animation3 1s ease-in-out 600ms 1 normal forwards;
+            animation: frame-animation3 1s ease-in-out 600ms 1 normal forwards;
+    background-color: #47eb70;
+  }
+  .frame4 {
+    left: 20px;
+    top: 0;
+    -webkit-animation: frame-animation4 1s ease-in-out 800ms 1 normal forwards;
+            animation: frame-animation4 1s ease-in-out 800ms 1 normal forwards;
+    background-color: #47ebeb;
+  }
+  .frame5 {
+    left: 60px;
+    top: 0;
+    -webkit-animation: frame-animation5 1s ease-in-out 1000ms 1 normal forwards;
+            animation: frame-animation5 1s ease-in-out 1000ms 1 normal forwards;
+    background-color: #4770eb;
+  }
+  .frame6 {
+    left: 100px;
+    top: 0;
+    -webkit-animation: frame-animation6 1s ease-in-out 1200ms 1 normal forwards;
+            animation: frame-animation6 1s ease-in-out 1200ms 1 normal forwards;
+    background-color: #9947eb;
+  }
+  .frame7 {
+    left: 140px;
+    top: 0;
+    -webkit-animation: frame-animation7 1s ease-in-out 1400ms 1 normal forwards;
+            animation: frame-animation7 1s ease-in-out 1400ms 1 normal forwards;
+    background-color: #eb47c2;
+  }
+  .frame8 {
+    left: 180px;
+    top: 0;
+    -webkit-animation: frame-animation8 1s ease-in-out 1600ms 1 normal forwards;
+            animation: frame-animation8 1s ease-in-out 1600ms 1 normal forwards;
+    background-color: #eb4747;
+  }
+  @-webkit-keyframes frame-animation0 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation0 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation1 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation1 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation2 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation2 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation3 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation3 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation4 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation4 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation5 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation5 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation6 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation6 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation7 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation7 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes frame-animation8 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  @keyframes frame-animation8 {
+    0% {
+      transform: translateY(-1000px);
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+  }
+  /*
+  * particle
+  */
+  .particle {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+  .particle00 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation00 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation00 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle01 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation01 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation01 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle02 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation02 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation02 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle03 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation03 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation03 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle04 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation04 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation04 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle05 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation05 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation05 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle06 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation06 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation06 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle07 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation07 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation07 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle08 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation08 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation08 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle09 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation09 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation09 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle010 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation010 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation010 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle011 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0)
+    -webkit-animation: particle-animation011 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation011 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle012 {
+    left: -140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation012 1s ease-in-out 1s 1 normal forwards;
+            animation: particle-animation012 1s ease-in-out 1s 1 normal forwards;
+  }
+  .particle10 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation10 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation10 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle11 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation11 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation11 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle12 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation12 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation12 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle13 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation13 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation13 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle14 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation14 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation14 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle15 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation15 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation15 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle16 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation16 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation16 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle17 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation17 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation17 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle18 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation18 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation18 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle19 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation19 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation19 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle110 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation110 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation110 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle111 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation111 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation111 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle112 {
+    left: -100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color1);
+    -webkit-animation: particle-animation112 1s ease-in-out 1.2s 1 normal forwards;
+            animation: particle-animation112 1s ease-in-out 1.2s 1 normal forwards;
+  }
+  .particle20 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation20 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation20 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle21 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation21 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation21 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle22 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation22 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation22 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle23 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation23 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation23 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle24 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation24 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation24 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle25 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation25 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation25 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle26 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation26 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation26 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle27 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation27 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation27 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle28 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation28 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation28 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle29 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation29 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation29 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle210 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation210 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation210 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle211 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation211 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation211 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle212 {
+    left: -60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color2);
+    -webkit-animation: particle-animation212 1s ease-in-out 1.4s 1 normal forwards;
+            animation: particle-animation212 1s ease-in-out 1.4s 1 normal forwards;
+  }
+  .particle30 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation30 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation30 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle31 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation31 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation31 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle32 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation32 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation32 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle33 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation33 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation33 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle34 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation34 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation34 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle35 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation35 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation35 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle36 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation36 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation36 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle37 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation37 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation37 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle38 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation38 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation38 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle39 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation39 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation39 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle310 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation310 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation310 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle311 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation311 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation311 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle312 {
+    left: -20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color3);
+    -webkit-animation: particle-animation312 1s ease-in-out 1.6s 1 normal forwards;
+            animation: particle-animation312 1s ease-in-out 1.6s 1 normal forwards;
+  }
+  .particle40 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation40 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation40 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle41 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation41 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation41 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle42 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation42 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation42 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle43 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation43 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation43 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle44 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation44 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation44 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle45 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation45 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation45 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle46 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation46 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation46 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle47 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation47 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation47 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle48 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation48 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation48 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle49 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation49 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation49 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle410 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation410 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation410 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle411 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation411 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation411 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle412 {
+    left: 20px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color4);
+    -webkit-animation: particle-animation412 1s ease-in-out 1.8s 1 normal forwards;
+            animation: particle-animation412 1s ease-in-out 1.8s 1 normal forwards;
+  }
+  .particle50 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation50 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation50 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle51 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation51 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation51 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle52 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation52 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation52 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle53 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation53 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation53 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle54 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation54 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation54 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle55 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation55 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation55 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle56 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation56 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation56 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle57 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation57 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation57 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle58 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation58 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation58 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle59 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation59 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation59 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle510 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation510 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation510 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle511 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation511 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation511 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle512 {
+    left: 60px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color5);
+    -webkit-animation: particle-animation512 1s ease-in-out 2s 1 normal forwards;
+            animation: particle-animation512 1s ease-in-out 2s 1 normal forwards;
+  }
+  .particle60 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation60 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation60 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle61 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation61 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation61 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle62 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation62 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation62 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle63 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation63 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation63 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle64 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation64 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation64 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle65 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation65 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation65 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle66 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation66 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation66 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle67 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation67 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation67 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle68 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation68 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation68 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle69 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation69 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation69 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle610 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation610 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation610 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle611 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation611 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation611 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle612 {
+    left: 100px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color6);
+    -webkit-animation: particle-animation612 1s ease-in-out 2.2s 1 normal forwards;
+            animation: particle-animation612 1s ease-in-out 2.2s 1 normal forwards;
+  }
+  .particle70 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation70 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation70 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle71 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation71 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation71 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle72 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation72 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation72 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle73 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation73 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation73 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle74 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation74 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation74 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle75 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation75 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation75 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle76 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation76 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation76 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle77 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation77 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation77 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle78 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation78 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation78 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle79 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation79 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation79 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle710 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation710 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation710 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle711 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation711 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation711 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle712 {
+    left: 140px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color7);
+    -webkit-animation: particle-animation712 1s ease-in-out 2.4s 1 normal forwards;
+            animation: particle-animation712 1s ease-in-out 2.4s 1 normal forwards;
+  }
+  .particle80 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation80 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation80 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle81 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation81 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation81 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle82 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation82 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation82 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle83 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation83 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation83 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle84 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation84 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation84 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle85 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation85 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation85 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle86 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation86 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation86 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle87 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation87 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation87 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle88 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation88 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation88 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle89 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation89 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation89 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle810 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation810 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation810 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle811 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation811 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation811 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  .particle812 {
+    left: 180px;
+    opacity: 0;
+    background-color: var(--loader_anim_background_color0);
+    -webkit-animation: particle-animation812 1s ease-in-out 2.6s 1 normal forwards;
+            animation: particle-animation812 1s ease-in-out 2.6s 1 normal forwards;
+  }
+  @-webkit-keyframes particle-animation00 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation00 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation01 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -53.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation01 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -53.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation02 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -90px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation02 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -90px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation03 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -140px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation03 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -140px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation04 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -190px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation04 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -190px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation05 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -226.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation05 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -226.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation06 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation06 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation07 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -226.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation07 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -226.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation08 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -190px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation08 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -190px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation09 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -140px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation09 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -140px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation010 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -90px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation010 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -90px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation011 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -53.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation011 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -53.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation012 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation012 {
+    0% {
+      left: -140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation10 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation10 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation11 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -13.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation11 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -13.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation12 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -50px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation12 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -50px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation13 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -100px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation13 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -100px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation14 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -150px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation14 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -150px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation15 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -186.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation15 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -186.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation16 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation16 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation17 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -186.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation17 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -186.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation18 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -150px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation18 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -150px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation19 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -100px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation19 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -100px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation110 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -50px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation110 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -50px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation111 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -13.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation111 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -13.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation112 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation112 {
+    0% {
+      left: -100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation20 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation20 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation21 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 26.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation21 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 26.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation22 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -10px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation22 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -10px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation23 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -60px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation23 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -60px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation24 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -110px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation24 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -110px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation25 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -146.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation25 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -146.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation26 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation26 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation27 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -146.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation27 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -146.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation28 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -110px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation28 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -110px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation29 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -60px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation29 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -60px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation210 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -10px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation210 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -10px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation211 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 26.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation211 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 26.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation212 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation212 {
+    0% {
+      left: -60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation30 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation30 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation31 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 66.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation31 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 66.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation32 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 30px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation32 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 30px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation33 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -20px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation33 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -20px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation34 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -70px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation34 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -70px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation35 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -106.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation35 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -106.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation36 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation36 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation37 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -106.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation37 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -106.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation38 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -70px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation38 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -70px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation39 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -20px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation39 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -20px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation310 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 30px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation310 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 30px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation311 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 66.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation311 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 66.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation312 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation312 {
+    0% {
+      left: -20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation40 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation40 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation41 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 106.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation41 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 106.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation42 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 70px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation42 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 70px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation43 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 20px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation43 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 20px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation44 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -30px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation44 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -30px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation45 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -66.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation45 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -66.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation46 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation46 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation47 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -66.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation47 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -66.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation48 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -30px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation48 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -30px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation49 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 20px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation49 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 20px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation410 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 70px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation410 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 70px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation411 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 106.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation411 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 106.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation412 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation412 {
+    0% {
+      left: 20px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 120px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation50 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation50 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation51 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 146.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation51 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 146.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation52 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 110px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation52 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 110px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation53 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 60px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation53 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 60px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation54 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 10px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation54 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 10px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation55 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -26.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation55 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -26.60254040000001px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation56 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation56 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation57 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -26.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation57 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: -26.60254040000001px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation58 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 10px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation58 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 10px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation59 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 60px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation59 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 60px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation510 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 110px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation510 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 110px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation511 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 146.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation511 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 146.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation512 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation512 {
+    0% {
+      left: 60px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 160px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation60 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation60 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation61 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 186.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation61 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 186.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation62 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 150px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation62 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 150px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation63 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 100px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation63 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 100px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation64 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 50px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation64 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 50px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation65 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 13.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation65 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 13.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation66 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation66 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 0px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation67 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 13.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation67 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 13.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation68 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 50px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation68 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 50px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation69 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 100px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation69 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 100px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation610 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 150px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation610 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 150px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation611 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 186.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation611 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 186.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation612 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation612 {
+    0% {
+      left: 100px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 200px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation70 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation70 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation71 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 226.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation71 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 226.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation72 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 190px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation72 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 190px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation73 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 140px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation73 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 140px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation74 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 90px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation74 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 90px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation75 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 53.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation75 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 53.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation76 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation76 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 40px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation77 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 53.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation77 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 53.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation78 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 90px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation78 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 90px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation79 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 140px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation79 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 140px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation710 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 190px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation710 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 190px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation711 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 226.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation711 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 226.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation712 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation712 {
+    0% {
+      left: 140px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 240px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation80 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 280px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation80 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 280px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation81 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 266.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation81 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 266.6025404px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation82 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 230px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation82 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 230px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation83 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 180px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation83 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 180px;
+      top: 100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation84 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 130px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation84 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 130px;
+      top: 86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation85 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 93.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation85 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 93.39745959999999px;
+      top: 50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation86 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation86 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 80px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation87 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 93.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation87 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 93.39745959999999px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation88 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 130px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation88 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 130px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation89 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 180px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation89 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 180px;
+      top: -100px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation810 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 230px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation810 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 230px;
+      top: -86.60254040000001px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation811 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 266.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation811 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 266.6025404px;
+      top: -50px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes particle-animation812 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 280px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @keyframes particle-animation812 {
+    0% {
+      left: 180px;
+      top: 0;
+      opacity: 0;
+      transform: scale(1, 1);
+    }
+    100% {
+      left: 280px;
+      top: 0px;
+      opacity: 1;
+      transform: scale(0, 0);
+    }
+  }
+  @-webkit-keyframes background-animation {
+    0% {
+      width: 0;
+    }
+    50% {
+      width: 12.5%;
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      width: 25%;
+    }
+  }
+  @keyframes background-animation {
+    0% {
+      width: 0;
+    }
+    50% {
+      width: 12.5%;
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      width: 25%;
+    }
+  }
+  
+  
+  
+  
\ No newline at end of file
diff --git a/loaders/rainbow_welcome/loader.html b/loaders/rainbow_welcome/loader.html
new file mode 100644
index 0000000..2f571e5
--- /dev/null
+++ b/loaders/rainbow_welcome/loader.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	  <title>loader: rainbow welcome</title>
+</head>
+<body>
+
+  <div id="main_animation_holder" class="whole_animation_wrapper loader_visible">
+    <div class="colors7_wrapper" id="inner_loader_content">
+      <div class="background background0"></div>
+      <div class="background background1"></div>
+      <div class="background background2"></div>
+      <div class="background background3"></div>
+      <div class="background background4"></div>
+      <div class="background background5"></div>
+      <div class="background background6"></div>
+      <div class="background background7"></div>
+      <div class="criterion">
+        <!-- you can change text content in here -->
+        <div class="text text0">W</div>
+        <div class="text text1">e</div>
+        <div class="text text2">l</div>
+        <div class="text text3">c</div>
+        <div class="text text4">o</div>
+        <div class="text text5">m</div>
+        <div class="text text6">e</div>
+        <div class="text text7">: )</div>
+        <!-- end of custom text content -->
+        <div class="frame frame0"></div>
+        <div class="frame frame1"></div>
+        <div class="frame frame2"></div>
+        <div class="frame frame3"></div>
+        <div class="frame frame4"></div>
+        <div class="frame frame5"></div>
+        <div class="frame frame6"></div>
+        <div class="frame frame7"></div>
+        <div class="particle particle00"></div>
+        <div class="particle particle01"></div>
+        <div class="particle particle02"></div>
+        <div class="particle particle03"></div>
+        <div class="particle particle04"></div>
+        <div class="particle particle05"></div>
+        <div class="particle particle06"></div>
+        <div class="particle particle07"></div>
+        <div class="particle particle08"></div>
+        <div class="particle particle09"></div>
+        <div class="particle particle010"></div>
+        <div class="particle particle011"></div>
+        <div class="particle particle10"></div>
+        <div class="particle particle11"></div>
+        <div class="particle particle12"></div>
+        <div class="particle particle13"></div>
+        <div class="particle particle14"></div>
+        <div class="particle particle15"></div>
+        <div class="particle particle16"></div>
+        <div class="particle particle17"></div>
+        <div class="particle particle18"></div>
+        <div class="particle particle19"></div>
+        <div class="particle particle110"></div>
+        <div class="particle particle111"></div>
+        <div class="particle particle20"></div>
+        <div class="particle particle21"></div>
+        <div class="particle particle22"></div>
+        <div class="particle particle23"></div>
+        <div class="particle particle24"></div>
+        <div class="particle particle25"></div>
+        <div class="particle particle26"></div>
+        <div class="particle particle27"></div>
+        <div class="particle particle28"></div>
+        <div class="particle particle29"></div>
+        <div class="particle particle210"></div>
+        <div class="particle particle211"></div>
+        <div class="particle particle30"></div>
+        <div class="particle particle31"></div>
+        <div class="particle particle32"></div>
+        <div class="particle particle33"></div>
+        <div class="particle particle34"></div>
+        <div class="particle particle35"></div>
+        <div class="particle particle36"></div>
+        <div class="particle particle37"></div>
+        <div class="particle particle38"></div>
+        <div class="particle particle39"></div>
+        <div class="particle particle310"></div>
+        <div class="particle particle311"></div>
+        <div class="particle particle40"></div>
+        <div class="particle particle41"></div>
+        <div class="particle particle42"></div>
+        <div class="particle particle43"></div>
+        <div class="particle particle44"></div>
+        <div class="particle particle45"></div>
+        <div class="particle particle46"></div>
+        <div class="particle particle47"></div>
+        <div class="particle particle48"></div>
+        <div class="particle particle49"></div>
+        <div class="particle particle410"></div>
+        <div class="particle particle411"></div>
+        <div class="particle particle50"></div>
+        <div class="particle particle51"></div>
+        <div class="particle particle52"></div>
+        <div class="particle particle53"></div>
+        <div class="particle particle54"></div>
+        <div class="particle particle55"></div>
+        <div class="particle particle56"></div>
+        <div class="particle particle57"></div>
+        <div class="particle particle58"></div>
+        <div class="particle particle59"></div>
+        <div class="particle particle510"></div>
+        <div class="particle particle511"></div>
+        <div class="particle particle60"></div>
+        <div class="particle particle61"></div>
+        <div class="particle particle62"></div>
+        <div class="particle particle63"></div>
+        <div class="particle particle64"></div>
+        <div class="particle particle65"></div>
+        <div class="particle particle66"></div>
+        <div class="particle particle67"></div>
+        <div class="particle particle68"></div>
+        <div class="particle particle69"></div>
+        <div class="particle particle610"></div>
+        <div class="particle particle611"></div>
+        <div class="particle particle70"></div>
+        <div class="particle particle71"></div>
+        <div class="particle particle72"></div>
+        <div class="particle particle73"></div>
+        <div class="particle particle74"></div>
+        <div class="particle particle75"></div>
+        <div class="particle particle76"></div>
+        <div class="particle particle77"></div>
+        <div class="particle particle78"></div>
+        <div class="particle particle79"></div>
+        <div class="particle particle710"></div>
+        <div class="particle particle711"></div>
+      </div>
+    </div>
+    </div>
+    
+    <script type="text/javascript" src="loader.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/rainbow_welcome/loader.js b/loaders/rainbow_welcome/loader.js
new file mode 100644
index 0000000..37d30b7
--- /dev/null
+++ b/loaders/rainbow_welcome/loader.js
@@ -0,0 +1,15 @@
+var animation_reset_counter = 0;
+const animated_colorful_loader = document.querySelector('.text7');
+
+animated_colorful_loader.onanimationend = () => {
+   animation_reset_counter++;
+   if(animation_reset_counter >= 3){
+    //console.log('Animation ended');
+    document.querySelector('#inner_loader_content').style.display = "none";
+    animation_reset_counter = 0;
+     setTimeout(function(){ reset_color_animation(); }, 500);
+  }
+};
+function reset_color_animation(){
+	document.querySelector('#inner_loader_content').style.display = "flex";
+}
\ No newline at end of file
diff --git a/loaders/rainbow_welcome/video_loader_example_rainbow_welcome.mp4 b/loaders/rainbow_welcome/video_loader_example_rainbow_welcome.mp4
new file mode 100644
index 0000000..5388f2d
Binary files /dev/null and b/loaders/rainbow_welcome/video_loader_example_rainbow_welcome.mp4 differ
diff --git a/loaders/rotating_3d_cube/README.md b/loaders/rotating_3d_cube/README.md
new file mode 100644
index 0000000..946aee7
--- /dev/null
+++ b/loaders/rotating_3d_cube/README.md
@@ -0,0 +1,252 @@
+# LOADER: Rotating 3D Cube
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [rotating_3d_cube.mp4](rotating_3d_cube.mp4)
+
+Original Source on Codepen: [https://codepen.io/wiseoldman/pen/xgJzoQ](https://codepen.io/wiseoldman/pen/xgJzoQ)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner_wrap">
+    <div class="custom_loader_cube">
+      <div class="cude_side cube_front"></div>
+      <div class="cude_side cube_back"></div>
+      <div class="cube_side cube_left"></div>
+      <div class="cube_side cube_right"></div>
+      <div class="cude_side cube_top"></div>
+      <div class="cude_side cube_bottom"></div>
+    </div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #15171c;  
+
+  /* 2. cube width */
+  --cl-cube-width: 15vmin;
+
+  /* 3. cube front side background color */
+  --cl-cube-bg-front: #3498db;
+
+  /* 4. cube back side background color */
+  --cl-cube-bg-back: #5ec6ce;
+
+  /* 5. cube right side background color */
+  --cl-cube-bg-right: #9b59b6;
+
+  /* 6. cube left side background color */
+  --cl-cube-bg-left: #e74c3c;
+
+  /* 7. cube top side background color */
+  --cl-cube-bg-top: #2ecc71;
+
+  /* 8. cube bottom side background color */
+  --cl-cube-bg-bottom: #f1c40f;
+
+  /* 9. cube animation duration */
+  --cl-cube-animation: 6s;
+
+}
+
+.custom_loader_inner_wrap {
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  position: relative;
+  perspective: 1000px;
+}
+
+.custom_loader_cube {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  animation: cube_animation var(--cl-cube-animation) ease infinite;
+}
+
+.cube_front {
+  position: absolute;
+  background: var(--cl-cube-bg-front);
+  transform: translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_back {
+  position: absolute;
+  background: var(--cl-cube-bg-back);
+  transform: rotateX(-180deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_right {
+  position: absolute;
+  background: var(--cl-cube-bg-right);
+  transform: rotateY(90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_left {
+  position: absolute;
+  background: var(--cl-cube-bg-left);
+  transform: rotateY(-90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_top { 
+  position: absolute;
+  background: var(--cl-cube-bg-top);
+  transform: rotateX(90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_bottom {
+  position: absolute;
+  background: var(--cl-cube-bg-bottom);
+  transform: rotateX(-90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+@keyframes cube_animation {
+  16.5% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(-90deg);
+  }
+  33% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(90deg);
+  }
+  49.5% {
+    transform: translateZ(var(--cl-cube-width)) rotateY(-90deg);
+  }
+  66% {
+    transform: translateZ(var(--cl-cube-width)) rotateY(90deg);
+  }
+  82% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(-180deg);
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #15171c;  
+
+/* 2. cube width */
+--cl-cube-width: 15vmin;
+
+/* 3. cube front side background color */
+--cl-cube-bg-front: #3498db;
+
+/* 4. cube back side background color */
+--cl-cube-bg-back: #5ec6ce;
+
+/* 5. cube right side background color */
+--cl-cube-bg-right: #9b59b6;
+
+/* 6. cube left side background color */
+--cl-cube-bg-left: #e74c3c;
+
+/* 7. cube top side background color */
+--cl-cube-bg-top: #2ecc71;
+
+/* 8. cube bottom side background color */
+--cl-cube-bg-bottom: #f1c40f;
+
+/* 9. cube animation duration */
+--cl-cube-animation: 6s;
+
+
+```
+
+
+
+
diff --git a/loaders/rotating_3d_cube/loader.css b/loaders/rotating_3d_cube/loader.css
new file mode 100644
index 0000000..7c192a9
--- /dev/null
+++ b/loaders/rotating_3d_cube/loader.css
@@ -0,0 +1,145 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #15171c;  
+
+  /* 2. cube width */
+  --cl-cube-width: 15vmin;
+
+  /* 3. cube front side background color */
+  --cl-cube-bg-front: #3498db;
+
+  /* 4. cube back side background color */
+  --cl-cube-bg-back: #5ec6ce;
+
+  /* 5. cube right side background color */
+  --cl-cube-bg-right: #9b59b6;
+
+  /* 6. cube left side background color */
+  --cl-cube-bg-left: #e74c3c;
+
+  /* 7. cube top side background color */
+  --cl-cube-bg-top: #2ecc71;
+
+  /* 8. cube bottom side background color */
+  --cl-cube-bg-bottom: #f1c40f;
+
+  /* 9. cube animation duration */
+  --cl-cube-animation: 6s;
+
+}
+
+.custom_loader_inner_wrap {
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  position: relative;
+  perspective: 1000px;
+}
+
+.custom_loader_cube {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  animation: cube_animation var(--cl-cube-animation) ease infinite;
+}
+
+.cube_front {
+  position: absolute;
+  background: var(--cl-cube-bg-front);
+  transform: translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_back {
+  position: absolute;
+  background: var(--cl-cube-bg-back);
+  transform: rotateX(-180deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_right {
+  position: absolute;
+  background: var(--cl-cube-bg-right);
+  transform: rotateY(90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_left {
+  position: absolute;
+  background: var(--cl-cube-bg-left);
+  transform: rotateY(-90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_top { 
+  position: absolute;
+  background: var(--cl-cube-bg-top);
+  transform: rotateX(90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+.cube_bottom {
+  position: absolute;
+  background: var(--cl-cube-bg-bottom);
+  transform: rotateX(-90deg) translateZ(calc(var(--cl-cube-width) * 0.9));
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  border-radius: var(--cl-cube-width);
+}
+
+@keyframes cube_animation {
+  16.5% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(-90deg);
+  }
+  33% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(90deg);
+  }
+  49.5% {
+    transform: translateZ(var(--cl-cube-width)) rotateY(-90deg);
+  }
+  66% {
+    transform: translateZ(var(--cl-cube-width)) rotateY(90deg);
+  }
+  82% {
+    transform: translateZ(var(--cl-cube-width)) rotateX(-180deg);
+  }
+}
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube/loader.html b/loaders/rotating_3d_cube/loader.html
new file mode 100644
index 0000000..eb807ff
--- /dev/null
+++ b/loaders/rotating_3d_cube/loader.html
@@ -0,0 +1,12 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner_wrap">
+    <div class="custom_loader_cube">
+      <div class="cude_side cube_front"></div>
+      <div class="cude_side cube_back"></div>
+      <div class="cube_side cube_left"></div>
+      <div class="cube_side cube_right"></div>
+      <div class="cude_side cube_top"></div>
+      <div class="cude_side cube_bottom"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube/loader.js b/loaders/rotating_3d_cube/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/rotating_3d_cube/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube/rotating_3d_cube.mp4 b/loaders/rotating_3d_cube/rotating_3d_cube.mp4
new file mode 100644
index 0000000..5c14c7e
Binary files /dev/null and b/loaders/rotating_3d_cube/rotating_3d_cube.mp4 differ
diff --git a/loaders/rotating_3d_cube_with_shadow/README.md b/loaders/rotating_3d_cube_with_shadow/README.md
new file mode 100644
index 0000000..ffbf852
--- /dev/null
+++ b/loaders/rotating_3d_cube_with_shadow/README.md
@@ -0,0 +1,226 @@
+# LOADER: Rotating 3D Cube with Shadow
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [rotating_3d_cube_with_shadow.mp4](rotating_3d_cube_with_shadow.mp4)
+
+Original Source on Codepen: [https://codepen.io/Rplus/pen/XgEBjd](https://codepen.io/Rplus/pen/XgEBjd)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_box">
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. cube top side background color */
+  --cl-cube-background: #FED74C;
+
+  /* 2. cube south-east side background color */
+  --cl-cube-south-east-side: #C97431;
+
+  /* 3. cube south-west side background color */
+  --cl-cube-south-west-side: #E7A22B;
+
+  /* 4. cube shadow color */
+  --cl-cube-shadow: #DBDBDB;
+  
+  /* 5. cube width, recommended value from 10vmin - 20vmin,
+  but please avoid using 15vmin, as there is a strange white border when viewed on iPhone */
+  --cl-cube-width: 16vmin;
+
+  /* 6. cube shadow color */
+  --cl-background: #fff;
+}
+
+.custom_loader_box {
+  width: calc(var(--cl-cube-width) * 3);
+  height: calc(var(--cl-cube-width) * 2);
+  margin-bottom: 20vmin;
+  transform-style: preserve-3d;
+  transform: rotateX(60deg) rotateZ(45deg);
+}
+
+.custom_loader_cube {
+  position: absolute;
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  background: var(--cl-cube-background);
+  animation: cube_move 3s ease-in-out infinite;
+  transform-style: preserve-3d;
+  box-shadow: 
+    calc(var(--cl-cube-width) * 5) 
+    calc(var(--cl-cube-width) * 5)
+    calc(var(--cl-cube-width) * 0.3)
+    calc(var(--cl-cube-width) * 0.1)
+    var(--cl-cube-shadow);
+}
+
+.custom_loader_cube::before,
+.custom_loader_cube::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.custom_loader_cube::before {
+  background-color: var(--cl-cube-south-east-side);
+  transform-origin: 100% 100%;
+  transform: rotateY(-90deg);
+}
+
+.custom_loader_cube::after {
+  background-color: var(--cl-cube-south-west-side);
+  transform-origin: 0% 100%;
+  transform: rotateX(90deg);
+}
+
+.custom_loader_cube:nth-of-type(1) {
+  animation-delay: -11.25s;
+}
+
+.custom_loader_cube:nth-of-type(2) {
+  animation-delay: -10.5s;
+}
+
+.custom_loader_cube:nth-of-type(3) {
+  animation-delay: -9.75s;
+}
+
+.custom_loader_cube:nth-of-type(4) {
+  animation-delay: -9s;
+}
+
+@keyframes cube_move {
+  0%, 87.5%, 100% {
+    transform: translate(var(--cl-cube-width), 0em);
+  }
+  12.5% {
+    transform: translate(calc(var(--cl-cube-width) * 2), 0em);
+  }
+  25% {
+    transform: translate(calc(var(--cl-cube-width) * 2), var(--cl-cube-width));
+  }
+  37.5%, 50% {
+    transform: translate(var(--cl-cube-width), var(--cl-cube-width));
+  }
+  62.5% {
+    transform: translate(0em, var(--cl-cube-width));
+  }
+  75% {
+    transform: translate(0em, 0em);
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. cube top side background color */
+--cl-cube-background: #FED74C;
+
+/* 2. cube south-east side background color */
+--cl-cube-south-east-side: #C97431;
+
+/* 3. cube south-west side background color */
+--cl-cube-south-west-side: #E7A22B;
+
+/* 4. cube shadow color */
+--cl-cube-shadow: #DBDBDB;
+
+/* 5. cube width, recommended value from 10vmin - 20vmin,
+but please avoid using 15vmin, as there is a strange white border when viewed on iPhone */
+--cl-cube-width: 16vmin;
+
+/* 6. cube shadow color */
+--cl-background: #fff;
+
+
+```
+
+
+
+
diff --git a/loaders/rotating_3d_cube_with_shadow/loader.css b/loaders/rotating_3d_cube_with_shadow/loader.css
new file mode 100644
index 0000000..5c1f830
--- /dev/null
+++ b/loaders/rotating_3d_cube_with_shadow/loader.css
@@ -0,0 +1,131 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. cube top side background color */
+  --cl-cube-background: #FED74C;
+
+  /* 2. cube south-east side background color */
+  --cl-cube-south-east-side: #C97431;
+
+  /* 3. cube south-west side background color */
+  --cl-cube-south-west-side: #E7A22B;
+
+  /* 4. cube shadow color */
+  --cl-cube-shadow: #DBDBDB;
+  
+  /* 5. cube width, recommended value from 10vmin - 20vmin,
+  but please avoid using 15vmin, as there is a strange white border when viewed on iPhone */
+  --cl-cube-width: 16vmin;
+
+  /* 6. cube shadow color */
+  --cl-background: #fff;
+}
+
+.custom_loader_box {
+  width: calc(var(--cl-cube-width) * 3);
+  height: calc(var(--cl-cube-width) * 2);
+  margin-bottom: 20vmin;
+  transform-style: preserve-3d;
+  transform: rotateX(60deg) rotateZ(45deg);
+}
+
+.custom_loader_cube {
+  position: absolute;
+  width: var(--cl-cube-width);
+  height: var(--cl-cube-width);
+  background: var(--cl-cube-background);
+  animation: cube_move 3s ease-in-out infinite;
+  transform-style: preserve-3d;
+  box-shadow: 
+    calc(var(--cl-cube-width) * 5) 
+    calc(var(--cl-cube-width) * 5)
+    calc(var(--cl-cube-width) * 0.3)
+    calc(var(--cl-cube-width) * 0.1)
+    var(--cl-cube-shadow);
+}
+
+.custom_loader_cube::before,
+.custom_loader_cube::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.custom_loader_cube::before {
+  background-color: var(--cl-cube-south-east-side);
+  transform-origin: 100% 100%;
+  transform: rotateY(-90deg);
+}
+
+.custom_loader_cube::after {
+  background-color: var(--cl-cube-south-west-side);
+  transform-origin: 0% 100%;
+  transform: rotateX(90deg);
+}
+
+.custom_loader_cube:nth-of-type(1) {
+  animation-delay: -11.25s;
+}
+
+.custom_loader_cube:nth-of-type(2) {
+  animation-delay: -10.5s;
+}
+
+.custom_loader_cube:nth-of-type(3) {
+  animation-delay: -9.75s;
+}
+
+.custom_loader_cube:nth-of-type(4) {
+  animation-delay: -9s;
+}
+
+@keyframes cube_move {
+  0%, 87.5%, 100% {
+    transform: translate(var(--cl-cube-width), 0em);
+  }
+  12.5% {
+    transform: translate(calc(var(--cl-cube-width) * 2), 0em);
+  }
+  25% {
+    transform: translate(calc(var(--cl-cube-width) * 2), var(--cl-cube-width));
+  }
+  37.5%, 50% {
+    transform: translate(var(--cl-cube-width), var(--cl-cube-width));
+  }
+  62.5% {
+    transform: translate(0em, var(--cl-cube-width));
+  }
+  75% {
+    transform: translate(0em, 0em);
+  }
+}
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube_with_shadow/loader.html b/loaders/rotating_3d_cube_with_shadow/loader.html
new file mode 100644
index 0000000..32e53a2
--- /dev/null
+++ b/loaders/rotating_3d_cube_with_shadow/loader.html
@@ -0,0 +1,8 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_box">
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+    <div class="custom_loader_cube"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube_with_shadow/loader.js b/loaders/rotating_3d_cube_with_shadow/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/rotating_3d_cube_with_shadow/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube_with_shadow/rotating_3d_cube_with_shadow.mp4 b/loaders/rotating_3d_cube_with_shadow/rotating_3d_cube_with_shadow.mp4
new file mode 100644
index 0000000..ec61c68
Binary files /dev/null and b/loaders/rotating_3d_cube_with_shadow/rotating_3d_cube_with_shadow.mp4 differ
diff --git a/loaders/rotating_balls/README.md b/loaders/rotating_balls/README.md
new file mode 100644
index 0000000..215afd3
--- /dev/null
+++ b/loaders/rotating_balls/README.md
@@ -0,0 +1,237 @@
+# LOADER: Rotating Balls
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [rotating_balls.mp4](rotating_balls.mp4)
+
+Original Source: [https://icons8.com/cssload/en/3d-loaders/2](https://icons8.com/cssload/en/3d-loaders/2)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_contain">
+    <div class="custom_loader">
+      <div class="custom_loader_ball"></div>
+    </div>
+  
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_two"></div>
+    </div>
+    
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_three"></div>
+    </div>
+    
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_four"></div>
+    </div>
+  </div>
+</div>
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #fff;
+  
+  /* 2. ball size */
+  --cl-size: 49px;
+
+	/* 3. shadow color */
+	--cl-ball-shadow: rgb(238,238,238);
+
+	/* 4. ball colors */
+	--cl-color-ball-one: rgb(227,116,107);
+	--cl-color-ball-two: rgb(57,123,249);
+	--cl-color-ball-three: rgb(244,180,0);
+	--cl-color-ball-four: rgb(15,157,88);
+
+  /* 5. animation duration, smaller value will make it go faster */
+  --cl-animation-duration: 1150ms;
+
+}
+
+.custom_loader_contain {
+	width: calc(var(--cl-size) * 146 / 49);
+	height: var(--cl-size);
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	margin: auto;
+	opacity: 0;
+	animation: contain_fade_in 1.15s 1;
+	animation-fill-mode: forwards;
+}
+
+.custom_loader {
+	animation: loader_translate var(--cl-animation-duration) infinite ease-in-out alternate, loader_zindex calc(var(--cl-animation-duration) * 2) infinite ease-in-out;
+	position: absolute;
+}
+
+.custom_loader_ball {
+	width: var(--cl-size);
+	height: var(--cl-size);
+	box-shadow: 0 calc(var(--cl-size) * -6.25 / 49) 0 rgba(0,0,0,0.15) inset;
+	background-color: var(--cl-color-ball-one);
+	border-radius: 50%;
+	animation: loader_scale var(--cl-animation-duration) infinite ease-in-out alternate;
+	animation-delay: calc(var(--cl-animation-duration) * -0.5);
+	transform: scale(0.5);
+	border: 2px solid black;
+}
+
+.custom_loader_ball:after {
+	content: "";
+	width: var(--cl-size);
+	height: calc(var(--cl-size) * 13 / 49);
+	background: var(--cl-ball-shadow);
+	position: absolute;
+	top: calc(var(--cl-size) * 68 / 49);
+	border-radius: 50%;
+}
+
+.custom_loader:nth-child(2) {
+	animation-delay: calc(var(--cl-animation-duration) * -1);
+}
+
+.custom_loader:nth-child(3) {
+	animation-delay: calc(var(--cl-animation-duration) * -1.5);
+}
+
+.custom_loader:nth-child(4) {
+	animation-delay: calc(var(--cl-animation-duration) * -2.5);
+}
+
+.custom_loader_ball_two {
+	background-color: var(--cl-color-ball-two);
+	animation-delay: calc(var(--cl-animation-duration) * -1.5);
+}
+
+.custom_loader_ball_three {
+	background-color: var(--cl-color-ball-three);
+	animation-delay: calc(var(--cl-animation-duration) * -2);
+}
+
+.custom_loader_ball_four {
+	background-color: var(--cl-color-ball-four);
+	animation-delay: calc(var(--cl-animation-duration) * -3);
+}
+
+@keyframes loader_translate {
+	100% { transform: translateX(calc(var(--cl-size) * 2)); }
+}
+
+@keyframes loader_scale {
+	100% { transform: scale(1); }
+}
+
+@keyframes loader_zindex {
+	25% { z-index: 1; }
+	75% { z-index: -1; }
+}
+
+@keyframes contain_fade_in {
+	100% { opacity: 1; }
+}
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #fff;
+
+/* 2. ball size */
+--cl-size: 49px;
+
+/* 3. shadow color */
+--cl-ball-shadow: rgb(238,238,238);
+
+/* 4. ball colors */
+--cl-color-ball-one: rgb(227,116,107);
+--cl-color-ball-two: rgb(57,123,249);
+--cl-color-ball-three: rgb(244,180,0);
+--cl-color-ball-four: rgb(15,157,88);
+
+/* 5. animation duration, smaller value will make it go faster */
+--cl-animation-duration: 1150ms;
+
+
+```
+
+
+
+
diff --git a/loaders/rotating_balls/loader.css b/loaders/rotating_balls/loader.css
new file mode 100644
index 0000000..b4b3102
--- /dev/null
+++ b/loaders/rotating_balls/loader.css
@@ -0,0 +1,134 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #fff;
+  
+  /* 2. ball size */
+  --cl-size: 49px;
+
+	/* 3. shadow color */
+	--cl-ball-shadow: rgb(238,238,238);
+
+	/* 4. ball colors */
+	--cl-color-ball-one: rgb(227,116,107);
+	--cl-color-ball-two: rgb(57,123,249);
+	--cl-color-ball-three: rgb(244,180,0);
+	--cl-color-ball-four: rgb(15,157,88);
+
+  /* 5. animation duration, smaller value will make it go faster */
+  --cl-animation-duration: 1150ms;
+
+}
+
+.custom_loader_contain {
+	width: calc(var(--cl-size) * 146 / 49);
+	height: var(--cl-size);
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	margin: auto;
+	opacity: 0;
+	animation: contain_fade_in 1.15s 1;
+	animation-fill-mode: forwards;
+}
+
+.custom_loader {
+	animation: loader_translate var(--cl-animation-duration) infinite ease-in-out alternate, loader_zindex calc(var(--cl-animation-duration) * 2) infinite ease-in-out;
+	position: absolute;
+}
+
+.custom_loader_ball {
+	width: var(--cl-size);
+	height: var(--cl-size);
+	box-shadow: 0 calc(var(--cl-size) * -6.25 / 49) 0 rgba(0,0,0,0.15) inset;
+	background-color: var(--cl-color-ball-one);
+	border-radius: 50%;
+	animation: loader_scale var(--cl-animation-duration) infinite ease-in-out alternate;
+	animation-delay: calc(var(--cl-animation-duration) * -0.5);
+	transform: scale(0.5);
+	border: 2px solid black;
+}
+
+.custom_loader_ball:after {
+	content: "";
+	width: var(--cl-size);
+	height: calc(var(--cl-size) * 13 / 49);
+	background: var(--cl-ball-shadow);
+	position: absolute;
+	top: calc(var(--cl-size) * 68 / 49);
+	border-radius: 50%;
+}
+
+.custom_loader:nth-child(2) {
+	animation-delay: calc(var(--cl-animation-duration) * -1);
+}
+
+.custom_loader:nth-child(3) {
+	animation-delay: calc(var(--cl-animation-duration) * -1.5);
+}
+
+.custom_loader:nth-child(4) {
+	animation-delay: calc(var(--cl-animation-duration) * -2.5);
+}
+
+.custom_loader_ball_two {
+	background-color: var(--cl-color-ball-two);
+	animation-delay: calc(var(--cl-animation-duration) * -1.5);
+}
+
+.custom_loader_ball_three {
+	background-color: var(--cl-color-ball-three);
+	animation-delay: calc(var(--cl-animation-duration) * -2);
+}
+
+.custom_loader_ball_four {
+	background-color: var(--cl-color-ball-four);
+	animation-delay: calc(var(--cl-animation-duration) * -3);
+}
+
+@keyframes loader_translate {
+	100% { transform: translateX(calc(var(--cl-size) * 2)); }
+}
+
+@keyframes loader_scale {
+	100% { transform: scale(1); }
+}
+
+@keyframes loader_zindex {
+	25% { z-index: 1; }
+	75% { z-index: -1; }
+}
+
+@keyframes contain_fade_in {
+	100% { opacity: 1; }
+}
\ No newline at end of file
diff --git a/loaders/rotating_balls/loader.html b/loaders/rotating_balls/loader.html
new file mode 100644
index 0000000..346c128
--- /dev/null
+++ b/loaders/rotating_balls/loader.html
@@ -0,0 +1,19 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_contain">
+    <div class="custom_loader">
+      <div class="custom_loader_ball"></div>
+    </div>
+  
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_two"></div>
+    </div>
+    
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_three"></div>
+    </div>
+    
+    <div class="custom_loader">
+      <div class="custom_loader_ball custom_loader_ball_four"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/rotating_balls/loader.js b/loaders/rotating_balls/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/rotating_balls/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/rotating_balls/rotating_balls.mp4 b/loaders/rotating_balls/rotating_balls.mp4
new file mode 100644
index 0000000..d338e75
Binary files /dev/null and b/loaders/rotating_balls/rotating_balls.mp4 differ
diff --git a/loaders/rotating_planet/README.md b/loaders/rotating_planet/README.md
new file mode 100644
index 0000000..e59a754
--- /dev/null
+++ b/loaders/rotating_planet/README.md
@@ -0,0 +1,370 @@
+# LOADER: Rotating Planet
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [rotating_planet.mp4](rotating_planet.mp4)
+
+Original Source on Codepen: [https://codepen.io/rafaelavlucas/pen/wbrdez](https://codepen.io/rafaelavlucas/pen/wbrdez)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_content">
+    <div class="custom_loader_planet">
+        <div class="custom_loader_ring"></div>
+        <div class="custom_loader_cover_ring"></div>
+        <div class="custom_loader_spots">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <p class="custom_loader_text">loading</p>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #3c4359;
+  
+  /* 2. loader size */
+  --cl-size: 300px;
+
+  /* 3. planet color */
+  --cl-planet-color: #546c8c;
+
+  /* 4. ring color */
+  --cl-ring-color: #bacbd9;
+
+  /* 5. ring color (a bit darker) */
+  --cl-ring-color-darkder: #7ea1bf;
+
+  /* 6. spot color */
+  --cl-spot-color: #3c4359;
+  
+  /* 7. animation duration */
+  --cl-animation-duration: 3s;
+
+  /* 8. text animation duration */
+  --cl-text-animation-duration: 4s;
+}
+
+.custom_loader_content {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--cl-size);
+  height: var(--cl-size);
+}
+
+.custom_loader_planet {
+  width: 65%;
+  height: 65%;
+  background-color: var(--cl-planet-color);
+  border-radius: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  transform-origin: center center;
+  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
+  animation: planet calc(var(--cl-animation-duration) / 0.6) ease infinite alternate;
+}
+
+@keyframes planet {
+  0% {
+    transform: rotate(10deg);
+  }
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+
+.custom_loader_ring {
+  position: absolute;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: 33% center;
+  box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
+  animation: ring var(--cl-animation-duration) ease infinite;
+}
+
+@keyframes ring {
+  0% {
+    transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
+  }
+  100% {
+    transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
+  }
+}
+
+.custom_loader_ring::before {
+  content: "";
+  position: absolute;
+  width: calc(var(--cl-size) / 30);
+  height: calc(var(--cl-size) / 10);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color-darkder);
+  z-index: 2;
+  left: calc(0px - 5px);
+  box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+.custom_loader_ring::after {
+  content: "";
+  position: absolute;
+  width: calc(var(--cl-size) * 0.8);
+  height: calc(var(--cl-size) * 0.8);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color-darkder);
+  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
+}
+
+.custom_loader_cover_ring {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  border-bottom-left-radius: 80%;
+  border-bottom-right-radius: 80%;
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  transform: translate(0px, -17px);
+  background-color: var(--cl-planet-color);
+  z-index: 2;
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.custom_loader_spots {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 2;
+}
+
+.custom_loader_spots span {
+  width: calc(var(--cl-size) / 10);
+  height: calc(var(--cl-size) / 10);
+  background-color: var(--cl-spot-color);
+  position: absolute;
+  border-radius: 100%;
+  box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
+  animation: dots calc(var(--cl-animation-duration) / 0.6) ease infinite alternate;
+}
+
+@keyframes dots {
+  0% {
+    box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
+  }
+  100% {
+    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.custom_loader_spots span:nth-child(1) {
+  top: calc(var(--cl-size) / 15);
+  right: calc(var(--cl-size) / 6);
+}
+
+.custom_loader_spots span:nth-child(2) {
+  top: calc(var(--cl-size) / 7.5);
+  left: calc(var(--cl-size) / 6);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_spots span:nth-child(3) {
+  top: calc(var(--cl-size) / 3.75);
+  left: calc(var(--cl-size) / 15);
+  width: calc(var(--cl-size) / 12);
+  height: calc(var(--cl-size) / 12);
+}
+
+.custom_loader_spots span:nth-child(4) {
+  top: calc(var(--cl-size) / 3.75);
+  left: calc(var(--cl-size) * 0.3);
+  width: calc(var(--cl-size) / 7.5);
+  height: calc(var(--cl-size) / 7.5);
+}
+
+.custom_loader_spots span:nth-child(5) {
+  top: calc(var(--cl-size) / 1.875);
+  left: calc(var(--cl-size) * 70 / 300);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_spots span:nth-child(6) {
+  top: calc(var(--cl-size) * 165 / 300);
+  left: calc(var(--cl-size) / 2.4);
+  width: calc(var(--cl-size) / 30);
+  height: calc(var(--cl-size) / 30);
+}
+
+.custom_loader_spots span:nth-child(7) {
+  top: calc(var(--cl-size) * 0.3);
+  left: calc(var(--cl-size) / 2);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_text {
+  color: var(--cl-ring-color);
+  font-size: 14px;
+  z-index: 2;
+  position: absolute;
+  bottom: -20px;
+  font-family: "Roboto Mono", monospace;
+  animation: text var(--cl-text-animation-duration) ease infinite;
+  width: 100px;
+  text-align: center;
+}
+
+@keyframes text {
+  0% {
+    transform: translateX(-30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+  25% {
+    letter-spacing: 3px;
+    color: var(--cl-ring-color-darkder);
+  }
+  50% {
+    transform: translateX(30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+  75% {
+    letter-spacing: 3px;
+    color: var(--cl-ring-color-darkder);
+  }
+  100% {
+    transform: translateX(-30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #3c4359;
+
+/* 2. loader size */
+--cl-size: 300px;
+
+/* 3. planet color */
+--cl-planet-color: #546c8c;
+
+/* 4. ring color */
+--cl-ring-color: #bacbd9;
+
+/* 5. ring color (a bit darker) */
+--cl-ring-color-darkder: #7ea1bf;
+
+/* 6. spot color */
+--cl-spot-color: #3c4359;
+
+/* 7. animation duration */
+--cl-animation-duration: 3s;
+
+/* 8. text animation duration */
+--cl-text-animation-duration: 4s;
+
+
+```
+
+
+
+
diff --git a/loaders/rotating_planet/loader.css b/loaders/rotating_planet/loader.css
new file mode 100644
index 0000000..3fc5659
--- /dev/null
+++ b/loaders/rotating_planet/loader.css
@@ -0,0 +1,260 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #3c4359;
+  
+  /* 2. loader size */
+  --cl-size: 300px;
+
+  /* 3. planet color */
+  --cl-planet-color: #546c8c;
+
+  /* 4. ring color */
+  --cl-ring-color: #bacbd9;
+
+  /* 5. ring color (a bit darker) */
+  --cl-ring-color-darkder: #7ea1bf;
+
+  /* 6. spot color */
+  --cl-spot-color: #3c4359;
+  
+  /* 7. animation duration */
+  --cl-animation-duration: 3s;
+
+  /* 8. text animation duration */
+  --cl-text-animation-duration: 4s;
+}
+
+.custom_loader_content {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--cl-size);
+  height: var(--cl-size);
+}
+
+.custom_loader_planet {
+  width: 65%;
+  height: 65%;
+  background-color: var(--cl-planet-color);
+  border-radius: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  transform-origin: center center;
+  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
+  animation: planet calc(var(--cl-animation-duration) / 0.6) ease infinite alternate;
+}
+
+@keyframes planet {
+  0% {
+    transform: rotate(10deg);
+  }
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+
+.custom_loader_ring {
+  position: absolute;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: 33% center;
+  box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
+  animation: ring var(--cl-animation-duration) ease infinite;
+}
+
+@keyframes ring {
+  0% {
+    transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
+  }
+  100% {
+    transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
+  }
+}
+
+.custom_loader_ring::before {
+  content: "";
+  position: absolute;
+  width: calc(var(--cl-size) / 30);
+  height: calc(var(--cl-size) / 10);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color-darkder);
+  z-index: 2;
+  left: calc(0px - 5px);
+  box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+.custom_loader_ring::after {
+  content: "";
+  position: absolute;
+  width: calc(var(--cl-size) * 0.8);
+  height: calc(var(--cl-size) * 0.8);
+  border-radius: 100%;
+  background-color: var(--cl-ring-color-darkder);
+  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
+}
+
+.custom_loader_cover_ring {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  border-bottom-left-radius: 80%;
+  border-bottom-right-radius: 80%;
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  transform: translate(0px, -17px);
+  background-color: var(--cl-planet-color);
+  z-index: 2;
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.custom_loader_spots {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 2;
+}
+
+.custom_loader_spots span {
+  width: calc(var(--cl-size) / 10);
+  height: calc(var(--cl-size) / 10);
+  background-color: var(--cl-spot-color);
+  position: absolute;
+  border-radius: 100%;
+  box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
+  animation: dots calc(var(--cl-animation-duration) / 0.6) ease infinite alternate;
+}
+
+@keyframes dots {
+  0% {
+    box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
+  }
+  100% {
+    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.custom_loader_spots span:nth-child(1) {
+  top: calc(var(--cl-size) / 15);
+  right: calc(var(--cl-size) / 6);
+}
+
+.custom_loader_spots span:nth-child(2) {
+  top: calc(var(--cl-size) / 7.5);
+  left: calc(var(--cl-size) / 6);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_spots span:nth-child(3) {
+  top: calc(var(--cl-size) / 3.75);
+  left: calc(var(--cl-size) / 15);
+  width: calc(var(--cl-size) / 12);
+  height: calc(var(--cl-size) / 12);
+}
+
+.custom_loader_spots span:nth-child(4) {
+  top: calc(var(--cl-size) / 3.75);
+  left: calc(var(--cl-size) * 0.3);
+  width: calc(var(--cl-size) / 7.5);
+  height: calc(var(--cl-size) / 7.5);
+}
+
+.custom_loader_spots span:nth-child(5) {
+  top: calc(var(--cl-size) / 1.875);
+  left: calc(var(--cl-size) * 70 / 300);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_spots span:nth-child(6) {
+  top: calc(var(--cl-size) * 165 / 300);
+  left: calc(var(--cl-size) / 2.4);
+  width: calc(var(--cl-size) / 30);
+  height: calc(var(--cl-size) / 30);
+}
+
+.custom_loader_spots span:nth-child(7) {
+  top: calc(var(--cl-size) * 0.3);
+  left: calc(var(--cl-size) / 2);
+  width: calc(var(--cl-size) / 20);
+  height: calc(var(--cl-size) / 20);
+}
+
+.custom_loader_text {
+  color: var(--cl-ring-color);
+  font-size: 14px;
+  z-index: 2;
+  position: absolute;
+  bottom: -20px;
+  font-family: "Roboto Mono", monospace;
+  animation: text var(--cl-text-animation-duration) ease infinite;
+  width: 100px;
+  text-align: center;
+}
+
+@keyframes text {
+  0% {
+    transform: translateX(-30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+  25% {
+    letter-spacing: 3px;
+    color: var(--cl-ring-color-darkder);
+  }
+  50% {
+    transform: translateX(30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+  75% {
+    letter-spacing: 3px;
+    color: var(--cl-ring-color-darkder);
+  }
+  100% {
+    transform: translateX(-30px);
+    letter-spacing: 0px;
+    color: var(--cl-ring-color);
+  }
+}
\ No newline at end of file
diff --git a/loaders/rotating_planet/loader.html b/loaders/rotating_planet/loader.html
new file mode 100644
index 0000000..ab490a5
--- /dev/null
+++ b/loaders/rotating_planet/loader.html
@@ -0,0 +1,18 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_content">
+    <div class="custom_loader_planet">
+        <div class="custom_loader_ring"></div>
+        <div class="custom_loader_cover_ring"></div>
+        <div class="custom_loader_spots">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <p class="custom_loader_text">loading</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/rotating_planet/loader.js b/loaders/rotating_planet/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/rotating_planet/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/rotating_planet/rotating_planet.mp4 b/loaders/rotating_planet/rotating_planet.mp4
new file mode 100644
index 0000000..3c3091e
Binary files /dev/null and b/loaders/rotating_planet/rotating_planet.mp4 differ
diff --git a/loaders/spinning_circles/README.md b/loaders/spinning_circles/README.md
new file mode 100644
index 0000000..340bda4
--- /dev/null
+++ b/loaders/spinning_circles/README.md
@@ -0,0 +1,311 @@
+# LOADER: Spining Circles
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [spinning_circles.mp4](spinning_circles.mp4)
+
+Original Source on Codepen: [https://codepen.io/dead_seagull/pen/jVqzbJ](https://codepen.io/dead_seagull/pen/jVqzbJ)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #111;
+  
+  /* 2. loader size */
+  --cl-size: 70vmin;
+
+  /* 3. spinner color */
+  --cl-spinner-color: #fff;
+
+  /* 4. border width */
+  --cl-border-width: 2px;
+  
+  /* 5. animation speed */
+  --cl-animation-duration: 16s;
+}
+
+.custom_loader_inner {
+  position: relative;
+  display: block;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  transform-style: preserve-3d;
+  transform: perspective(500px) rotateX(90deg);
+}
+
+.custom_loader_circle:nth-child(1) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  animation: circle_spin var(--cl-animation-duration) infinite linear;
+}
+
+.custom_loader_circle:nth-child(2) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.0454545);
+  top: calc(var(--cl-size) * 0.0454545);
+  width: calc(var(--cl-size) * 0.909090);
+  height: calc(var(--cl-size) * 0.909090);
+  animation: circle_spin calc(var(--cl-animation-duration) * 2) infinite linear;
+}
+
+.custom_loader_circle:nth-child(3) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.090909);
+  top: calc(var(--cl-size) * 0.090909);
+  width: calc(var(--cl-size) * 0.818);
+  height: calc(var(--cl-size) * 0.818);
+  animation: circle_spin var(--cl-animation-duration) infinite linear;
+}
+
+.custom_loader_circle:nth-child(4) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.1363636);
+  top: calc(var(--cl-size) * 0.1363636);
+  width: calc(var(--cl-size) * 0.727272);
+  height: calc(var(--cl-size) * 0.727272);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.666666) infinite linear;
+}
+
+.custom_loader_circle:nth-child(5) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.181818);
+  top: calc(var(--cl-size) * 0.181818);
+  width: calc(var(--cl-size) * 0.636363);
+  height: calc(var(--cl-size) * 0.636363);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.5) infinite linear;
+}
+
+.custom_loader_circle:nth-child(6) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.2272727);
+  top: calc(var(--cl-size) * 0.2272727);
+  width: calc(var(--cl-size) * 0.545454);
+  height: calc(var(--cl-size) * 0.545454);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.4) infinite linear;
+}
+
+.custom_loader_circle:nth-child(7) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.272727);
+  top: calc(var(--cl-size) * 0.272727);
+  width: calc(var(--cl-size) * 0.454545);
+  height: calc(var(--cl-size) * 0.454545);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.333333) infinite linear;
+}
+
+.custom_loader_circle:nth-child(8) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.3181818);
+  top: calc(var(--cl-size) * 0.3181818);
+  width: calc(var(--cl-size) * 0.363636);
+  height: calc(var(--cl-size) * 0.363636);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.285714) infinite linear;
+}
+
+.custom_loader_circle:nth-child(9) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.363636);
+  top: calc(var(--cl-size) * 0.363636);
+  width: calc(var(--cl-size) * 0.272727);
+  height: calc(var(--cl-size) * 0.272727);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.25) infinite linear;
+}
+
+.custom_loader_circle:nth-child(10) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.4090909);
+  top: calc(var(--cl-size) * 0.4090909);
+  width: calc(var(--cl-size) * 0.181818);
+  height: calc(var(--cl-size) * 0.181818);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.222222) infinite linear;
+}
+
+.custom_loader_circle:nth-child(11) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.454545);
+  top: calc(var(--cl-size) * 0.454545);
+  width: calc(var(--cl-size) * 0.090909);
+  height: calc(var(--cl-size) * 0.090909);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.2) infinite linear;
+}
+
+.custom_loader_circle:nth-child(12) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.5 - var(--cl-border-width));
+  top: calc(var(--cl-size) * 0.5 - var(--cl-border-width));
+  width: 0vh;
+  height: 0vh;
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.181818) infinite linear;
+}
+
+.custom_loader_circle:nth-child(2n) {
+  border: var(--cl-border-width) dashed var(--cl-spinner-color);
+}
+
+@keyframes circle_spin {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(360deg);
+  }
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background color */
+--cl-background: #111;
+
+/* 2. loader size */
+--cl-size: 70vmin;
+
+/* 3. spinner color */
+--cl-spinner-color: #fff;
+
+/* 4. border width */
+--cl-border-width: 2px;
+
+/* 5. animation speed */
+--cl-animation-duration: 16s;
+
+
+```
+
+
+
+
diff --git a/loaders/spinning_circles/loader.css b/loaders/spinning_circles/loader.css
new file mode 100644
index 0000000..676f733
--- /dev/null
+++ b/loaders/spinning_circles/loader.css
@@ -0,0 +1,211 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cl-background);
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background color */
+  --cl-background: #111;
+  
+  /* 2. loader size */
+  --cl-size: 70vmin;
+
+  /* 3. spinner color */
+  --cl-spinner-color: #fff;
+
+  /* 4. border width */
+  --cl-border-width: 2px;
+  
+  /* 5. animation speed */
+  --cl-animation-duration: 16s;
+}
+
+.custom_loader_inner {
+  position: relative;
+  display: block;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  transform-style: preserve-3d;
+  transform: perspective(500px) rotateX(90deg);
+}
+
+.custom_loader_circle:nth-child(1) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  width: var(--cl-size);
+  height: var(--cl-size);
+  animation: circle_spin var(--cl-animation-duration) infinite linear;
+}
+
+.custom_loader_circle:nth-child(2) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.0454545);
+  top: calc(var(--cl-size) * 0.0454545);
+  width: calc(var(--cl-size) * 0.909090);
+  height: calc(var(--cl-size) * 0.909090);
+  animation: circle_spin calc(var(--cl-animation-duration) * 2) infinite linear;
+}
+
+.custom_loader_circle:nth-child(3) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.090909);
+  top: calc(var(--cl-size) * 0.090909);
+  width: calc(var(--cl-size) * 0.818);
+  height: calc(var(--cl-size) * 0.818);
+  animation: circle_spin var(--cl-animation-duration) infinite linear;
+}
+
+.custom_loader_circle:nth-child(4) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.1363636);
+  top: calc(var(--cl-size) * 0.1363636);
+  width: calc(var(--cl-size) * 0.727272);
+  height: calc(var(--cl-size) * 0.727272);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.666666) infinite linear;
+}
+
+.custom_loader_circle:nth-child(5) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.181818);
+  top: calc(var(--cl-size) * 0.181818);
+  width: calc(var(--cl-size) * 0.636363);
+  height: calc(var(--cl-size) * 0.636363);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.5) infinite linear;
+}
+
+.custom_loader_circle:nth-child(6) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.2272727);
+  top: calc(var(--cl-size) * 0.2272727);
+  width: calc(var(--cl-size) * 0.545454);
+  height: calc(var(--cl-size) * 0.545454);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.4) infinite linear;
+}
+
+.custom_loader_circle:nth-child(7) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.272727);
+  top: calc(var(--cl-size) * 0.272727);
+  width: calc(var(--cl-size) * 0.454545);
+  height: calc(var(--cl-size) * 0.454545);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.333333) infinite linear;
+}
+
+.custom_loader_circle:nth-child(8) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.3181818);
+  top: calc(var(--cl-size) * 0.3181818);
+  width: calc(var(--cl-size) * 0.363636);
+  height: calc(var(--cl-size) * 0.363636);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.285714) infinite linear;
+}
+
+.custom_loader_circle:nth-child(9) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.363636);
+  top: calc(var(--cl-size) * 0.363636);
+  width: calc(var(--cl-size) * 0.272727);
+  height: calc(var(--cl-size) * 0.272727);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.25) infinite linear;
+}
+
+.custom_loader_circle:nth-child(10) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.4090909);
+  top: calc(var(--cl-size) * 0.4090909);
+  width: calc(var(--cl-size) * 0.181818);
+  height: calc(var(--cl-size) * 0.181818);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.222222) infinite linear;
+}
+
+.custom_loader_circle:nth-child(11) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.454545);
+  top: calc(var(--cl-size) * 0.454545);
+  width: calc(var(--cl-size) * 0.090909);
+  height: calc(var(--cl-size) * 0.090909);
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.2) infinite linear;
+}
+
+.custom_loader_circle:nth-child(12) {
+  position: absolute;
+  background: transparent;
+  border: var(--cl-border-width) solid var(--cl-spinner-color);
+  border-radius: 50%;
+  left: calc(var(--cl-size) * 0.5 - var(--cl-border-width));
+  top: calc(var(--cl-size) * 0.5 - var(--cl-border-width));
+  width: 0vh;
+  height: 0vh;
+  animation: circle_spin calc(var(--cl-animation-duration) * 0.181818) infinite linear;
+}
+
+.custom_loader_circle:nth-child(2n) {
+  border: var(--cl-border-width) dashed var(--cl-spinner-color);
+}
+
+@keyframes circle_spin {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(360deg);
+  }
+}
\ No newline at end of file
diff --git a/loaders/spinning_circles/loader.html b/loaders/spinning_circles/loader.html
new file mode 100644
index 0000000..f1b709d
--- /dev/null
+++ b/loaders/spinning_circles/loader.html
@@ -0,0 +1,16 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+    <div class="custom_loader_circle"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/spinning_circles/loader.js b/loaders/spinning_circles/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/spinning_circles/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/spinning_circles/spinning_circles.mp4 b/loaders/spinning_circles/spinning_circles.mp4
new file mode 100644
index 0000000..0851fec
Binary files /dev/null and b/loaders/spinning_circles/spinning_circles.mp4 differ
diff --git a/loaders/waving_stripes/README.md b/loaders/waving_stripes/README.md
new file mode 100644
index 0000000..f1aa6b3
--- /dev/null
+++ b/loaders/waving_stripes/README.md
@@ -0,0 +1,257 @@
+
+
+# LOADER: waving stripes
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [video_loader_example_waving_stripes.mp4](video_loader_example_waving_stripes.mp4)
+
+Original Source on Codepen: [https://codepen.io/JeromeRenders/pen/wMMMLV?editors=1100](https://codepen.io/JeromeRenders/pen/wMMMLV?editors=1100)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div id="waves_line_loader_wrapper" class="waves_line_loader_wrapper visible_loader">
+  <ul class="page_loader_content">
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+    <li class="line_loader"><span class="wave_loader"></span></li>
+  </ul>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+:root{
+ --loader_color_waves_background: #f1e6d9; /*<-- you can change here the page background color */
+ --loader_color_bar_waves1: #a70747; /*<--  you can change here the first stripe color (same as the second wave) */
+ --loader_color_bar_waves2: #f2d9bb; /*<--  you can change here the second stripe color (same as the first wave) */
+ --loader_speed_waves: 2.4s /*<--  you can change here the waves speed (how long it takes to get to the other side) */
+
+}
+
+.waves_line_loader_wrapper.visible_loader {
+  display: block;
+}
+
+.waves_line_loader_wrapper {
+  background: var(--loader_color_waves_background);
+  min-width: 100vw;
+  min-height: 100vh;
+  display:none;
+}
+
+ul.page_loader_content {
+  position: absolute;
+  width: 260px;
+  height: 375px;
+  top: 50%;
+  left: 50%;
+  box-shadow: 0 3px 20px #88571B;
+  border-radius: 7px;
+  overflow: hidden;
+  transform: translate(-50%, -50%);
+  padding: 0px;
+}
+ul.page_loader_content li.line_loader {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 25px;
+  overflow: hidden;
+}
+ul.page_loader_content li.line_loader span.wave_loader {
+  position: absolute;
+  display: block;
+  width: 18px;
+  height: 18px;
+  bottom: 0;
+  left: -20px;
+  border-radius: 50%;
+}
+ul.page_loader_content li.line_loader span.wave_loader:before, ul.page_loader_content li.line_loader span.wave_loader:after {
+  content: "";
+  position: absolute;
+}
+ul.page_loader_content li.line_loader span.wave_loader:before {
+  width: 38px;
+  height: 20px;
+  top: 0px;
+  left: -32px;
+  transform-origin: 100% 0%;
+  transform: rotate(-30deg);
+}
+ul.page_loader_content li.line_loader span.wave_loader:after {
+  width: 10px;
+  height: 30px;
+  top: 7px;
+  right: -4px;
+  transform: rotate(-15deg);
+}
+ul.page_loader_content li.line_loader:nth-child(odd) {
+  background: var(--loader_color_bar_waves2);
+}
+ul.page_loader_content li.line_loader:nth-child(odd) span, ul.page_loader_content li.line_loader:nth-child(odd) span:before, ul.page_loader_content li.line_loader:nth-child(odd) span:after {
+  background: var(--loader_color_bar_waves1);
+}
+ul.page_loader_content li.line_loader:nth-child(even) {
+  background: var(--loader_color_bar_waves1);
+}
+ul.page_loader_content li.line_loader:nth-child(even) span, ul.page_loader_content li.line_loader:nth-child(even) span:before, ul.page_loader_content li.line_loader:nth-child(even) span:after {
+  background: var(--loader_color_bar_waves2);
+}
+ul.page_loader_content li.line_loader:last-child span, ul.page_loader_content li.line_loader:last-child span:before, ul.page_loader_content li.line_loader:last-child span:after {
+  display: none;
+}
+
+li.line_loader:nth-child(1) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.1s;
+}
+
+li.line_loader:nth-child(2) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.2s;
+}
+
+li.line_loader:nth-child(3) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+
+li.line_loader:nth-child(4) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.4s;
+}
+
+li.line_loader:nth-child(5) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+li.line_loader:nth-child(6) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.6s;
+}
+
+li.line_loader:nth-child(7) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.7s;
+}
+
+li.line_loader:nth-child(8) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.8s;
+}
+
+li.line_loader:nth-child(9) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 0.9s;
+}
+
+li.line_loader:nth-child(10) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1s;
+}
+
+li.line_loader:nth-child(11) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1.1s;
+}
+
+li.line_loader:nth-child(12) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1.2s;
+}
+
+li.line_loader:nth-child(13) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1.3s;
+}
+
+li.line_loader:nth-child(14) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1.4s;
+}
+
+li.line:nth-child(15) span {
+  animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+  animation-delay: 1.5s;
+}
+@keyframes move_wave_loader {
+  from {
+    left: -20px;
+  }
+  to {
+    left: 280px;
+  }
+}
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('waves_line_loader_wrapper').classList.remove('visible_loader');
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+:root{
+ --loader_color_waves_background: #f1e6d9; /*<-- you can change here the page background color */
+ --loader_color_bar_waves1: #a70747; /*<--  you can change here the first stripe color (same as the second wave) */
+ --loader_color_bar_waves2: #f2d9bb; /*<--  you can change here the second stripe color (same as the first wave) */
+ --loader_speed_waves: 2.4s /*<--  you can change here the waves speed (how long it takes to get to the other side) */
+
+}
+
+
+```
+
diff --git a/loaders/waving_stripes/loader.css b/loaders/waving_stripes/loader.css
new file mode 100644
index 0000000..554f245
--- /dev/null
+++ b/loaders/waving_stripes/loader.css
@@ -0,0 +1,172 @@
+/* global vars (here you can easily modify how the loader looks) 
+ ** And if the style you're looking for is not listed here,
+**  or, if you require a completely different custom loader,
+**  you can always contact us at support@awe.media
+*/
+:root{
+  --loader_color_waves_background: #f1e6d9; /*<-- you can change here the page background color */
+  --loader_color_bar_waves1: #a70747; /*<--  you can change here the first stripe color (same as the second wave) */
+  --loader_color_bar_waves2: #f2d9bb; /*<--  you can change here the second stripe color (same as the first wave) */
+  --loader_speed_waves: 2.4s /*<--  you can change here the waves speed (how long it takes to get to the other side) */
+ 
+ }
+ 
+ .waves_line_loader_wrapper.visible_loader {
+  display: block;
+}
+
+.waves_line_loader_wrapper {
+  background: var(--loader_color_waves_background);
+  min-width: 100vw;
+  min-height: 100vh;
+  display:none;
+}
+ 
+ ul.page_loader_content {
+   position: absolute;
+   width: 260px;
+   height: 375px;
+   top: 50%;
+   left: 50%;
+   box-shadow: 0 3px 20px #88571B;
+   border-radius: 7px;
+   overflow: hidden;
+   transform: translate(-50%, -50%);
+   padding: 0px;
+ }
+ ul.page_loader_content li.line_loader {
+   position: relative;
+   float: left;
+   width: 100%;
+   height: 25px;
+   overflow: hidden;
+ }
+ ul.page_loader_content li.line_loader span.wave_loader {
+   position: absolute;
+   display: block;
+   width: 18px;
+   height: 18px;
+   bottom: 0;
+   left: -20px;
+   border-radius: 50%;
+ }
+ ul.page_loader_content li.line_loader span.wave_loader:before, ul.page_loader_content li.line_loader span.wave_loader:after {
+   content: "";
+   position: absolute;
+ }
+ ul.page_loader_content li.line_loader span.wave_loader:before {
+   width: 38px;
+   height: 20px;
+   top: 0px;
+   left: -32px;
+   transform-origin: 100% 0%;
+   transform: rotate(-30deg);
+ }
+ ul.page_loader_content li.line_loader span.wave_loader:after {
+   width: 10px;
+   height: 30px;
+   top: 7px;
+   right: -4px;
+   transform: rotate(-15deg);
+ }
+ ul.page_loader_content li.line_loader:nth-child(odd) {
+   background: var(--loader_color_bar_waves2);
+ }
+ ul.page_loader_content li.line_loader:nth-child(odd) span, ul.page_loader_content li.line_loader:nth-child(odd) span:before, ul.page_loader_content li.line_loader:nth-child(odd) span:after {
+   background: var(--loader_color_bar_waves1);
+ }
+ ul.page_loader_content li.line_loader:nth-child(even) {
+   background: var(--loader_color_bar_waves1);
+ }
+ ul.page_loader_content li.line_loader:nth-child(even) span, ul.page_loader_content li.line_loader:nth-child(even) span:before, ul.page_loader_content li.line_loader:nth-child(even) span:after {
+   background: var(--loader_color_bar_waves2);
+ }
+ ul.page_loader_content li.line_loader:last-child span, ul.page_loader_content li.line_loader:last-child span:before, ul.page_loader_content li.line_loader:last-child span:after {
+   display: none;
+ }
+ 
+ li.line_loader:nth-child(1) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.1s;
+ }
+ 
+ li.line_loader:nth-child(2) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.2s;
+ }
+ 
+ li.line_loader:nth-child(3) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.3s;
+ }
+ 
+ li.line_loader:nth-child(4) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.4s;
+ }
+ 
+ li.line_loader:nth-child(5) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.5s;
+ }
+ 
+ li.line_loader:nth-child(6) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.6s;
+ }
+ 
+ li.line_loader:nth-child(7) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.7s;
+ }
+ 
+ li.line_loader:nth-child(8) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.8s;
+ }
+ 
+ li.line_loader:nth-child(9) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 0.9s;
+ }
+ 
+ li.line_loader:nth-child(10) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1s;
+ }
+ 
+ li.line_loader:nth-child(11) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1.1s;
+ }
+ 
+ li.line_loader:nth-child(12) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1.2s;
+ }
+ 
+ li.line_loader:nth-child(13) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1.3s;
+ }
+ 
+ li.line_loader:nth-child(14) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1.4s;
+ }
+ 
+ li.line:nth-child(15) span {
+   animation: move_wave_loader var(--loader_speed_waves) ease-in-out infinite;
+   animation-delay: 1.5s;
+ }
+ 
+ @keyframes move_wave_loader {
+   from {
+     left: -20px;
+   }
+   to {
+     left: 280px;
+   }
+ }
+ 
+ 
\ No newline at end of file
diff --git a/loaders/waving_stripes/loader.html b/loaders/waving_stripes/loader.html
new file mode 100644
index 0000000..ce47751
--- /dev/null
+++ b/loaders/waving_stripes/loader.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="loader.css">
+	<title>loader: waving stripes</title>
+
+</head>
+<body>
+  <div id="waves_line_loader_wrapper" class="waves_line_loader_wrapper visible_loader">
+    <ul class="page_loader_content">
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+      <li class="line_loader"><span class="wave_loader"></span></li>
+    </ul>
+  </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/loaders/waving_stripes/video_loader_example_waving_stripes.mp4 b/loaders/waving_stripes/video_loader_example_waving_stripes.mp4
new file mode 100644
index 0000000..6c54d7f
Binary files /dev/null and b/loaders/waving_stripes/video_loader_example_waving_stripes.mp4 differ
diff --git a/loaders/wobbling_circle/README.md b/loaders/wobbling_circle/README.md
new file mode 100644
index 0000000..d580657
--- /dev/null
+++ b/loaders/wobbling_circle/README.md
@@ -0,0 +1,170 @@
+# LOADER: Wobbling Circle
+
+- [Documentation](#documentation)
+- [Customization](#customization)
+
+## Video Example & Original Source
+
+
+Video Example: [wobbling_circle.mp4](wobbling_circle.mp4)
+
+Original Source on Codepen: [https://codepen.io/prathameshkoshti/pen/OJJRaRo](https://codepen.io/prathameshkoshti/pen/OJJRaRo)
+
+
+## Documentation
+
+This loader only uses [loader.html](loader.html) and [loader.css](loader.css), follow below steps to add it to your project. If you would like to change how the loaders looks, you can refer to [Customization](#customization).
+
+
+### Step One
+
+Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **HTML** section.
+
+
+```html
+
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader"></div>
+  </div>
+</div>
+
+
+```
+
+### Step Two
+
+Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **CSS** section.
+
+```css
+
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: radial-gradient(var(--cl-background-1), var(--cl-background-2));
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background 2 gradient colors */
+  --cl-background-1: #CECECE;
+  --cl-background-2: #fff;
+  
+  /* 2. loader size */
+  --cl-circle-size: 350px;
+
+  /* 3. circle rotate duration */
+  --cl-circle-rotate-duration: 2s;
+
+  /* 4. circle gradient colors */
+  --cl-circle-gradient-color1: rgba(255,255,255,1);
+  --cl-circle-gradient-color2: rgb(220, 220, 220);
+  --cl-circle-gradient-color3: rgb(170, 170, 170);
+  --cl-circle-gradient-color4: rgb(10, 10, 10);
+
+}
+
+.custom_loader_inner {
+  width: var(--cl-circle-size);
+	height: var(--cl-circle-size);
+	border-radius: 100%;
+	background: linear-gradient(165deg, var(--cl-circle-gradient-color1) 0%, var(--cl-circle-gradient-color2) 40%, var(--cl-circle-gradient-color3) 98%, var(--cl-circle-gradient-color4) 100%);
+	position: relative;
+}
+
+.custom_loader {
+  position: absolute;
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+	border-bottom: 0 solid #ffffff05;
+  box-shadow: 
+		0 -10px 20px 20px #ffffff40 inset,
+		0 -5px 15px 10px #ffffff50 inset,
+		0 -2px 5px #ffffff80 inset,
+		0 -3px 2px #ffffffBB inset,
+		0 2px 0px #ffffff,
+		0 2px 3px #ffffff,
+		0 5px 5px #ffffff90,
+		0 10px 15px #ffffff60,
+		0 10px 20px 20px #ffffff40;
+	filter: blur(3px);
+	animation: var(--cl-circle-rotate-duration) circle_rotate linear infinite;
+}
+
+@keyframes circle_rotate {
+	100% {
+		transform: rotate(360deg)
+	}
+}
+
+
+```
+
+### Step Three
+
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+
+For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
+
+
+```javascript
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
+
+
+```
+
+## Customization
+
+You can modify these custom properties inside `.custom_loader_wrap` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
+
+```css
+
+/* 1. page background 2 gradient colors */
+--cl-background-1: #CECECE;
+--cl-background-2: #fff;
+
+/* 2. loader size */
+--cl-circle-size: 350px;
+
+/* 3. circle rotate duration */
+--cl-circle-rotate-duration: 2s;
+
+/* 4. circle gradient colors */
+--cl-circle-gradient-color1: rgba(255,255,255,1);
+--cl-circle-gradient-color2: rgb(220, 220, 220);
+--cl-circle-gradient-color3: rgb(170, 170, 170);
+--cl-circle-gradient-color4: rgb(10, 10, 10);
+
+
+```
+
+
+
+
diff --git a/loaders/wobbling_circle/loader.css b/loaders/wobbling_circle/loader.css
new file mode 100644
index 0000000..039a8fe
--- /dev/null
+++ b/loaders/wobbling_circle/loader.css
@@ -0,0 +1,81 @@
+* {
+  box-sizing: border-box;
+}
+.custom_loader_wrap {
+  overflow: auto; /* location bar hack */
+  overflow-x: hidden;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: all;
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: radial-gradient(var(--cl-background-1), var(--cl-background-2));
+
+  /*
+  ** You can modify these custom properties to change how the loader looks on the front end.
+  ** And if the style you're looking for is not listed here, 
+  ** or, if you require a completely different custom loader,
+  ** you can always contact us at support@awe.media
+  */
+
+  /* 1. page background 2 gradient colors */
+  --cl-background-1: #CECECE;
+  --cl-background-2: #fff;
+  
+  /* 2. loader size */
+  --cl-circle-size: 350px;
+
+  /* 3. circle rotate duration */
+  --cl-circle-rotate-duration: 2s;
+
+  /* 4. circle gradient colors */
+  --cl-circle-gradient-color1: rgba(255,255,255,1);
+  --cl-circle-gradient-color2: rgb(220, 220, 220);
+  --cl-circle-gradient-color3: rgb(170, 170, 170);
+  --cl-circle-gradient-color4: rgb(10, 10, 10);
+
+}
+
+.custom_loader_inner {
+  width: var(--cl-circle-size);
+	height: var(--cl-circle-size);
+	border-radius: 100%;
+	background: linear-gradient(165deg, var(--cl-circle-gradient-color1) 0%, var(--cl-circle-gradient-color2) 40%, var(--cl-circle-gradient-color3) 98%, var(--cl-circle-gradient-color4) 100%);
+	position: relative;
+}
+
+.custom_loader {
+  position: absolute;
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+	border-bottom: 0 solid #ffffff05;
+  box-shadow: 
+		0 -10px 20px 20px #ffffff40 inset,
+		0 -5px 15px 10px #ffffff50 inset,
+		0 -2px 5px #ffffff80 inset,
+		0 -3px 2px #ffffffBB inset,
+		0 2px 0px #ffffff,
+		0 2px 3px #ffffff,
+		0 5px 5px #ffffff90,
+		0 10px 15px #ffffff60,
+		0 10px 20px 20px #ffffff40;
+	filter: blur(3px);
+	animation: var(--cl-circle-rotate-duration) circle_rotate linear infinite;
+}
+
+@keyframes circle_rotate {
+	100% {
+		transform: rotate(360deg)
+	}
+}
\ No newline at end of file
diff --git a/loaders/wobbling_circle/loader.html b/loaders/wobbling_circle/loader.html
new file mode 100644
index 0000000..59a56d0
--- /dev/null
+++ b/loaders/wobbling_circle/loader.html
@@ -0,0 +1,5 @@
+<div class="custom_loader_wrap">
+  <div class="custom_loader_inner">
+    <div class="custom_loader"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/loaders/wobbling_circle/loader.js b/loaders/wobbling_circle/loader.js
new file mode 100644
index 0000000..8e4876e
--- /dev/null
+++ b/loaders/wobbling_circle/loader.js
@@ -0,0 +1,4 @@
+(async function() { 
+  await awe.on_state('ready'); 
+  document.querySelector('.custom_loader_wrap').style.display = 'none'; 
+})();
\ No newline at end of file
diff --git a/loaders/wobbling_circle/wobbling_circle.mp4 b/loaders/wobbling_circle/wobbling_circle.mp4
new file mode 100644
index 0000000..852b043
Binary files /dev/null and b/loaders/wobbling_circle/wobbling_circle.mp4 differ
