Is there a way to line up an animation with a specific letter in text easily?

Question

I'm trying to line up an animation I have made with the dot in an exclamation point of some text. It is currently the animation alone for our loading screen, and the code is as follows:

.loading-icon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 0; height: 0; margin: auto;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 $size/2 $c);
  -webkit-animation: load $ease infinite;
}
@-webkit-keyframes load {
  100% { width: $size; height: $size; box-shadow: none; }
}

$size is 60px $ease is 1s ease out and $c is just the color I'm using. Here is a codepen illustrating the animation: http://cdpn.io/CczlK

So, say I had a word like aaa!aaa and wanted to align the animation with it at the center of the page. I've been playing with a way to get it done in a hacky way but I really would like it to work across more than just my browser window. Currently to call the animation I have:

h1 
  aaa!aaa  
  .loading-icon

(it is written in emblem)

Ideas?

Answer 1

both your container and anim need to be centered, the text can remain center-aligned relative to its container. Then you change left and top position in the anim:

#loader
  %h1
    %span.label aaa!aaa
    %span.spinner

then in your css

#loader {
  position: absolute;
  top   : 50%;
  left  : 50%;
  margin: -30px 0 0 -30px;
  width : 60px;
  height: 60px;
  text-align : center;

 h1 {
   position : relative;
 }

}

.spinner {
  width   : 0;
  height  : 0;
  top     : 0px;
  left    : 30px;
  margin  : auto;
  display : block;
  position: absolute;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 $size/2 $c);
  animation: load $ease infinite;
}

@keyframes load {
 100% { width: $size; height: $size; left:0px; top:-30px; box-shadow: none; }
}

Edits in codepen: http://codepen.io/anon/pen/nIioD