What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. Any assistance would be greatly appreciated. Thank you.

code

.vl {
            height: 100%;
            position: absolute;
            right: 4.7%;
            top: 0;
            background-color: aqua;
            box-shadow: 0px 0px 12px aqua;
            width: 2.5px;
            height: calc(100% - 20px);
            border-radius: 50%;
            overflow: hidden;
        }
    
        hr.h1 {
            width: 100%;
            height: 0px;
            background-color: aqua;
            box-shadow: 0px 0px 12px aqua;
            width: 100%;
            height: calc(100% - 20px);
            border-radius: 50%;
            overflow: hidden;
        }
    
        .scanner {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            width: 100%;
            height: 20px;
            border-radius: 50%;
            animation: scanner-loop 3s ease-in-out infinite;
            background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
            height: 50%;
        }

        .scanner1 {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            width: 100%;
            height: 20px;
            border-radius: 50%;
            animation: scanner-loop 3s ease-in-out infinite;
            background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
            height: 50%;
        }
    
    
        @keyframes scanner-loop {
            0% {
                top: 0;
            }
    
            50% {
                top: 100%;
            }
    
            100% {
                top: 0;
            }
        }
<div class="vl">
<div class="scanner"></div>
</div>
<hr class="h1">
<div class="scanner1"></div>
</hr>

htmlcss

Answer №1

An error occurred with your animation. It is advised to separate animations for horizontal and vertical movements.

For the horizontal animation, ensure that the direction is set as to right and the keyframes should progress from left to right.

Please refer to the following example for a clear demonstration.

/* Vertical animation section*/
.vl {
  height: 100%;
  position: absolute;
  right: 4.7%;
  top: 0;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  width: 2.5px;
  height: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

hr.h1 {
  width: 100%;
  height: 0px;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  width: 100%;
  height: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

.scanner {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 20px;
  border-radius: 50%;
  animation: scanner-loop 3s ease-in-out infinite;
  background: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  height: 50%;
}

@keyframes scanner-loop {
  0% {
    top: 0;
  }

  50% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

/* Horizontal animation section*/
.vh {
  width: 100%;
  position: absolute;
  top: 4.7%;
  left: 0;
  background-color: aqua;
  box-shadow: 0px 0px 12px aqua;
  height: 2.5px;
  width: calc(100% - 20px);
  border-radius: 50%;
  overflow: hidden;
}

.scanner-h {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  height: 100%;
  width: 50%;
  border-radius: 50%;
  animation: scanner-horizontal-loop 3s ease-in-out infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

@keyframes scanner-horizontal-loop {
  0% {
    left: 100%;
  }

  50% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}
<!-- Vertical -->
<div class="vl">
  <div class="scanner"></div>
</div>

<!-- Horizontal -->
<div class="vh">
  <div class="scanner-h"></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

Building Dynamic Forms with React.js and Bootstrap for Easy Input Field Management

In the process of developing a web application using React.js and react-bootstrap, I encountered an interesting challenge. On one of the form pages, users should be able to input symptoms of an illness they are dealing with. The key functionality required ...

javascriptcssformstwitter-bootstrapreactjs

Breaking the line when combining an image_tag and text in a Rails navbar

Looking for some help combining a logo and brand name in my Bootstrap navbar. I'm running into an issue where there is a line break separating the logo and text. Can someone provide some assistance? <%= link_to image_tag("brand_logo.png") + " Bran ...

htmlcssruby-on-railstwitter-bootstrap

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

javascripthtmlcssangularjsgoogle-apps-script

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

Why are only some of my images appearing on the screen?

I am trying to showcase four images - two in the first row and two below it. However, I am facing an issue where only the images in the top row are appearing while the ones in the second row seem to be missing. I'm not sure what is causing this probl ...

html

JavaScript event/Rails app encounters surprising outcome

I have encountered a strange bug in my JavaScript code. When I translate the page to another language by clicking on "English | Русский" using simple I18n translation, my menu buttons stop working until I reload the page. I suspect that the issue ...

javascripthtmlruby-on-rails-4dom-eventsrails-i18n

"Using Flexbox to Align Child Elements of Varying

After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...

htmlcssflexbox

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Unique style pattern for parent links with both nested and non-nested elements

I am in the process of designing a website and I have a specific vision for how I want my links to appear, but I am unsure of how to achieve it. Here is the desired outcome: a red link a green link a red link a green link … Below is the HTM ...

javascriptjqueryhtmlcss

Tips for ensuring that each flexbox element fills up a single line

My goal is to have each child element fill up one line by itself. See this screenshot for reference: https://i.stack.imgur.com/F40Xm.png Below is the code I am currently using: main { display: flex; justify-content: space-around; align-items: ...

htmlcssflexbox

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...

javascripthtmlcss

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

htmlcss

Is it possible for an HTML file to not recognize an external CSS stylesheet?

I've been trying everything, but I can't seem to get these two documents to work together. I'm confident that the CSS file is linked correctly with the right file name. I decided to give it a shot after watching this coding blog tutorial on ...

htmlcssyoutubeblogs

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

Hover effects can be applied to CSS tabs

There seems to be a CSS issue on Chrome where the background image is not hiding when clicking on next tabs. I have used the following code: .paymentBank ::after { content: " "; } You can view the live code [here][1] and I have also attached a scree ...

htmlcss

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and lea ...

javascriptjqueryhtmlcssdom

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

javascriptphphtmlmysqli

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

javacssjavafxprogress-bar

Avoid repeated appending of data in JavaScript and HTML

I am working with an HTML table and I need to ensure that the values in the second column do not repeat within the grid. Below is the JavaScript code I have written for this purpose: var $addedProductCodes = []; function getProductData(value){ $t ...

javascripthtmljqueryjquery-uijquery-events