mirror of
https://github.com/enso-org/enso.git
synced 2024-12-20 00:01:37 +03:00
37af06b14d
[Task link](https://www.pivotaltracker.com/story/show/183992025) This PR moves the documentation visualization into a separate crate and sets up the Tailwind CSS framework for this new crate. We would use Tailwind to style our HTML documentation. https://user-images.githubusercontent.com/6566674/208719213-85f78f7e-8dc2-45d5-95a1-db4baad1bda1.mp4
44 lines
766 B
HTML
44 lines
766 B
HTML
<div>
|
|
<style>
|
|
.spinner {
|
|
margin: 40vh auto;
|
|
width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
.spinner > div {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: rgb(50, 48, 47);
|
|
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.spinner .bounce1 {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.spinner .bounce2 {
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
<div class="spinner">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div class="bounce3"></div>
|
|
</div>
|
|
</div>
|