Skip to content

Instantly share code, notes, and snippets.

@ridwanyinus

ridwanyinus/apollo-splash-screen.markdown

Created March 19, 2025 08:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ridwanyinus/64f524cbde1572ad5a2934c1760e6774 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ridwanyinus/64f524cbde1572ad5a2934c1760e6774 to your computer and use it in GitHub Desktop.
Download ZIP
Apollo Splash screen
Raw
index.html
<div class="splash-screen--container">
<div class="splash-screen--animation">
<div class="splash-screen--logo-container">
<div class="splash-screen--logo">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#009CEF" d="M60.864,7.831c-1.635-3.414-5.696-6.718-11.132-6.718c-5.833-0.032-9.655,2.938-11.51,6.718L1.96,81.843
c-1.12,2.351-2.201,6.833,0.508,11.504c2.709,4.671,6.633,6.064,10.844,6.065c0,0,37.247-0.511,62.245-61.602L60.864,7.831z"/>
<path fill="#009CEF" d="M97.121,81.843c1.12,2.351,2.202,6.833-0.507,11.504c-2.71,4.671-7.332,6.065-10.845,6.065
c-3.512,0-11.933,1.321-11.933-22.732c0-14.156,3.251-35.732,3.251-35.732L97.121,81.843z"/>
</svg>
</div>
<div class="splash-screen--logo__absolute">
<div class="splash-screen--logo" id="splash-screen--rocket">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path fill="#009CEF" d="M87.286,31.269c0.669,0.225,1.63,0.28,2.445-0.437c0.815-0.717,0.892-1.627,0.827-2.147l-2.181-16.414
c-0.094-0.754-0.657-1.641-1.694-1.988c-1.109-0.378-2.027-0.056-2.622,0.547L72.423,22.616c-0.363,0.377-0.849,1.137-0.629,2.2
c0.217,1.063,0.884,1.555,1.685,1.824L87.286,31.269z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="splash-screen--circle">
</div>
<div class="splash-screen--logo-text">APOLLO</div>
</div>
Raw
script.js
// Made for the university of groningen (rug.nl) //
// Intro and loading screen animation //
// The screen closes when the app is loaded //
Raw
style.scss
body {
margin: 0;
}
.splash-screen--container {
position:absolute;
width:100%;
height:100%;
overflow:hidden;
z-index: 2000;
background-color: #F0F0F0;
}
.splash-screen-backdrop {
position: absolute;
margin: auto;
width: 600px;
height: 350px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
top: calc(50% + 30px);
left: 50%;
transform: translate(-50%, -50%);
box-shadow: #606060 0 1px 20px;
}
.splash-screen--animation {
position:absolute;
width:100vw;
height:100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: stretch;
overflow:hidden;
}
.splash-screen--logo-container {
position:relative;
width:100px;
height:100px;
}
.splash-screen--logo__absolute {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.splash-screen--logo{
position:relative;
width:100%;
height:100%;
top: 0;
left: 0;
animation-name: logoAnimation,logoLoadingAnimation;
animation-iteration-count:1,infinite;
animation-duration: 0.5s, 6s;
animation-delay: 0s, 1s;
animation-timing-function: linear,ease-out;
-webkit-animation-name: logoAnimation,logoLoadingAnimation;
-webkit-animation-iteration-count:1,infinite;
-webkit-animation-duration: 0.5s, 6s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-timing-function: linear,ease-out;
& svg{
width:100%;
height:100%;
}
}
#splash-screen--rocket{
opacity:0;
animation-delay: 0.25s;
animation-name:rocketAnimation;
animation-duration: 0.25s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-delay: 0.25s;
-webkit-animation-name:rocketAnimation;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.splash-screen--circle-container{
position:absolute;
height: 100vh; width: 200vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.splash-screen--circle{
position:absolute;
visibility: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:#009CEF;
width:150%;
padding-bottom: 150%;
opacity:0;
border-radius:50%;
transform-origin: center;
animation-name: circleAnimation;
animation-duration: 0.5s;
animation-iteration-count: 1;
-webkit-animation-name: circleAnimation;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
}
@keyframes circleAnimation {
1% { visibility: visible; opacity: 1; }
20% {opacity: 1;}
80% {transform:scale(0.02) translate(-2500%, -2500%); opacity: 1;}
100% {transform:scale(0.02) translate(-2500%, -2500%);
opacity: 0;}
}
@keyframes rocketAnimation {
0% { opacity:0; left:-7%; top:20%;}
100% {opacity:1;left:0; top:0;}
}
@keyframes logoAnimation {
0% {opacity:0; top:15%;}
100% {left:0; top:0;}
}
@keyframes logoText {
0% {opacity:0; top:52.5%;}
60% {opacity:0; top:52.5%;}
100% {opacity:1; top:50%;}
}
@keyframes logoLoadingAnimation {
0% {transform: rotateY(0deg);}
15% {transform: rotateY(360deg);}
100% {transform: rotateY(360deg);}
}
.splash-screen--logo-text{
position:absolute;
text-align:center;
top: 50%;
margin-top: 75px;
width:100%;
font-family: Roboto,sans-serif;
font-weight:500;
animation-name: logoText;
animation-duration: 1s;
}
.splash-screen--message {
position: absolute;
top: calc(50% + 160px);
width: 550px;
left: 50%;
transform: translateX(-50%);
padding: 8px 5px 0;
border-top: 1px solid #C0C0C0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment