Using cubeportfolio (filterable masonry) there's a short loading time. Here's the code of the animated loading figure:

.cbp:after{content:'';position:absolute;width:34px;height:34px;left:0;right:0;top:0;bottom:0;margin:auto;-webkit-animation:cbp-rotation .8s infinite linear;animation:cbp-rotation .8s infinite linear;border-left:3px solid rgba(114,144,182,0.15);border-right:3px solid rgba(114,144,182,0.15);border-bottom:3px solid rgba(114,144,182,0.15);border-top:3px solid rgba(114,144,182,0.8);border-radius:100%}
But there is no trigger like <div class="loader">Loading...</div> in html; only the css above.

How can I change that css into an image, because I would like to show my logo and text instead whilst loading.