Установите высоту и ширину спиннера для отзывчивых элементов Div ⇐ CSS

[Anonymous]

Я использую ответственный макет CSS-Grid для Интернета. В макете есть три секции левша, контент и справа.
Для тех разделов я должен использовать спиннеры. Ширина и высота спиннеров должны увеличиваться или уменьшаться в зависимости от размера этих раздела.

Код: Выделить всё

.container {
display: grid;
grid-template-areas:
"header header header"
"leftmenu content right"
"footer footer footer";
grid-template-columns: 1fr 4fr 1.5fr;
grid-template-rows: 10vh 80vh 10vh;
background-color: #2196F3;
padding: 0px;
gap: 10px;
margin: 0px;
}

.container>div {
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
}

.container>div.header {
grid-area: header;
text-align: center;
}

.container>div.leftmenu {
grid-area: leftmenu;
}

.container>div.content {
grid-area: content;
}

.container>div.footer {
grid-area: footer;
}

.container>div.right {
grid-area: right;
}

/* Spinner */
.spinnerarea {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 0px;
opacity: 0.9
}

.spinnerarea>.spinner {
border: 10px solid #f3f3f3;
/* Light grey */
border-top: 10px solid #3498db;
/* Blue */
border-radius: 50%;
width: 10px;
height: 10px;
animation: spin 2s linear infinite;
position: absolute;
top: 45%;
left: 45%;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}< /code>



My Header



[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]





Content
Lorem ...





[h4]Right[/h4]
Right side content


[h4]Footer[/h4]

Ссылка Github-
https://github.com/reegan2024/javascrip ... -grid.html

Подробнее здесь: https://stackoverflow.com/questions/797 ... v-elements