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

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Is there a specific Bootstrap class that allows me to hide a grid column for certain screen sizes without using media queries and the "display:none" style? ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Get the PDF in a mobile app using HTML5 and Javascript

For my HTML5/JavaScript-based mobile application, I am in need of implementing a feature that enables users to download a PDF file. The PDF file will be provided to me as a Base64 encoded byte stream. How can I allow users to initiate the download proces ...

javascripthtmlpdfmobile

The issue of HTML form not displaying within a Java servlet environment

While following a basic tutorial to learn Java servlet programming in Eclipse, I encountered an issue with the browser not rendering the submit button in the HTML form. Despite reviewing the code multiple times, making small modifications, and even double- ...

javahtmlxmlservletsforms

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Currently, I am in the process of developing an HTML editor for a project. I have downloaded a program online that I am attempting to customize according to my requirements. However, I am encountering difficulties when trying to retrieve the inner HTML of ...

javascriptphpjqueryhtmlrich-text-editor

What is the best way to adjust the size of a Div slideshow using

I need help with creating a slideshow that covers my webpage width 100% and height 500px. The image resolution is 1200*575. Can someone assist me with this? CSS #slide{ width : 100%; height: 500px; } HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcss

What is the best method for retrieving values from selected radio buttons?

I am trying to retrieve the values of the selected radio buttons with the name is_external example.html <div class="exter_inter"> External <input type="radio" name="is_external" value="1" <?php if(isset($_GET['status']) &&am ...

jqueryhtmlradio-button

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...

javascripthtmlcssapachenginx

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my code: HTML <mat-checkbox i ...

htmlcssangularcolorsangular-material

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

When using Italics, the conflict arises between the specified line-height and the actual height of the

Recently, I encountered an issue that has me a bit perplexed: I have a span element with line-height set to 18px and font-size at 16px. Everything works perfectly when the text inside is regular; the height of the span remains at 18 pixels. The problem a ...

firefoxhtmlcssitalics

Converting this HTML/PHP code into JavaScript: A step-by-step guide

I have been struggling to convert this code into JavaScript in order to set the document.getElementById().innerHTML and display it in HTML. Can anyone assist with writing this code in JavaScript? <form action='create_new_invoice.php?name="<?php ...

javascriptphphtml

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function. <input t ...

javascriptangularjshtml

The height of the Material UI Paper component is not appropriately matched with the parent component

I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code: import React from "react"; import { makeStyles ...

javascriptcssreactjsmaterial-ui

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Unable to conceal a div element on mobile devices

Creating a unique bootstrap theme for Wordpress and encountering an issue with hiding the "sptxt" text on mobile screens. <div class="row"> <div class="col-lg-5 col-sm-12"><div id="gr"></div></div> <div class="col- ...

twitter-bootstraphtmlhide

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

htmlcsscss-selectors

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

htmlcssbackground

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

htmlreactjsformik

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

javascriptcssipadextjs

Steps for sending data to a modal window

Consider this scenario: I have a function that retrieves some ids, and I utilize the following code to delete the corresponding posts: onClick={() => { Delete(idvalue[i]) }} Nevertheless, I am in need of a modal confirmation before proceeding with the del ...

javascripthtmlarraysreactjsbootstrap-modal