Skip to content

Instantly share code, notes, and snippets.

@nektobit

nektobit/index.html

Created March 21, 2019 02:30
Show Gist options
  • Save nektobit/74d6a486b495b1a7cb3deadefe48b534 to your computer and use it in GitHub Desktop.
Save nektobit/74d6a486b495b1a7cb3deadefe48b534 to your computer and use it in GitHub Desktop.
Download ZIP
spinner with changed text (pure html)
Raw
index.html
<html>
<body style="margin: 0">
<p>Content</p>
<div style="width: 800px; height: 600px;">
<!-- just parent div -->
<div id="textspinner_wrapper">
<div id="textspinner_circle"></div>
<p id="textspinner_text"></p>
</div>
</div>
</body>
<style>
/* TEXTSPINNER */
/* textspinner settings */
:root {
--ts-end-text: 'Very soon everything will load';
--ts-time: 20s;
--ts-fontsize: 25px;
--ts-background: rgba(255, 255, 255, 0.75);
--ts-color: #4CAF50;
}
@keyframes changetext {
0% { content:"Collecting Data"; }
25% { content:"Tabulating"; }
50% { content:"Preparing Results"; }
75% { content:"Rendering elements"; }
100% { content:"Final Touches"; }
}
/* textspinner code */
#textspinner_wrapper {
background-color: var(--ts-background);
height: 100vh;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#textspinner_text:after {
font-size: var(--ts-fontsize);
content: var(--ts-end-text);
animation: changetext var(--ts-time) linear;
color: var(--ts-color);
}
#textspinner_wrapper.hide {
display: none!important;
}
#textspinner_circle {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid var(--ts-color);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
/* TEXTSPINNER */
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment