Spin only the outline with CSS

I have a unique idea for my webpage - three spinning circles surrounding text, while the text itself remains stationary.

My challenge is to achieve this effect using only CSS, specifically by utilizing the .spinner-border class from Bootstrap. I cannot make any changes to the HTML file.

.loader-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader {
  position: relative;
  left: auto;
  top: auto;
  width: 80px;
  font-size: 20px;
  text-align: center;
  display: inline-block;
  width: 10rem;
  height: 10rem;
  vertical-align: text-center;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}
<div class="loader-wrapper">
  <div class="loader">Loading</div>
</div>

I attempted to create a single spinner initially, but I'm struggling with keeping the text still alongside the spinning animation.

htmlcssborderspinner

Answer №1

.spinner {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1;
}

@-webkit-keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-dot {
  position: relative;
  top: 5px;
  left: auto;
  width: 80px;
  font-size: 20px;
  text-align: center;
  display: inline-block;
  width: 10rem;
  height: 10rem;
  vertical-align: middle;
  
}
.spinner-dot::after {
  content: '';
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 100%;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spin-animation .75s linear infinite;
  animation: spin-animation .75s linear infinite;
}
<div class="spinner">
  <div class="spinner-dot">Loading</div>
</div>

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

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

CSS can be utilized to craft intricate and dynamic shapes

Currently, I am attempting to produce a trapeze-like design utilizing various techniques in order to achieve the best possible outcome. The shape I am aiming to create is similar to this: (the content inside the shape will consist of images and text) Th ...

csscross-browser

JavaScript (Automatic) for a full-screen webpage display

I'm having trouble creating a webpage and setting it to fullscreen mode. Here's the JavaScript code I have: var elem = document.getElementById("fulscreen"); var fs = document.getElementById("body"); elem.onclick = function() { req = fs.webk ...

javascripthtmlfullscreen

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

I'm looking to divide the background horizontally into two sections, with one side being a solid black color and the other side incorporating a gradient of two colors, such as purple transitioning into pink

body { height:100%; background: linear-gradient(top, #d808a4 50%, black 50%); background: linear-gradient(top, #d808a4 50%,black 50%); background: linear-gradient(to bottom, #d808a4 50%,black 50%); height: 229vh; } I am trying to creat ...

htmlcsssplitcolorsgradient

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

display the chosen choices from the jquery tool

I have implemented a Jquery movie seat selection plugin on my jsp website successfully. It allows users to select seats with ease. However, the issue I am facing is that due to my limited knowledge of Jquery, I am unable to display the selected seats by t ...

javascriptjquerycssjspplugins

implementing the CSS property based on the final value in the loop

I have created multiple divs with a data-line attribute. I am trying to loop through each div, extract the individual values from the data-line attribute, and apply them as percentages to the width property. However, it seems to only take the last value an ...

javascriptjqueryhtmlloops

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

The appearance of my HTML website varies significantly across different devices used by viewers

It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...

htmlcssbootstrap-4

Base64 image failing to display in Internet Explorer

Is there a way to efficiently handle the base 64 form of an image in different browsers? The code I have achieves this as shown below: import base64 import requests img=requests.get('https://example.com/hello.jpg') base=base64.b64encode(img.cont ...

pythonhtmlimageinternet-explorerbase64

Switch up the link color when it pops up

Is there a method to change the link color to gray without encountering glitches like on my site, where it mistakenly shows "Quick Nav."? Click here to view the page with the glitch I only want this particular link to be bold and not any other links. He ...

javascripthtmlcsspopup

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

When I log out and hit the back button, the PHP page continues to display without any changes

After logging out of my PHP session and being redirected to the login page, I am facing an issue where pressing the back button shows me the previous page without requiring a login. How can I fix this problem? Thank you in advance. index.php <form sty ...

javascriptphphtmlajax

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

What might be causing the in-viewport javascript to not work in my code?

Why is my in-viewport JavaScript code not functioning properly? Link to JSFiddle code When the Click to move button is clicked, the cat image will slide correctly. However, when implementing the following code: if($("#testtest").is(":in-viewport")) ...

javascriptjqueryhtmlcss

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

javascriptjqueryhtmlcssslidedown