CODEWITHSUNDEEP
javascripthtmlcss
HerrimanCoder
HerrimanCoder

Reputation: 7218

How to center text inside CSS spinner?

I found a snippet of CSS somewhere on the Internet that re-creates the cool PayPal spinner, and I made a fiddle out of it:

https://jsfiddle.net/55s5oxkf/5/

It works great but I can't figure out how to place text right in the center of that spinner, something like "Loading...". I've tinkered and tried but can't get anything to work.

Here's the CSS:

.spinner.loading {
    display: none;
    padding: 50px;
    text-align: center;
}
.spinner.loading:before {
    content: "";
    height: 90px;
    width: 90px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 35%;
    left: 45%;
    border-width: 8px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
    border-radius: 100%;
    animation: rotation .7s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

And the HTML:

<div id="divSpinner" class="spinner loading"></div>

Placing text in between the opening and closing div elements does nothing. Any ideas?

Upvotes: 3

Views: 12268

Answers (4)

Denis
Denis

Reputation: 105

Add this in your css:

.loading {
  position: relative;
  text-align: center;
  line-height: 140px;
  vertical-align: middle;
}

And then just add text in loading div between span, for example:

<div id="divSpinner" class="spinner loading">
    <span class="text">Loading..</span>
</div>

And because loading has 8px border add this for text class:

.text {
  margin-left: 15px;
}

I think something like this should get you going.

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

<center> is no longer supported (center deprecated in html5) so use a class like this:

.centered {
  text-align: center;
}

Then use calc to get the correct position for the loading text:

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}


$("#btnLoadRecords").click(function() {
  $("#divSpinner").show();
  setTimeout(function() {
    $("#divSpinner").hide();
  }, 10000);
});
.centered {
  text-align: center;
}

.spinner.loading {
  display: none;
  padding: 50px;
  text-align: center;
}

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

.spinner.loading:before {
  content: "";
  height: 90px;
  width: 90px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: calc(50% - 45px);
  left: calc(50% - 45px);
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="centered">
    <div id="divSpinner" class="spinner loading">
      <div class="loading-text">Loading ...</div>
    </div>

    <button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
  </div>
</body>

Upvotes: 9

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

this should center the content

html

<div id="divSpinner" class="spinner loading">
   <p>hello</p>
</div>

css

.spinner.loading {
  display: none;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 106px;
  height: 106px;
}

.spinner.loading:before {
  content: "";
  height: 90px;
  width: 90px;

  position: absolute;
  top: 0;
  left: 0;
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Upvotes: 0

Ragdoll
Ragdoll

Reputation: 335

For the HTML:

<div id="divSpinner" class="spinner loading" style="display: none;">
  <span>Loading…</span>
</div>

For the CSS, in addition to what you have:

.spinner.loading::before{
  // Remove position, top, and left properties
  margin: -15px auto -65px auto;
  display: block (or flex);
}

This will make it work with your existing code, but what you’ve got is pretty hacky. If you want text to be inside your spinner, you should not use a ::before element. But given what you have, this will work.

Upvotes: 0

Related Questions