.loader {background-color: rgba(0, 0, 0, 0.60);position: fixed;top:0px;bottom:0px;height: 100%;width: 100%;z-index: 9999;margin-top: 0px;}.loader--open {animation-name: loading--open;animation-duration: 0.1s;animation-fill-mode: forwards;}.loader--close {animation-name: loading--close;animation-duration: 0.8s;animation-fill-mode: forwards;}.loader--btn{position: fixed;right: 0px;width: 80px;height: 80px;}.loader--btn--close {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: none;outline: none;border: none;font-size: 40px;color: #aaaaaa;transition: color 0.15s;}.loader--btn--close:hover {color: #ff0000;cursor: pointer;}@keyframes loading--open {0%{ opacity: 0;}30%{ opacity: 0.8;}100%{ opacity: 1 ;}}@keyframes loading--close {0%{ opacity: 1;}100%{  opacity: 0;}}.loader-centered {position: relative;top: 35%;height: 230px;width: 230px;display: flex;justify-content: center;align-items: center;margin-left: auto;margin-right: auto;}.loader-centered-eq {position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;margin-top: -100px;margin-left: -100px;text-align: center;}.object-circle{border: 16px solid #f3f3f3;border-top: 16px solid #20b426;border-radius: 50%;margin-right: auto;margin-left: auto;width: 120px;height: 120px;animation: spin 1.2s linear infinite;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.textLoaderCircle::before{position: relative;content: "ระบบกำลังประมวลผล...";font-size: 18px;color: rgba(255, 255, 255, 0.8);font-weight: 600;animation: animateText 2.0s infinite  alternate;}.group--text--loader{display: block;}.group--text--loader span{font-size: 20px;color: #FFC764;font-weight: 400;text-align: center;}.group--text--loader h2{font-size: 20px;color: #FFC764;font-weight: 900;text-align: center;animation: animate--blink 1.6s infinite;}@keyframes animate--blink {0%,100%{opacity: 1.0;}50%{opacity: 0.0;}}.group--text--loader span:nth-child(1)::before{content: "ระบบกำลังประมวลผล...";animation: animateText 2.0s infinite  alternate;}.textLoader::before{content: "ระบบกำลังประมวลผล...";font-size: 20px;color: #e81c62;font-weight: 900;animation: animateText 1.5s infinite  alternate;}@keyframes animateText {0% {content: "ร";}10% {content: "ระ";}16% {content: "ระบ";}19% {content: "ระบบ";}22% {content: "ระบบก";}25% {content: "ระบบกำ";}28% {content: "ระบบกำล";}31% {content: "ระบบกำลั";}34% {content: "ระบบกำลัง";}37% {content: "ระบบกำลังป";}40% {content: "ระบบกำลังปร";}43% {content: "ระบบกำลังประ";}46% {content: "ระบบกำลังประม";}49% {content: "ระบบกำลังประมว";}52% {content: "ระบบกำลังประมวล";}55% {content: "ระบบกำลังประมวลผ";}58% {content: "ระบบกำลังประมวลผล";}61%,85% {content: "ระบบกำลังประมวลผล.";}69%,93% {content: "ระบบกำลังประมวลผล..";}77%,100%  {content: "ระบบกำลังประมวลผล...";}}.middle {margin-right: auto;margin-left: auto;}.text--loader--center{position: relative;color:rgba(255,255,255,0.8);font-weight: 600;font-size: 18px;}.bar {width: 15px;height: 100px;display: inline-block;transform-origin: bottom center;}.circle--load{margin-right: auto;margin-left: auto;}.circle--load span{position: absolute;top: 0;left: 0;width: 100%;height: 100%;animation: animate--circle--load 3s linear infinite}.circle--load span:nth-child(1){border: 3px solid #CDFFFC;border-radius:  30% 70% 70% 30% / 30% 30% 70% 70%;}.circle--load span:nth-child(2){border: 3px solid #FF884B;border-radius:  30% 70% 70% 30% / 30% 30% 70% 70%;animation-direction: reverse;}.circle--load span:nth-child(3){border: 3px solid #FF577F;border-radius:  46% 34% 17% 52% / 59% 48% 17% 29% ;animation-duration: 5s;}@keyframes animate--circle--load {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.bar:nth-child(1) {animation: loader1 0.8s linear infinite;animation-delay: 0.1s;}.bar:nth-child(2) {animation: loader2 0.8s linear infinite;animation-delay: 0.2s;}.bar:nth-child(3) {animation: loader3 0.8s linear infinite;animation-delay: 0.3s;}.bar:nth-child(4) {animation: loader4 0.8s linear infinite;animation-delay: 0.4s;}.bar:nth-child(5) {animation: loader5 0.8s linear infinite;animation-delay: 0.5s;}.bar:nth-child(6) {animation: loader1 0.8s linear infinite;animation-delay: 0.6s;}.bar:nth-child(7) {animation: loader2 0.8s linear infinite;animation-delay: 0.7s;}.bar:nth-child(8) {animation: loader3 0.8s linear infinite;animation-delay: 0.8s;}.bar:nth-child(9) {animation: loader4 0.8s linear infinite;animation-delay: 0.9s;}.bar:nth-child(10) {animation: loader5 0.8s linear infinite;animation-delay: 1.0s;}.bar:nth-child(11) {animation: loader1 0.8s linear infinite;animation-delay: 1.1s;}@keyframes loader1 {0% {transform: scaleY(0.1);background: #e15b64;}30% {transform: scaleY(0.4);background: #e15b64;}50% {transform: scaleY(1);background: #e15b64 ;}70% {transform: scaleY(0.4);background: #e15b64;}100% {transform: scaleY(0.1);background: #e15b64 ;}}@keyframes loader2 {0% {transform: scaleY(0.1);background: #f47e60;}30% {transform: scaleY(0.4);background: #f47e60;}50% {transform: scaleY(1);background: #f47e60 ;}75% {transform: scaleY(0.4);background: #f47e60;}100% {transform: scaleY(0.1);background: #f47e60 ;}}@keyframes loader3 {0% {transform: scaleY(0.1);background: #f8b26a;}30% {transform: scaleY(0.4);background: #f8b26a;}50% {transform: scaleY(1);background: #f8b26a;}75% {transform: scaleY(0.4);background: #f8b26a;}100% {transform: scaleY(0.1);background: #f8b26a;}}@keyframes loader4 {0% {transform: scaleY(0.1);background: #abbd81;}30% {transform: scaleY(0.4);background: #abbd81;}50% {transform: scaleY(1);background: #abbd81 ;}75% {transform: scaleY(0.4);background: #abbd81;}100% {transform: scaleY(0.1);background: #abbd81 ;}}@keyframes loader5 {0% {transform: scaleY(0.1);background: #849b87;}30% {transform: scaleY(0.4);background: #849b87;}50% {transform: scaleY(1);background: #849b87 ;}75% {transform: scaleY(0.4);background: #849b87;}100% {transform: scaleY(0.1);background: #849b87 ;}}.blink_me {animation: blinker 1.5s linear infinite;}@keyframes blinker {50% {opacity: 0;}}