We Keep Coding

Contents are rotating with loader

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>

CSS How to animate angled lines with skew transitions

I'm looking to incorporate a line that's being drawn that separates into 2 more spreading upwards and downwards by 45 degrees. This is CODEPEN.
CSS:
.connector {
height: 40px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}

This would work:
.connector {
position: relative;
margin: 100px;
width: 100px;
height: 2px;
background: #f00;
}
.connector:before,
.connector:after {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 100px;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.connector:after {
transform: rotate(45deg);
}
<div class="connector"></div>
Here is an animated version:
.connector {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
animation: draw 1s linear;
animation-fill-mode: forwards;
}
.up,
.down {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 1s linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.down {
transform: rotate(45deg);
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div class="connector">
<div class="up"></div>
<div class="down"></div>
</div>

I don't know if I understood what you want. But, what about this?
https://codepen.io/pablodarde/pen/qPexVX
html
<div class="connector up"></div>
<div class="connector down"></div>
css
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
Here, my animated version...
HTML
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>
CSS
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
JavaScript
document.querySelector('.container').classList.add('animate');
setTimeout(function() {
document.querySelector('.container').classList.add('animate');
}, 500);
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>

JS manipulate CSS 3D rotating animation

I am very new to this CSS animation things and I have followed a tutorial making 3D rotating elements from this site http://www.the-art-of-web.com/css/3d-transforms/
This is my rotating 4 sided 3D square: https://jsfiddle.net/k0u8kn4w/
Now I want to use JS to make the side of the square to only rotate once to the second side when I clicked on it. So let's say the initial side is side A (not moving), when I click on it, I want it to rotate to show side B (rotate once 90 deg), when I click on it again, turn to side C, click again then turn to side D, another click turn to side A and so on.
Have tried manipulating the animation-play-state with running and paused, doesn't work, tried also manipulating the rotateY and TranslateZ degree, not sure how to manipulate the keyframes, couldn't find it anywhere.
#-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#keyframes spinner {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(-360deg);
}
}
#stage {
margin: 1em auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;
}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-animation-play-state: running;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-play-state: running;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#spinner div,
#spinner img {
position: absolute;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
<div id='stage' style='height: 160px; width: 180px;'>
<div id='spinner'>
<div style='-webkit-transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div>
<div style='-webkit-transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div>
<div style='-webkit-transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div>
<div style='-webkit-transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div>
</div>
</div>

You just need to resume animation and wait for 1/4 of animation duration.
Simplified your code (removed vendor prefixes, most of browsers work OK without them, but reapply them if needed). Demo:
var spinner = document.querySelector("#spinner");
// get animation duration in ms
var animationDuration = parseFloat(window.getComputedStyle(spinner)["animation-duration"]) * 1000;
spinner.addEventListener("click", function() {
// run animation
spinner.style["animation-play-state"] = "running";
// pause animation after animationDuration / 4
setTimeout(function() {
spinner.style["animation-play-state"] = "paused";
}, animationDuration / 4);
});
#keyframes spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
#stage {
margin: 1em auto;
perspective: 1200px;
}
#spinner {
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-play-state: paused; /* new */
transform-style: preserve-3d;
}
#spinner div,
#spinner img {
position: absolute;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
<div id='stage' style='height: 160px; width: 180px;'>
<div id='spinner'>
<div style='transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div>
<div style='transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div>
<div style='transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div>
<div style='transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div>
</div>
</div>

Grey out background while page loading

On my page I've got an animated image which runs when the page is busy loading. I've managed to get it to show when the page is busy and stop when the page is not busy. I'm struggling to get the page to grey out while this progress image runs... I've read about a div overlay, but it's not working. How do I do this? I'm new to javascript
This is what I've done:
In my asp.net I've got the following:
<div class="loading" align="center">
<div class="main">
<div class="small1">
<div class="small ball smallball1"></div>
<div class="small ball smallball2"></div>
<div class="small ball smallball3"></div>
<div class="small ball smallball4"></div>
</div>
<div class="small2">
<div class="small ball smallball5"></div>
<div class="small ball smallball6"></div>
<div class="small ball smallball7"></div>
<div class="small ball smallball8"></div>
</div>
<div class="bigcon">
<div class="big ball"></div>
</div>
</div>
</div>
My javascript is as follows:
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var loading = $(".loading");
loading.show();
$('#overlay').css({
'display': 'block',
opacity: 0.7,
'width': $(document).width(),
'height': $(document).height()
});
$('body').css({'overflow':'hidden'});
$('#loading').css({ 'display': 'block' }).click(function () {
$(this).css('display', 'none');
$('#screen').css('display', 'none')
});
}, 200);
$('#main').dialog({ modal: true });
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
And my css looks like this:
body {
padding: 0px;
height:100%;
background-color:#EBEBEB;
filter:alpha(opacity=70);
opacity:0.7;
background-color: #002031;
}
.main {
background-color:#EBEBEB;
filter:alpha(opacity=70);
opacity:0.7;
}
.small2 {
position: absolute;
height: 100px;
width: 100px;
background-color: transparent;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
.small1 {
position: absolute;
height: 100px;
width: 100px;
top: 50vh;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
background-color: transparent;
}
.bigcon {
position: absolute;
height: 95px;
width: 95px;
top: 50vh;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: transparent;
animation: bigcon 2s infinite linear;
animation-delay: 0.25s;
}
.ball {
border-radius: 50%;
position: absolute;
}
.small {
width: 25px;
height: 25px;
animation: small 2s infinite ease;
box-shadow: 0px 2px rgba(0,0,0,0.3);
background-color: #46b9ff;
}
.small:nth-child(1) {
top: 0%;
left: 0%;
}
.small:nth-child(2) {
top: 0%;
right: 0%;
}
.small:nth-child(3) {
right: 0%;
bottom: 0%;
}
.small:nth-child(4) {
bottom: 0%;
left: 0%;
}
.big {
width: 20px;
height: 20px;
border-radius: 15px;
box-shadow:0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8 ;
z-index: 1;
background-color: #54f7f8;
animation: bigball 1s infinite linear;
}
.smallball1{
animation-delay: -1.75s;
}
.smallball6{
animation-delay: -1.5s;
}
.smallball2{
animation-delay: -1.25s;
}
.smallball7{
animation-delay: -1s;
}
.smallball3{
animation-delay: -0.75s;
}
.smallball8{
animation-delay: -0.5s;
}
.smallball4{
animation-delay: -0.25s;
}
.smallball5{
animation-delay: -0s;
}
#keyframes bigcon {
0% {
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(-50%, -50%) rotate(405deg);
}
}
#keyframes small {
0% {
transform: scale(1);
background-color: #46b9ff;
}
10% {
transform: scale(1.3);
background-color: #54f7f8;
}
15% {
transform: scale(1);
}
25%{
transform: scale(1);
background-color: #46b9ff;
}
100%{
transform: scale(1);
background-color: #46b9ff;
}
}
#loading
{
font-family: Arial;
font-size: 10pt;
border: 0px ;
display: none;
background-color: White;
z-index: 999;
}
What am I doing wrong? Any help will be greatly appreciated

Try this:
CSS
.main:before{
position: absolute;
content:"";
width: 100%;
background: #EBEBEB;
height: 100%;
left:0;
z-index:-1;
}
DEMO HERE

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>