ruby: height = pagelet_options.placeholder.try(:[], :height) text = pagelet_options.placeholder.try(:[], :text) || 'Loading ...' height = height.is_a?(Numeric) ? "#{height}px" : 'auto' css: /* Three Bounce */ .spinner.spinner-three-bounce { 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); } } div style="display: table; height: #{height}; overflow: hidden; width: 100%;" div style="display: table-cell; vertical-align: middle;" div.text-center span.spinner.spinner-three-bounce .bounce1 .bounce2 .bounce3 br span = text