Skip to content

Commit 5b73846

Browse files
btabacopybara-github
btaba
authored and
copybara-github
committed
Upgrade MuJoCo Live loading screen
PiperOrigin-RevId: 919112273 Change-Id: I0ffdf908e32d4197e007ebcc2d9f5136b59cf6b3
1 parent 15d27b3 commit 5b73846

2 files changed

Lines changed: 104 additions & 3 deletions

File tree

‎src/experimental/studio/live.css‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,93 @@
44
left: 0;
55
width: 100%;
66
height: 100%;
7-
background: rgba(0,0,0,0.6);
7+
background: radial-gradient(circle at 50% 50%, #0a0f1c 0%, #020407 100%);
88
z-index: 10000;
99
display: none;
1010
align-items: center;
1111
justify-content: center;
12+
overflow: hidden;
13+
transition: opacity 0.3s ease;
14+
}
15+
#loadingOverlay::before {
16+
/* 3D Ground Grid */
17+
content: '';
18+
position: absolute;
19+
top: 0;
20+
left: 0;
21+
width: 100%;
22+
height: 100%;
23+
background-image:
24+
linear-gradient(rgba(123, 147, 232, 0.035) 1px, transparent 1px),
25+
linear-gradient(90deg, rgba(123, 147, 232, 0.035) 1px, transparent 1px);
26+
background-size: 50px 50px;
27+
background-position: center center;
28+
transform: perspective(500px) rotateX(60deg) scale(2.5);
29+
transform-origin: center center;
30+
opacity: 0.8;
31+
pointer-events: none;
32+
animation: grid-drift 60s linear infinite;
33+
}
34+
@keyframes grid-drift {
35+
0% {
36+
background-position: center 0;
37+
}
38+
100% {
39+
background-position: center 1000px;
40+
}
1241
}
1342
.loading-container {
1443
color: #fff;
1544
font-size: 24px;
1645
font-family: sans-serif;
1746
text-align: center;
1847
}
48+
.loading-visual {
49+
position: relative;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
margin-bottom: 20px;
54+
}
55+
.wireframe-cage {
56+
position: absolute;
57+
width: 320px;
58+
height: 320px;
59+
transform-origin: center center;
60+
animation: spin-cage 25s linear infinite;
61+
opacity: 0.65;
62+
z-index: 0;
63+
pointer-events: none;
64+
}
65+
@keyframes spin-cage {
66+
0% {
67+
transform: rotate(0deg) scale(0.9);
68+
}
69+
50% {
70+
transform: rotate(180deg) scale(1.04);
71+
}
72+
100% {
73+
transform: rotate(360deg) scale(0.9);
74+
}
75+
}
76+
.logo-container-svg {
77+
position: relative;
78+
width: 300px;
79+
height: 100px;
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
z-index: 1;
84+
}
85+
.brand-logo-svg {
86+
width: 100%;
87+
height: auto;
88+
}
1989
.loading-title {
90+
font-size: 18px;
91+
margin-top: 120px; /* Push down below the bottom vertices of the rotating cube. */
2092
margin-bottom: 16px;
93+
color: rgba(255, 255, 255, 0.75);
2194
}
2295
.loading-subtitle {
2396
font-size: 14px;
@@ -29,10 +102,10 @@
29102
opacity: 0.6;
30103
}
31104
.loading-download-label {
32-
font-size: 13px;
105+
font-size: 14px;
33106
}
34107
.loading-download-file {
35-
font-size: 13px;
108+
font-size: 14px;
36109
}
37110
#dropOverlay {
38111
position: fixed;

‎src/experimental/studio/live.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,36 @@
88
<body style="margin: 0; overflow: hidden">
99
<div id="loadingOverlay">
1010
<div class="loading-container">
11+
<div class="loading-visual">
12+
<!-- Rotating neon light-blue physics wireframe cage. -->
13+
<svg class="wireframe-cage" viewBox="0 0 200 200">
14+
<g class="cage-lines">
15+
<polygon points="130,10 190,130 96,190 10,96" fill="none" stroke="#00f5d4" stroke-width="0.8" opacity="0.75" />
16+
<line x1="10" y1="96" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
17+
<line x1="45" y1="106" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
18+
<line x1="45" y1="106" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
19+
<line x1="45" y1="106" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.5" opacity="0.45" />
20+
<line x1="150" y1="100" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
21+
<line x1="150" y1="100" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
22+
<line x1="150" y1="100" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
23+
<line x1="150" y1="100" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.4" opacity="0.35" />
24+
</g>
25+
</svg>
26+
27+
<!-- Centered MuJoCo SVG Logo -->
28+
<div class="logo-container-svg">
29+
<svg viewBox="90 30 415 90" class="brand-logo-svg">
30+
<g fill="rgba(255, 255, 255, 0.98)" filter="drop-shadow(0 0 6px rgba(123, 147, 232, 0.25)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25))">
31+
<path d="M136.1,118.4l-19.7-47.3l-7.1,41.6H96.5l15.4-80.9l0,0L136.4,90l25.5-58.1l0,0l13.9,80.9H163l-6.3-41.6 L136.1,118.4L136.1,118.4L136.1,118.4z M211.9,113.2c-4.5,0-8.6-0.9-12.1-2.6c-3.5-1.7-6.3-4.3-8.3-7.6c-2-3.4-3-7.5-3-12.3V55.2h13.6v34.1 c0,2.8,0.4,5,1.1,6.7c0.7,1.7,1.8,3,3.3,3.9s3.2,1.3,5.3,1.3s3.9-0.4,5.3-1.3s2.5-2.2,3.3-3.9c0.7-1.7,1.1-4,1.1-6.8V55.2h13.6 v35.5c0,4.8-1,9-3,12.3c-2,3.4-4.7,5.9-8.3,7.6C220.4,112.4,216.4,113.2,211.9,113.2L211.9,113.2z M260.1,113.6c-3,0-5.9-0.5-8.7-1.4c-2.8-0.9-5.3-2.4-7.6-4.2l6.1-10.8c1.6,1.3,3.1,2.3,4.5,2.9s2.9,1,4.2,1 c1.9,0,3.5-0.4,4.6-1.2s1.9-2,2.4-3.7c0.5-1.7,0.8-4,0.8-6.9V36.1h13.3V90c0,5.3-0.7,9.7-2.2,13.2c-1.5,3.5-3.6,6.1-6.5,7.8 C268.2,112.8,264.5,113.6,260.1,113.6L260.1,113.6z M325.8,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6c4.7-2.6,9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6 c2.8,4.5,4.2,9.6,4.2,15.1s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C336.5,111.9,331.3,113.2,325.8,113.2L325.8,113.2z M325.8,100.9c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7 c-1.5-2.7-3.5-4.7-6-6.2s-5.4-2.3-8.6-2.3s-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9 c1.5,2.6,3.5,4.7,6.1,6.1C320.1,100.1,322.8,100.9,325.8,100.9L325.8,100.9z M408.1,113.6c-7.3,0-13.9-1.7-19.9-5.2c-6-3.5-10.7-8.2-14.2-14.2c-3.5-6-5.2-12.5-5.2-19.7 s1.7-13.8,5.2-19.9c3.5-6.1,8.3-10.9,14.4-14.5c6.1-3.6,13-5.4,20.5-5.4c3.4,0,6.7,0.5,9.9,1.4c3.3,0.9,6.5,2.2,9.6,4l0.1,15.4 c-3.2-2.8-6.5-4.8-9.8-6.2c-3.3-1.4-6.7-2.1-10.2-2.1c-4.8,0-9.2,1.2-13.2,3.6c-4,2.4-7.2,5.7-9.6,9.9c-2.4,4.2-3.5,8.8-3.5,13.8 s1.2,9.4,3.5,13.5c2.4,4.1,5.5,7.3,9.6,9.7c4,2.4,8.5,3.6,13.4,3.6c2.6,0,5-0.3,7.1-0.8c2.1-0.5,4.1-1.4,6.2-2.7 c2-1.2,4.2-2.9,6.7-5l-0.1,15.5c-3.1,1.7-6.4,3.1-9.9,4C415.1,113.2,411.6,113.6,408.1,113.6L408.1,113.6z M473.7,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6s9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6c2.8,4.5,4.2,9.6,4.2,15.1 s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C484.4,111.9,479.3,113.2,473.7,113.2L473.7,113.2z M473.7,100.9 c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7c-1.5-2.7-3.5-4.7-6-6.2 s-5.4-2.3-8.6-2.3c-3.2,0-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9s3.5,4.7,6.1,6.1 C468,100.1,470.7,100.9,473.7,100.9L473.7,100.9z"/>
32+
</g>
33+
</svg>
34+
</div>
35+
</div>
36+
1137
<div class="loading-title">Loading model&hellip;</div>
1238
<div class="loading-subtitle">This may take a moment for large models.</div>
39+
40+
<!-- Asset Download Indicator -->
1341
<div id="loadingDownload" class="loading-download">
1442
<div class="loading-download-label">Downloading asset file</div>
1543
<div id="loadingDownloadFile" class="loading-download-file"></div>

0 commit comments

Comments
 (0)