67 lines
1.4 KiB
CSS
67 lines
1.4 KiB
CSS
/* 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;
|
|
} |