Published
Edited
May 2, 2018
1 star
html`<p>
I be a loader bro <span class="loader" id="loader-4">
<span></span>
<span></span>
<span></span>
</span>
</p>`
html`<style>html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: ${fontSize}px;
}
/* ALL LOADERS */
.loader{
display: inline-block;
}
/* LOADER 4 */
.loader span{
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: #3498db;
margin: 0.05em;
opacity: 0;
}
.loader span:nth-child(1){
animation: opacitychange ${step}s ease-in-out infinite;
}
.loader span:nth-child(2){
animation: opacitychange ${step}s ease-in-out ${step / 3 * 1}s infinite;
}
.loader span:nth-child(3){
animation: opacitychange ${step}s ease-in-out ${step / 3 * 2}s infinite;
}
@keyframes opacitychange{
0%, ${1/ step * 100}%{
opacity: 0.1;
}
${1/step*100/2}%{
opacity: 1;
}
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
