Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container?

I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically!

To clarify, I want to be able to reposition the entire loader.

.sampleContainer {
  float: left;
  height: 40px;
  width: 60px;
  background: white;
}
.loader {
  display: inline-block;
  float: left;
  margin-left:100px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #888;
  position: absolute;
}
.dot_1 {
  animation: animateDot1 1.5s linear infinite;
  left: 12px;
}
.dot_2 {
  animation: animateDot2 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
.dot_3 {
  animation: animateDot3 1.5s linear infinite;
  left: 12px;
}
.dot_4 {
  animation: animateDot4 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
@keyframes animateDot1 {
  0% { transform: rotate(0deg) translateX(-12px); }
  25% { transform: rotate(180deg) translateX(-12px); }
  75% { transform: rotate(180deg) translateX(-12px); }
  100% { transform: rotate(360deg) translateX(-12px); }
}
@keyframes animateDot2 {
  0% { transform: rotate(0deg) translateX(-12px); }
  25% { transform: rotate(-180deg) translateX(-12px); }
  75% { transform: rotate(-180deg) translateX(-12px); }
  100% { transform: rotate(-360deg) translateX(-12px); }
}
@keyframes animateDot3 {
  0% { transform: rotate(0deg) translateX(12px); }
  25% { transform: rotate(180deg) translateX(12px); }
  75% { transform: rotate(180deg) translateX(12px); }
  100% { transform: rotate(360deg) translateX(12px); }
}
@keyframes animateDot4 {
  0% { transform: rotate(0deg) translateX(12px); }
  25% { transform: rotate(-180deg) translateX(12px); }
  75% { transform: rotate(-180deg) translateX(12px); }
  100% { transform: rotate(-360deg) translateX(12px); }
}
<div class="sampleContainer">
  <div class="loader">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
    <span class="dot dot_4"></span>
  </div>
</div>

htmlcsscss-animations

Answer №1

Make sure to apply position:relative to the parent element, otherwise it may disrupt the DOM flow.

Based on my experiments, you can omit the .loader CSS class.

.sampleContainer {
  float: left;
  height: 40px;
  width: 60px;
  background: white;
  position: relative;
  background: lightblue;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #888;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 15px 8px
}
.dot_1 {
  animation: animateDot1 1.5s linear infinite;
  left: 12px;
  /**background: #e579b8;**/
}
.dot_2 {
  animation: animateDot2 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
.dot_3 {
  animation: animateDot3 1.5s linear infinite;
  left: 12px;
}
.dot_4 {
  animation: animateDot4 1.5s linear infinite;
  animation-delay: 0.5s;
  left: 24px;
}
@keyframes animateDot1 {
  0% {
    transform: rotate(0deg) translateX(-12px);
  }
  25% {
    transform: rotate(180deg) translateX(-12px);
  }
  75% {
    transform: rotate(180deg) translateX(-12px);
  }
  100% {
    transform: rotate(360deg) translateX(-12px);
  }
}
@keyframes animateDot2 {
  0% {
    transform: rotate(0deg) translateX(-12px);
  }
  25% {
    transform: rotate(-180deg) translateX(-12px);
  }
  75% {
    transform: rotate(-180deg) translateX(-12px);
  }
  100% {
    transform: rotate(-360deg) translateX(-12px);
  }
}
@keyframes animateDot3 {
  0% {
    transform: rotate(0deg) translateX(12px);
  }
  25% {
    transform: rotate(180deg) translateX(12px);
  }
  75% {
    transform: rotate(180deg) translateX(12px);
  }
  100% {
    transform: rotate(360deg) translateX(12px);
  }
}
@keyframes animateDot4 {
  0% {
    transform: rotate(0deg) translateX(12px);
  }
  25% {
    transform: rotate(-180deg) translateX(12px);
  }
  75% {
    transform: rotate(-180deg) translateX(12px);
  }
  100% {
    transform: rotate(-360deg) translateX(12px);
  }
}
<div style="float:left">Deleting 'Folder Name' folder</div>
<div class="sampleContainer">
  <div class="loader">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
    <span class="dot dot_4"></span>
  </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

Error in jQuery: Null property causing TypeError when reading 'text'

Issue: I have a modal form that is loaded via an ajax call. Inside the modal, there is a span element containing an email address. I am trying to capture the value of this span element using JavaScript. Currently, I have a button click event that triggers ...

javascriptjqueryhtmlasp.netajax

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

csstypescriptsass

Turn on the text field when the enter key is pressed

I've searched online for solutions, but none of them have resolved my issue. Upon loading my page, I am able to successfully have my JS file select the first textfield. However, I am struggling with getting it to proceed to the next textfield when th ...

javascriptjqueryhtml

What is the best way to ensure that text highlighting appears consistent on all browsers?

I am facing an issue with the appearance of text highlighting between Chrome and Firefox browsers. Is there a way to ensure consistency in the appearance across all browsers? a { text-decoration: none; font-weight: 900; font-size: 4vw !impo ...

css

Is there a way to switch an input's appearance to resemble that of a label?

Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...

htmlcsstwitter-bootstrapangularjs

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, ren ...

javascriptjquerycssipad

What are the best situations to utilize bootstrap and when should you avoid it?

When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...

csssassbootstrap-5

Clickable link unresponsive on parallax-enhanced webpage

Currently, I am utilizing Zurb foundation's Manifesto theme for creating a parallax scrolling landing page. The anchor tag is essential for the scrolling effect on this page, causing a conflict when regular anchor links are included. Here is the HTML ...

javascriptjqueryhtml

What strategies can be implemented to minimize the impact of HTML code on just one specific div (or any other chosen element)?

<div> <b> some example </div> different content This will make the "different content" bold. Is there a way to restrict the impact of <b> only to the <div> element? I have tried looking for JavaScript solutions online but did ...

htmleffect

Retrieve the labels associated with highlighted text in a JTextPane

Hey everyone! I'm currently working with a JTextPane that has content type 'text/html'. I have loaded the Bible into this JTextPane where verses are separated by tags. What I want to achieve is determining the selected verse when a user clic ...

javahtmltagsjtextpane

Exploring json data with angularjs

I am facing a challenge with handling a complex JSON object by looping through it and displaying the data in a form. To tackle this, I have created a small service similar to the one shown below: service.myApprovalResults = function(){ var url = " ...

htmlangularjsjson

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

javascriptjqueryhtmlcss

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

I have recently migrated my ASP.Net 3.5 web site from my old XP sp3 machine to a new Win 7 64-bit dev machine. The web application utilizes Master Pages, App_Themes with style sheets and images, as well as an image folder located off the main root. Additio ...

asp.netjavascriptcss

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

javascripthtmljson

Fully responsive header designed for optimal experience at any screen height

I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should sho ...

javascripthtmlcsstwitter-bootstrap

Distinguishing between a null image and a valid image: what to look out for?

When testing code, one of the outputs is an image. It's crucial to ensure that the image has a valid output; however, identifying a NULL image from a valid one in the inspection section seems challenging. The key difference lies in a field known as s ...

pythonhtmlseleniumsrc

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

Blackberry Browser 4.2 experiencing spacing troubles

Seeking advice for developing a web application specifically for the Blackberry Browser 4.2. Looking to add vertical spacing between a series of links, but struggling due to lack of support for padding and margin in this version. Have tried using height an ...

htmlbrowserblackberrylayoutrim-4.2