Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet:

CSS

.spinner span em {
  border-radius: 999px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.spinner span:first-child em {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation-name: rotate-lt; 
  -webkit-transform-origin: 0 50%;
}

.spinner span:last-child em {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-animation-name: rotate-rt; 
  -webkit-transform-origin: 100% 50%;
}

HTML

<div class="spinner">
<span><em></em></span>
<span><em></em></span>

hallo
</div>

If you have any tips or solutions, please share them! Your assistance is much appreciated.

javascripthtmlcss

Answer №1

To align your text in the center, apply text-align:center for horizontal positioning, and define line-height:300px (where 300px matches the height of the element) for vertical alignment.

Answer №2

Take a look at this demo, where I've implemented a wrapper div

HTML

<div class="wrapper">
    <div class="spinner">
      <span><em></em></span>
      <span><em></em></span>  
    </div>
    <div class="text">hello<div>
</div>

CSS

body {
  margin: 50px;
}

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.text {
  position: absolute;
  top:0px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  z-index:10;
  text-align:center;
  line-height:300px;    
}

.spinner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #aaa;
}
.spinner:after {
  position: absolute;
  content: "";
  width: 80%;
  height: 80%;
  border-radius: 100%;
  background: #fff;
  top: 10%;
  left: 10%;
}

.spinner span em {
  background: #0e728e;
  -webkit-animation-duration: 3s; 
}

/* Styles below are preset */

@-webkit-keyframes rotate-rt {
  0% {    -webkit-transform: rotate(0deg); }
  25% {   -webkit-transform: rotate(180deg); }
  50% {   -webkit-transform: rotate(180deg); }
  75% {   -webkit-transform: rotate(360deg); }
  100% {  -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes rotate-lt {
  0% {    -webkit-transform: rotate(0deg); }
  25% {   -webkit-transform: rotate(0deg); }
  50% {   -webkit-transform: rotate(180deg); }
  75% {   -webkit-transform: rotate(180deg); }
  100% {  -webkit-transform: rotate(360deg); }
}

.spinner {
  border-radius: 100%;
  position: relative;
}

.spinner span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.spinner span:first-child {
  left: 0;
}

.spinner span:last-child {
  left: 50%;
}

.spinner span em {
  border-radius: 999px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.spinner span:first-child em {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation-name: rotate-lt; 
  -webkit-transform-origin: 0 50%;
}

.spinner span:last-child em {
  left: -100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-animation-name: rotate-rt; 
  -webkit-transform-origin: 100% 50%;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered while attempting to send SendGrid email to multiple recipients

Currently, I am using const sgMail = require('@sendgrid/mail'); with sendgrid version 7.6.2. Whenever I attempt to add two email addresses in an array and then pass it into either send() or sendMultiple(), an error is being thrown like below. st ...

javascriptnode.jsemailsendgrid

Generating a tree structure using a JavaScript array

Looking to build a tree structure from a given list of data where the paths are represented like: A-->B-->C-->D-->E.. A-->B-->C-->D-->F.. A-->F-->C-->D-->E.. . . . All possible data paths are stored in an array. The de ...

javascriptjavatree

Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure: <div class = "hbspt-form".......> <form ....class="hs-form stacked"> <div class = "hs_firstname field hs-form-field"...> <div class = ...

javascripthtmlcss

show the stored value inside the useRef variable

One of my challenges involves a variable const prediction = useRef<any>(null); A button triggers a function that updates the variable's value: function showResult() { classifier.current.classify(capture, (result) => { ...

javascriptreactjstypescriptreact-hooksuse-ref

Issue with URL parameter in React when using React Router

Initially, everything was running smoothly in my React project using react-router-dom. However, once I added another Route like so: <Route path="/edit/:id" component={EditPage}/> and tried changing the URL in the browser to http://localhos ...

javascriptreactjsreact-router

What are some recommended methods in Angular for developing reusable panels with both controller and view templates?

I am still getting acquainted with angularjs, so there might be something I'm overlooking, but I'm struggling to find an efficient way to create reusable views that can be instantiated within a parent view. My specific scenario involves a web ap ...

javascriptangularjsangularjs-ng-repeat

The For loop with varying lengths that exclusively produces small numbers

I'm currently using a for loop that iterates a random number of times: for(var i = 0; i<Math.floor(Math.random()*100); i++){ var num = i } This method seems to be skewed towards producing lower numbers. After running it multiple times, the &apo ...

javascriptloopsrandomfor-loop

Store the user's link for future reference and quickly navigate to the TransferPage in 3 seconds. Then, return

After a user clicks on any button, they will be redirected to the Transfer Page for 3 seconds. Then, they will automatically return to the link they originally clicked on. Schematic： HTML: Vue: ...

javascriptvue.jsnuxt.jsvue-componentvue-router

Having trouble with the error "Cannot GET /" in your Angular2 and Express

I've been working on customizing this GitHub example application to utilize Express instead of KOA. When I enter gulp serve in the CentOS 7 terminal, the app launches successfully. However, upon typing http : // localhost : 8080 in the browser, a 404 ...

javascriptnode.jsexpress

Unexpected behavior from vuelidate triggered on blur

I have implemented vuelidate for form validation. My goal is to validate user input either when they move to the next input field or click outside of the current one. <div class="form-group col-md-6" :class="{invalid: $v.partner.email.$ ...

javascriptvue.jsvuelidate

Dynamically Remove One Form from a Django Formset

I have been using the following code to dynamically add a form to my formset: .html {{ form2.management_form }} <div id="form_set"> {% for form2 in form2.forms %} <table class="table table2" width=100%> ...

javascriptjquerydjangoajax

Verifying that a parameter is sent to a function triggering an event in VueJS

One of the components in my codebase is designed to render buttons based on an array of objects as a prop. When these buttons are clicked, an object with specific values is passed to the event handler. Here's an example of how the object looks: { boxe ...

javascriptvue.jsjestjsvue-test-utils

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

I've been exploring the use of an organization chart library from Everything goes smoothly with a few nodes, but when I attempt to load the entire organization (approximately 1100 subjects with multiple nested levels), I encounter this console error: ...

javascriptjqueryhtmlorgchart

What is the purpose of creating a new HTTP instance for Socket.io when we already have an existing Express server in place?

As I delve into SocketIO, I've combed through various blogs and documentation on sockets. It seems that in most cases, the standard approach involves creating an HTTP server first and then attaching the socket to it as shown below: var app = express() ...

javascriptnode.jsexpresshttpsocket.io

Using jQuery to toggle the visibility of table data cells across various tables on a single webpage

On my webpage, I have multiple tables and I'm trying to add more rows or close table data cells using jQuery. However, I seem to be encountering an issue as it's not working properly. <table class="table" ><tr> < ...

javascriptjquery

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

javascripthtmlajaxshopping-cartshopify

Leveraging the power of JavaScript to retrieve data from BigQuery

Having just started my journey with JavaScript and Google BigQuery, I am seeking help due to my lack of experience in these areas. My goal is to create a javascript code that can fetch data from one of the public databases on BigQuery. I came across a solu ...

javascriptjquerygoogle-bigquery

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

htmlcssreactjsmaterial-design

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

Every button triggers a unique modal window Encountering an unusual problem with Bootstrap 5 modal functionality. Within a webpage displaying a list of database entries (refer to the screenshot), each entry features three buttons to open corresponding mod ...

javascriptbootstrap-modalbootstrap-5

Tips for enhancing the appearance of a React component

I have a redux form that doesn't look great, and I would like to style it. However, my project uses modular CSS loaders. The styling currently looks like this: import styled from 'styled-components'; const Input = styled.input` color: #4 ...

javascriptreactjs