ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Обновлены стили загрузки

Browse Source
This commit is contained in:
goodmice 2022-12-28 16:55:19 +05:00
parent b7ceee2fca
commit 5b4ba6c6f2
No known key found for this signature in database
GPG Key ID: EA4AA16454AC96C8
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles/components/loader.css → src/styles/components/loader.less
View File

@ -1,20 +1,25 @@
/* original from https://loading.io/css/ */ /* original from https://loading.io/css/ */
@loader-bg: rgba(255, 255, 255, 0.1);
@loader-color: rgb(226, 29, 29);
.lds-ripple { .lds-ripple {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 80px; width: 80px;
height: 80px; height: 80px;
}
.lds-ripple div { & div {
position: absolute; position: absolute;
border: 4px solid rgb(226, 29, 29); border: 4px solid @loader-color;
opacity: 1; opacity: 1;
border-radius: 50%; border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
} }
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s; & div:nth-child(2) {
animation-delay: -0.5s;
}
} }
@keyframes lds-ripple { @keyframes lds-ripple {
0% { 0% {
@ -33,12 +38,12 @@
} }
} }
.loader-container{ .loader-container {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.loader-content{ .loader-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -46,14 +51,14 @@
grid-column-start: 1; grid-column-start: 1;
grid-column-end: span 3; grid-column-end: span 3;
grid-row-start: 1; grid-row-start: 1;
&.loader-content-fill {
height: 100%;
width: 100%;
}
} }
.loader-content.loader-content-fill { .loader-overlay {
height: 100%;
width: 100%;
}
.loader-overlay{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: span 3; grid-column-end: span 3;
grid-row-start: 1; grid-row-start: 1;
@ -66,13 +71,13 @@
border-radius: 40px; border-radius: 40px;
} }
.loader-fade{ .loader-fade {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: span 3; grid-column-end: span 3;
grid-row-start: 1; grid-row-start: 1;
background-color: rgba(255, 255, 255, 0.4); background-color: @loader-bg;
align-self: stretch; align-self: stretch;
justify-self: stretch; justify-self: stretch;
z-index: 1; z-index: 1;
box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4); box-shadow: 0px 0px 6px 5px @loader-bg;
} }

2
src/styles/pages/App.less
View File

@ -1,4 +1,4 @@
@import '../components/loader.css'; @import '../components/loader.less';
#root, .app{ #root, .app{
min-height:100%; min-height:100%;