73 lines
2.4 KiB
CSS
73 lines
2.4 KiB
CSS
/** Styles for all themes */
|
|
|
|
/* Style for the main element */
|
|
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0.5px; /* 0.5px top and 0.5px bottom */
|
|
}
|
|
|
|
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner {
|
|
height: calc(100% - 1px); /* 100% - 1px for not cutting off the edges */
|
|
width: calc(100% - 1px); /* 100% - 1px for not cutting off the edges */
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
|
|
.TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div {
|
|
border: 6px solid black;
|
|
border-radius: 50%;
|
|
border-color: var(--TcHmi_Controls_Beckhoff_TcHmiTreeview-loading-spinner-color) transparent transparent transparent;
|
|
/*centering*/
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
body:not(.tchmi-body-designer) .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div {
|
|
animation: TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
}
|
|
|
|
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(1) {
|
|
animation-delay: -0.45s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
|
}
|
|
|
|
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(2) {
|
|
animation-delay: -0.3s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
|
}
|
|
|
|
body .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(3) {
|
|
animation-delay: -0.15s; /* add "body" to selector, otherwise it would be overwritten by the tchmi-body-designer selector */
|
|
}
|
|
|
|
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(1) {
|
|
transform: rotate(85deg);
|
|
}
|
|
|
|
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(2) {
|
|
transform: rotate(170deg);
|
|
}
|
|
|
|
body.tchmi-body-designer .TcHmi_Controls_Beckhoff_TcHmiLoadingSpinner-loading-spinner div:nth-child(3) {
|
|
transform: rotate(220deg);
|
|
}
|