.modalOrd { position: relative; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000000; background-color: rgba(0, 0, 0, 0.6); } .loader { width: 5rem; position: relative; } .loader-text { position: relative; top: 0; padding: 0; margin: 0; color: #C8B6FF; animation: text_713 3.5s ease both infinite; font-size: 0.8rem; letter-spacing: 1px; } .load { background-color: #9A79FF; border-radius: 3rem; display: block; height: 1rem; width: 1rem; bottom: 0; position: relative; transform: translateX(64px); animation: loading_713 3.5s ease both infinite; } .load::before { position: relative; content: ""; width: 100%; height: 100%; background-color: #D1C2FF; border-radius: inherit; animation: loading2_713 3.5s ease both infinite; } @keyframes text_713 { 0% { letter-spacing: 1px; transform: translateX(0px); } 40% { letter-spacing: 2px; transform: translateX(26px); } 80% { letter-spacing: 1px; transform: translateX(32px); } 90% { letter-spacing: 2px; transform: translateX(0px); } 100% { letter-spacing: 1px; transform: translateX(0px); } } @keyframes loading_713 { 0% { width: 16px; transform: translateX(0px); } 40% { width: 100%; transform: translateX(0px); } 80% { width: 16px; transform: translateX(64px); } 90% { width: 100%; transform: translateX(0px); } 100% { width: 16px; transform: translateX(0px); } } @keyframes loading2_713 { 0% { transform: translateX(0px); width: 16px; } 40% { transform: translateX(0%); width: 80%; } 80% { width: 100%; transform: translateX(0px); } 90% { width: 80%; transform: translateX(15px); } 100% { transform: translateX(0px); width: 16px; } } /* Modal Content/Box */ .modalOrd-content-small { margin: 0.4rem auto; width: 50%; } .modalOrd-content { margin: 1.4rem auto; padding-left: 20%; width: 50%; } .modalOrd-content-large { margin: 2.4rem auto; padding-left: 20%; width: 50%; }