Contents are rotating with loader

Contents are rotating with loader - javascript

I am trying to create a loader component in my application for that I have used the following code.
CSS
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#maincontainer:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#maincontainer:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML
<div id="app">
<div id="maincontainer">
I have some contents here
</div>
</div>
Loader is working fine but the issue is the content inside the inner div also rotating with the loader. I want the contents to be stable in the page and only rotate the loader.
Jsfiddle link
Can some one please help me to resolve this.

The easiest solution by far is going to be to simply put the animation on a different element than the contents you don't want animated.
(Incidentally: it's no longer necessary to include those vendor-specific -webkit and -ms prefixed CSS elements; animation and transform have been broadly supported for years now.)
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#spin, #maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
/* Combining the repeated declarations: */
#spin, #spin:before, #spin:after {
content: "";
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
}
#spin {
border-top-color: #3498db;
animation: spin 2s linear infinite;
}
#spin:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #e74c3c;
animation: spin 3s linear infinite;
}
#spin:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #f9c922;
animation: spin 1.5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="app">
<div id="spin"></div>
<div id="maincontainer">
I have some contents here
</div>
</div>

Related

how to make loading spinner javascript

I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.
I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!
$(window).load(function() {
$('#loading').hide();
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color : #0e086b;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>

you can handle it manually. whenever you want to show a spinner you can call
$('#loading').show();
and to hide it after the ajax call use this in the callback function
$('#loading').hide();
The following solution will hide the spinner after 3 seconds, when the page loaded
$(document).ready(function() {
setTimeout(function(){ $('#loading').hide(); }, 3000);
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>

simply remove the anim !
on the real DOMContentLoaded event
window.addEventListener('DOMContentLoaded', (event) =>
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
);
sample code :
(simply click on snippet to stop the animation)
document.body.onclick = () => // simulate DOMContentLoaded event
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
#loading {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : #040030e7;
z-index : 99;
}
#loading > div {
position : absolute;
top : calc(50% - 32px);
left : calc(50% - 32px);
width : 64px;
height : 64px;
border-radius : 50%;
perspective : 800px;
}
#loading > div > div {
position : absolute;
box-sizing : border-box;
width : 100%;
height : 100%;
border-radius : 50%;
left : 0%;
top : 0%;
border-bottom : 3px solid #f5f125;
}
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite; }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
#keyframes rotate-1 {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
#keyframes rotate-2 {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
#keyframes rotate-3 {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
<div id="loading"> <!-- loading annimation-->
<div> <div></div> <div></div> <div></div> </div>
</div>

How to control animation time from css use jQuery

I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.
But I want to control animation time using jQuery.
My code:
.face {
position: absolute;
top: 10%;
left: 69%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<div class="face">
<div class="hand"></div>
</div>
As u can see at this line:
animation: hourHand 3s linear infinite;
I have time animation 3s, but this values i wanna control by jQuery code.
For example, this 3s i want to change to 14s, or 5s, or 22s.

To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.removeClass('slow').addClass('fast');
});
$('#slower').click(function() {
$hand.removeClass('fast').addClass('slow');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I want to define the time. For example now I have 3s, but from JS script I want to change this value
In this case you can use css() to set the value in JS directly:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.css('animation-duration', '1s');
});
$('#slower').click(function() {
$hand.css('animation-duration', '5s');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks

You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

Add Percent to preloader

I have a small preloader that I have used for some time. I want to add a percent to it like 1 2 3 100;
The percent of the page that is loaded.
is there a way to accomplish this using window load?
I have looked a jsfiddle codepens and jquery but have been unable to get an answer. I would like also that if the padge is loaded it don't wait until text is 100% it will fade out the loader.
$(window).on('load', function () {
$('.loading-screen').fadeOut();
$('#loadingScreen').delay(400).fadeOut('slow');
$('body').delay(400).css({ 'overflow': 'visible' });
});
#loadingScreen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10000;
}
.loading-screen {
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0px 0px -10px;
}
.preloader {
border: 4px solid #838383;
border-radius: 50%;
border-top: 4px solid #dddddd;
width: 40px;
height: 40px;
-webkit-animation: spin 0.6s linear infinite;
animation: spin 0.6s linear infinite;
box-shadow: 0 0 1px #999;
filter: blur(0.7px);
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingScreen">
<div class="loading-screen">
<div class="preloader"></div>
</div>

Create a Searchlight Animation with CSS or JS

I'm trying to create an animated searchlight with css or javascript, whichever performs better. I threw together something with CSS: http://codepen.io/jhlavac/pen/bNprea
Hopefully that will give you an idea of where I'm going with this.
HTML
<div id="wrapper">
<div id="light_beam"></div>
</div>
CSS
body{
background:black;
}
#wrapper{
position: relative;
height:460px;
}
#light_beam {
position: absolute;
bottom:0;
left:500px;
width: 0;
height: 0;
border-top: 400px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#light_beam {
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
}
#light_beam {
-ms-transform: skew(50deg,0deg);
-webkit-transform: skew(50deg,0deg);
transform: skew(50deg,0deg);
}
#light_beam:hover {
left: 850px;
-ms-transform: skew(-50deg,0deg);
-webkit-transform: skew(-50deg,0deg);
transform: skew(-50deg,0deg);
}
The problem is that the bottom of the light beam moves during the animation. I need it to remain stationary, while the beam moves across the page. Anybody have any ideas?

Use transform-origin: 100% 100% on #light-beam:hover to make it fixed.
codepen
body {
background: black;
}
#wrapper {
position: relative;
height: 460px;
overflow: hidden;
}
#light_beam {
position: absolute;
bottom: 0;
left: 500px;
width: 0;
height: 0;
border-top: 400px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#light_beam {
-webkit-transition: all 2s;
transition: all 2s;
}
#light_beam {
-webkit-transform: skew(50deg, 0deg);
transform: skew(50deg, 0deg);
transform: skew(50deg, 0deg);
transform-origin: 100% 100%;
}
#light_beam:hover {
left: 850px;
-webkit-transform: skew(-50deg, 0deg);
transform: skew(-50deg, 0deg);
transform-origin: 100% 100%;
}
<div id="wrapper">
<div id="light_beam"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Contents are rotating with loader - javascript

Related

how to make loading spinner javascript

How to control animation time from css use jQuery

How to get an Arrow shape on the below provided JS filddle circular progress bar

Add Percent to preloader

Create a Searchlight Animation with CSS or JS

Categories

Resources