I have a problem, I made a beautiful button with snake effect but I need a last thing, I need to hide overflow to make the snake effect.
there is my button:
I want to hide theses parts, with overflow: hidden; this works with position: absolute; but not with relative.
body {
padding: 30px;
}
.btn-order {
position: relative;;
background-color: #961a22;
color: #ff7675;
padding: 30px 60px;
font-family: Helvetica;
font-size: 30px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
overflow: hidden;
}
.btn-order:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50%;
background: rgba(255, 255, 255, 0.07);
}
.btn-order span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #ffffff, #ff3a3a);
animation: animate1 1.25s linear infinite;
}
#keyframes animate1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn-order span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #ffffff, #ff3a3a);
animation: animate2 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.btn-order span:nth-child(3) {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(to left, #ffffff, #ff3a3a);
animation: animate3 1.25s linear infinite;
}
#keyframes animate3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.btn-order span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to top, #ffffff, #ff3a3a);
animation: animate4 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
<a href="#" class="btn-order">
<span></span>
<span></span>
<span></span>
<span></span>
COMMANDER
</a>
Thanks for helping me :)
Increasing the body width can fix it.
Related
I am trying to recreate this gif using HTML and CSS, but this is where I got stuck. Here is the gif:
https://www.link-elearning.com/linkdl/coursefiles/1452/ADCSS9_assigment_animation1.gif
This is what I have done so far but I am stuck:
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
padding-top: 2px;
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
background: rgb(32, 6, 146)
}
#keyframes scaleIn {
from {
transform: scale(.5, .5);
opacity: .5;
}
to {
transform: scale(2.5, 2.5);
opacity: 0;
}
}
</style>
</head>
<body style="background-color:#050210;">
<div class="circle" style="animation-delay: -2s"></div>
<div class="circle" style="animation-delay: -1s"></div>
<div class="circle" style="animation-delay: -0"></div>
</body>
</html>
One method to get the rainbow coloured outlined is to use another div that sits behind the darker inner divs. This rainbow coloured outline can be achieved by using a linear-gradient. All the CSS animations are set to infinite to allow them to run repeatedly. Here I used some CSS variables to set the sizes of the circles indicated by -- in front of the variable name. It's good to note that it might be a good idea to put this in a wrapper/container div instead of the absolute positioning I have below. The pulsing in the centre could also use some adjustments. Press the Run code snippet button below to see the results:
body {
background: rgba(6, 2, 20, 1);
}
#Blurry_Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
filter: blur(20px);
}
#Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
}
#Large_Circle {
position: absolute;
--Circle_Diameter: 175px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(6, 2, 20, 1);
}
#Medium_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow 2s linear infinite;
}
#Small_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow_2 2s linear infinite;
}
#keyframes Rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes Grow {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(17);
opacity: 0;
}
51% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#keyframes Grow_2 {
0% {
transform: scale(0);
opacity: 0;
}
40% {
transform: scale(0);
opacity: 0;
}
41% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(17);
opacity: 0;
}
}
<div id="Blurry_Rainbow_Circle"></div>
<div id="Rainbow_Circle"></div>
<div id="Large_Circle"></div>
<div id="Medium_Circle"></div>
<div id="Small_Circle"></div>
I dont know where u study.. but it is one hell of a study.... Itadakimas... Thanks for the meal... I loved working on it
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.body {
background-color: #050210;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle {
position: absolute;
height: 230px;
width: 230px;
border-radius: 50%;
background: rgb(32, 6, 146)
}
.animate {
transform: translate(-50%, -50%);
animation: scaleIn 1.9s infinite;
}
.border {
/* --b: 5px; */
/* border width*/
animation: rotate 3s infinite linear;
z-index: 0;
/* scale: 4.5; */
--b: 10px;
--c: linear-gradient(140deg, red, yellow, green);
background: transparent;
box-shadow: 5px 5px 19px #54aa00, -5px -5px 19px #ff5a00, -5px 5px 19px #f9e203, 5px -5px 19px #f9e203;
}
.border:after {
content: "";
display: inline-block;
padding-top: 100%;
}
.border:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c, linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: 50%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
#keyframes scaleIn {
from {
transform: scale(.15, .15);
opacity: .5;
}
to {
transform: scale(1, 1);
opacity: 0;
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="body">
<div class="circle border"></div>
<div class="circle animate" style="animation-delay: -0.95s"></div>
<div class="circle animate" style="animation-delay: 0s"></div>
</div>
Whew,, Corrected all mistakes... didn't choose your color though
I have created a div with animation direction to the right side but I want that the image inside will stay stright and will not move.
The problem is that the image is getting the direction of the main div.
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box {
width: 50px;
height: 50px;
background: #1d80e1;
animation: animate .5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
In this case, I've used reverse flow. you can customize animate2. animate2 .5s infinite linear reverse;
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
animation: animate2 .5s infinite linear reverse;
}
#box {
animation: animate .5s infinite linear;
width: 50px;
height: 50px;
background: #1d80e1;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#keyframes animate2 {
17% {
}
25% {
transform:rotate(22.5deg);
}
50% {
transform:rotate(45deg);
}
75% {
transform:rotate(67.5deg);
}
100% {
transform:rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
I'm trying to animate my logo using css, what I want is each logo fade in from top then stop in a certain point, then fade out to bottom, but couldn't make this, is this possible?
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
animation: loading3 4s linear infinite normal;
}
#logo-2 {
top: -10px;
animation: loading2 3s linear infinite normal;
}
#logo-3 {
top: -20px;
animation: loading1 2s linear infinite normal;
}
#keyframes loading1 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -20px;}
75% {background:#f44;opacity: 1;top: -20px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading2 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -10px;}
75% {background:#f44;opacity: 1;top: -10px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading3 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: 0px;}
75% {background:#f44;opacity: 1;top: 0px;}
100% {background: white;opacity: 0;top: 50px;}
}
<div id="logo">
<div class="logo" id="logo-1"></div>
<div class="logo" id="logo-2"></div>
<div class="logo" id="logo-3"></div>
</div>
Note: logo-3 should come first and stop, then logo-2 come and stop,
then logo-1 come and stop then logo-3 should go first, then logo-2
then logo-1, one by one.
Original logo is:
There is no way to stop a CSS animation in-between and then continue, hence i have used little JavaScript.
What we do is, we divide all three animations into two portions, the first one for all three runs and then the second one. I have divided animations and then activate those animations using classes with JavaScript. This solution is not complex, it's just lengthy.
function animateLogo() {
logo1 = document.getElementById('logo-1');
logo2 = document.getElementById('logo-2');
logo3 = document.getElementById('logo-3');
if(logo1.classList.contains('anim31')) {
logo1.classList.remove('anim31');
logo1.classList.add('anim32');
} else {
logo1.classList.add('anim31');
logo1.classList.remove('anim32');
}
if(logo2.classList.contains('anim21')) {
logo2.classList.remove('anim21');
logo2.classList.add('anim22');
} else {
logo2.classList.add('anim21');
logo2.classList.remove('anim22');
}
if(logo3.classList.contains('anim11')) {
logo3.classList.remove('anim11');
logo3.classList.add('anim12');
} else {
logo3.classList.add('anim11');
logo3.classList.remove('anim12');
}
}
setInterval(animateLogo, 3000); // The time is the amount of milliseconds our longest animation will take i.e 3s
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
}
#logo-1.anim31 {
animation: loading31 3s linear forwards normal;
}
#logo-1.anim32 {
animation: loading32 1s linear forwards normal;
}
#keyframes loading31 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: 0px;
}
}
#keyframes loading32 {
0% {
background: #f44;
opacity: 1;
top: 0px;
}
65% {
background: #f44;
opacity: 1;
top: 0px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-2 {
top: -10px;
}
#logo-2.anim21 {
animation: loading21 2s linear forwards normal;
}
#logo-2.anim22 {
animation: loading22 2s linear forwards normal;
}
#keyframes loading21 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -10px;
}
}
#keyframes loading22 {
0% {
background: #f44;
opacity: 1;
top: -10px;
}
65% {
background: #f44;
opacity: 1;
top: -10px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-3 {
top: -20px;
}
#logo-3.anim11 {
animation: loading11 1s linear forwards normal;
}
#logo-3.anim12 {
animation: loading12 3s linear forwards normal;
}
#keyframes loading11 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -20px;
}
}
#keyframes loading12 {
0% {
background: #f44;
opacity: 1;
top: -20px;
}
65% {
background: #f44;
opacity: 1;
top: -20px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
<body>
<div id="logo">
<div class="logo anim31" id="logo-1"></div>
<div class="logo anim21" id="logo-2"></div>
<div class="logo anim11" id="logo-3"></div>
</div>
</body>
I hope this is the expected result. If not, please comment below and i will edit the answer.
P.S: Play around with the timing of animations to make it faster/slower.
The CSS loader doesn't work sometimes in IE 11. When the page is loaded for the first time, everything is OK. But after the first correct one, the loader is displayed incorrectly, and only the central stick changes it's size. Seems like :before and :after pieces don't work properly. How can I fix it for IE 11? It works fine for Chrome, for example.
.loader {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: -1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: 1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.7;
z-index: 3;
}
Working Demo:
.loader {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: -1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
width: 0.8em;
height: 4em;
background: #1C5685;
content: '';
position: absolute;
top: 0;
left: 1.5em;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.7;
z-index: 3;
}
<div id="loadingDiv">
<div class="loader">Loading...</div>
</div>
UPD:
It was to pulse like this
But it did it like this (only middle stick pulsed)
So the solution was found by myself - to replace the unproperly working in IE ":before" and ":after" pseudo-elements with REAL elements, to update their animation delays and to put them together (they are not displayed by default and become visible on loadings):
<!-- 3 loadingDiv's with loaders inside: 1 div for each of 3 animated sticks of loader -->
<div style="display:none" id="loadingDiv1">
<div class="loader1" >Loading...</div>
</div>
<div style="display:none" id="loadingDiv2">
<div class="loader2" >Loading...</div>
</div>
<div style="display:none" id="loadingDiv3">
<div class="loader3" >Loading...</div>
</div>
.loader1,
.loader2,
.loader3 {
background: #1C5685;
position: relative;
width: 0.8em;
height: 4em;
margin: 250px auto;
color: #1C5685;
text-indent: -9999em;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
}
.loader1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
/* .loader3 has 0 delay */
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#loadingDiv1,
#loadingDiv2,
#loadingDiv3 {
position: fixed;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 3;
}
#loadingDiv1 {
left: -1em;
background-color: white;
}
#loadingDiv2 {
left: 0;
}
#loadingDiv3 {
left: 1em;
}
I have created a loader in css with three bars, the code is as given below. The bars are based on :before and :after. But if I want a five bar loader how can I do that ?
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
</div>
You could use the CSS propriety ntnchild. Your HTML and CSS will be like:
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
.loading-bar:nth-child(5) {
background-color: #000000;
animation-delay: .36s;
}
#keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
You can do this easily with only one element and gradient. You simply need to control the background-size to have the needed animation
.loader {
width: 70px;
height: 4em;
margin: 10px auto;
background-image:
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black),
linear-gradient(black,black);
background-size:10px 100%;
background-position:
0 50%,
15px 50%,
30px 50%,
45px 50%,
60px 50%;
background-repeat:no-repeat;
animation:load 2s infinite linear;
}
#keyframes load{
0% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
15% {
background-size:10px 50%,10px 100%,10px 100%,10px 100%,10px 100%;
}
30% {
background-size:10px 80%,10px 50%,10px 100%,10px 100%,10px 100%;
}
45% {
background-size:10px 100%,10px 80%,10px 50%,10px 100%,10px 100%;
}
60% {
background-size:10px 100%,10px 100%,10px 80%,10px 50%,10px 100%;
}
75% {
background-size:10px 100%,10px 100%,10px 100%,10px 80%,10px 50%;
}
90% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 80%;
}
100% {
background-size:10px 100%,10px 100%,10px 100%,10px 100%,10px 100%;
}
}
<div class="loader"></div>
You should be use this killer way.
Please add new class like: <div class="loader more">Loading...</div>
And give this type of css:
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
Hope this help.
Let me know further clarification.
.loader,
.loader:before,
.loader:after {
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader.more {
position: absolute;
right: 0;
left: 95px;
top: -10px;
}
.loader.more:after {
left: 0;
}
<div class="loader-wrapper">
<div class="loader">Loading...</div>
<div class="loader more">Loading...</div>
</div>
I just tried, i don't know this is a perfect solution.
.loader,
.loader1,
.loader:before,
.loader1:before,
.loader:after
{
background: black;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader,.loader1 {
color: black;
text-indent: -9999em;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
font-size: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader1:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before, .loader1:before {
left: -2em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 2em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
.loader-wrapper {
display: block;
position: relative;
height: 56px;
}
.loader
{
position: relative;
left: 30px;
top: -45px;
}
<div class="loader-wrapper">
<div class="loader1">Loading...</div>
<div class="loader">Loading...</div>
</div>
I have create loader using six bar. Using CSS you target specific div for delay in animation. As #João Pedro Schmitz suggest use nth-child CSS selector for selecting div. I give a space of 10px after every div and start the animation of each div with delay .12s.
/* This provide animated ajax loading image. */
.animatedBox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.animatedBox div {
display: inline-block;
position: absolute;
left: 6px;
width: 6px;
background: #fff;
animation: animatedBox 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.animatedBox div:nth-child(1) {
left: 20px;
animation-delay: -0.60s;
}
.animatedBox div:nth-child(2) {
left: 30px;
animation-delay: -0.48s;
}
.animatedBox div:nth-child(3) {
left: 40px;
animation-delay: -0.36s;
}
.animatedBox div:nth-child(4) {
left: 50px;
animation-delay: -0.24s;
}
.animatedBox div:nth-child(5) {
left: 60px;
animation-delay: -0.12s;
}
.animatedBox div:nth-child(6) {
left: 70px;
animation-delay: 0;
}
#-webkit-keyframes animatedBox {
0% {
top: 0px;
height: 30px;
background: #333;
}
50%,100% {
top: 0px;
height: 10px;
background: #333;
}
}
#keyframes animatedBox {
0% {
top: -11px;
height: 45px;
background: #333;
}
50%,100% {
top: 0px;
height: 25px;
background: #333;
}
}
<div class="animatedBox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>