@paydock/client-sdk/bundles/types/components/loader.d.ts

Paydock client sdk

export declare const TEMPLATE = "\n    <div class=\"cs-loader\">\n      <div class=\"cs-loader-inner\">\n        <label>\t\u25CF</label>\n        <label>\t\u25CF</label>\n        <label>\t\u25CF</label>\n        <label>\t\u25CF</label>\n        <label>\t\u25CF</label>\n        <label>\t\u25CF</label>\n      </div>\n    </div>\n";
export declare const STYLE = "\n    <style> \n        .cs-loader {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n        }\n        \n        .cs-loader-inner {\n          transform: translateY(-50%);\n          top: 50%;\n          position: absolute;\n          width: calc(100% - 200px);\n          color: #8e8d8c;\n          padding: 0 100px;\n          text-align: center;\n        }\n        \n        \n        .cs-loader-inner label {\n          font-size: 20px;\n          opacity: 0;\n          display:inline-block;\n        }\n        \n        @keyframes lol {\n          0% {\n            opacity: 0;\n            transform: translateX(-300px);\n          }\n          33% {\n            opacity: 1;\n            transform: translateX(0px);\n          }\n          66% {\n            opacity: 1;\n            transform: translateX(0px);\n          }\n          100% {\n            opacity: 0;\n            transform: translateX(300px);\n          }\n        }\n        \n        @-webkit-keyframes lol {\n          0% {\n            opacity: 0;\n            -webkit-transform: translateX(-300px);\n          }\n          33% {\n            opacity: 1;\n            -webkit-transform: translateX(0px);\n          }\n          66% {\n            opacity: 1;\n            -webkit-transform: translateX(0px);\n          }\n          100% {\n            opacity: 0;\n            -webkit-transform: translateX(300px);\n            -moz-transform: translateX(300px);\n          }\n        }\n        \n        .cs-loader-inner label:nth-child(6) {\n          -webkit-animation: lol 3s infinite ease-in-out;\n          -moz-animation: lol 3s infinite ease-in-out;\n          animation: lol 3s infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(5) {\n          -webkit-animation: lol 3s 100ms infinite ease-in-out;\n          -moz-animation: lol 3s 100ms infinite ease-in-out;\n          animation: lol 3s 100ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(4) {\n          -webkit-animation: lol 3s 200ms infinite ease-in-out;\n          -moz-animation: lol 3s 200ms infinite ease-in-out;\n          animation: lol 3s 200ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(3) {\n          -webkit-animation: lol 3s 300ms infinite ease-in-out;\n          -moz-animation: lol 3s 300ms infinite ease-in-out;\n          animation: lol 3s 300ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(2) {\n          -webkit-animation: lol 3s 400ms infinite ease-in-out;\n          -moz-animation: lol 3s 400ms infinite ease-in-out;\n          animation: lol 3s 400ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(1) {\n          -webkit-animation: lol 3s 500ms infinite ease-in-out;\n          -moz-animation: lol 3s 500ms infinite ease-in-out;\n          animation: lol 3s 500ms infinite ease-in-out;\n        }\n    </style>\n";
export declare const EXTRA_TEMPLATE = "\n    <div class=\"circ\">\n      <div class=\"load\">A little patience ...</div>\n      <div class=\"hands\"></div>\n      <div class=\"body\"></div>\n      <div class=\"head\">\n        <div class=\"eye\"></div>\n      </div>\n    </div>\n";
export declare const EXTRA_STYLE = "\n    <style>\n        html{width: 100%;height: 100%;}\n        body{margin: 0px;padding: 0px;background-color: #111;}\n        \n        .eye{\n          width: 20px; height: 8px;\n          background-color: #eee;\n          border-radius:0px 0px 20px 20px;\n          position: relative;\n          top: 40px;\n          left: 10px;\n          box-shadow:  40px 0px 0px 0px #eee;              \n        }\n        \n        .head{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;          \n          position: relative;\n          margin: -250px auto;\n          width: 80px; height: 80px;\n          background-color: #111;\n          border-radius:50px;\n          box-shadow: inset -4px 2px 0px 0px #eee;\n           -webkit-animation:node 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;\n          -moz-animation:node 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;\n          animation:node 1.5s infinite alternate;\n          animation-timing-function:ease-out;\n        }\n        .body{ \n          position: relative;\n          margin: 90px auto;\n          width: 140px; height: 120px;\n          background-color: #111;\n          border-radius: 50px/25px ;\n          box-shadow: inset -5px 2px 0px 0px #eee;\n          -webkit-animation:node2 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;  \n          -moz-animation:node2 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;  \n          animation:node2 1.5s infinite alternate;\n          animation-timing-function:ease-out; \n        }\n        \n        @keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n        @-moz-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @-moz-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n        @-webkit-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @-webkit-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n      \n               \n        .circ{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;\n           margin: 60px auto;\n          width: 180px; height: 180px;\n          background-color: #111;\n          border-radius: 0px 0px 50px 50px;\n          position: relative;\n          z-index: -1;  \n          left: 0%;\n          top: 20%;\n          overflow: hidden;\n        }\n        \n        .hands{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;\n          margin-top: 140px;\n          width: 120px;height: 120px;\n          position: absolute;\n          background-color: #111;\n          border-radius:20px;\n          box-shadow:-1px -4px 0px 0px #eee;\n          transform:rotate(45deg);\n          -webkit-transform:rotate(45deg);\n          -mox-transform:rotate(45deg);\n          top:75%;left: 16%;\n          z-index: 1;\n          -webkit-animation:node2 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;\n          -moz-animation:node2 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;\n          animation:node2 1.5s infinite alternate;\n          animation-timing-function:ease-out;\n        }\n        \n        .load{  position: absolute;\n          width: 100px; height: 20px;\n           margin: -10px auto;\n           -webkit-font-smoothing: antialiased;\n          -moz-font-smoothing: antialiased;\n          font-smoothing: antialiased;\n          font-family: 'Julius Sans One', sans-serif;\n          font-size:30px;\n          font-weight:400;\n          color:#eee;\n          left: 10%;\n          top: 5%;\n        }\n    </style>\n";
//# sourceMappingURL=loader.d.ts.map