@egjs/view3d
Version:
Fast & Customizable glTF 3D model viewer, packed with full of features!
77 lines (66 loc) • 1.44 kB
CSS
.view3d-lb-overlay {
display: flex;
position: absolute;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
top: 0;
left: 0;
flex-direction: column;
}
.view3d-lb-overlay.type-top, .view3d-lb-overlay.is-top {
height: auto;
background-color: transparent ;
}
.view3d-lb-overlay.type-top .view3d-lb-label, .view3d-lb-overlay.is-top .view3d-lb-label {
display: none;
}
.view3d-lb-overlay.type-top .view3d-lb-base, .view3d-lb-overlay.is-top .view3d-lb-base {
width: 100%;
margin-left: 0%;
border-radius: 0px;
}
.view3d-lb-wrapper {
position: relative;
width: 100%;
}
.view3d-lb-base {
margin-left: auto;
margin-right: auto;
border-radius: 9999px;
overflow: hidden;
position: relative;
margin-bottom: 5px;
}
.view3d-lb-base.type-spinner, .view3d-lb-base.is-spinner {
height: 0;
background-color: transparent;
transition: all 500ms;
}
.view3d-lb-base.type-spinner .view3d-lb-filler, .view3d-lb-base.is-spinner .view3d-lb-filler {
background-color: transparent;
border-style: solid;
width: 100%;
box-sizing: border-box;
animation: view3d-lb-spin 1.2s linear infinite;
}
.view3d-lb-filler {
position: absolute;
top: 0;
left: 0;
border-radius: 9999px;
width: 0;
height: 100%;
}
.view3d-lb-label {
text-align: center;
}
@keyframes view3d-lb-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}