app/views/layouts/pagelet_rails/loading_placeholder.erb
<% height = pagelet_options.placeholder.try(:[], :height) %>
<% height = height.is_a?(Numeric) ? "#{height}px" : 'auto' %>
<% text = pagelet_options.placeholder.try(:[], :text) || 'Loading ...' %>
<style type="text/css">
/* Three Bounce */
.spinner.spinner-three-bounce {
margin: auto;
width: 70px;
text-align: center;
}
.spinner-three-bounce > div {
width: 16px;
height: 16px;
background-color: #3498db;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner-three-bounce .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner-three-bounce .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<div style="display: table; height: <%= height %>; overflow: hidden; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="text-center">
<div class="spinner spinner-three-bounce">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<br>
<span>
<%= text %>
</span>
</div>
</div>
</div>