diff --git a/css/loader.css b/css/loader.css new file mode 100644 index 0000000..85e84e0 --- /dev/null +++ b/css/loader.css @@ -0,0 +1,67 @@ +/* This loader is taken directly from the website therange.co.uk (The Range, trading as CDS (Superstores International) Limited.) +This loader has been mocified to suit the styling and use cases required for ourPlace. Original loader is not my property. */ + +.loaderWrapper { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.loader { + position: relative; + margin: 0 auto; + height: 70px; + width: 70px; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + width: 100%; + position: absolute; + top: 0; bottom: 0; left: 0; right: 0; + margin: auto; + transform-origin: center center; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + stroke: #FFDD05; + animation: dash 3s cubic-bezier(1,.12,.22,1.01) infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { transform: rotate(360deg); } +} + +@keyframes dash { + 0% { stroke-dasharray: 0, 150; } + 40% { stroke-dasharray: 130, 200; } + 80% { stroke-dasharray: 0, 25; } + 100% { stroke-dasharray: 0, 200; } +} + +.loaderLogoContain { + position: absolute; + top: 0; left: 0; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.loaderLogo { + width: 45%; + height: 45%; +} + +.loaderLoadingText { + color: #FFDD05; + font-size: 15px; + margin-top: 20px; + font-weight: 500; +} \ No newline at end of file