Trying to add preloader with only HTML/CSS - html

I'm very humbled by this right now. I'm trying to add this Skype styled preloader into this theme I'm making, but I have no idea how to call the function. I feel as if it needs Javascript, but it's not on the site. Please & Thank you for future reference
<!-- HTML FILES -->
<div class="table">
<div class="table--cell">
<div class="loader">
<span class="loader--ball loader--ball__first"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
</div>
</div>
</div>
<!-- CSS FILE -->
html body{
background-color:#2980b9;
width:100%;
height:100vh;
}
.table{
width:100%;
height:100%;
display:table;
.table--cell{
display:table-cell;
vertical-align:middle;
text-align:center;
}
}
.loader{
display:inline-block;
width:120px;
height:120px;
.loader--ball{
position:absolute;
left:0;
right:0;
margin:0 auto;
width:10px;
height:10px;
border-radius:50%;
background:#ecf0f1;
transform-origin:0 60px;
display:block;
animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite;
#for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay:(0.1s * $i);
}
}
}
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader--ball:first-child{
background:none;
}
.loader--ball__first:before{
content:'';
width:10px;
height:10px;
position:absolute;
z-index:10;
top:0;
bottom:0;
background:#ecf0f1;
display:block;
border-radius:50%;
animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000) infinite;
}
#keyframes grow {
0%,
10% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
50% {
width:10px;
height:10px;
left:-5px;
}
85%, 100% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
}

The example is using SASS (scss). You need the compiled css if you are not using Sass. Example with compiled CSS
Compiled CSS:
html body {
background-color: #2980b9;
width: 100%;
height: 100vh;
}
.table {
width: 100%;
height: 100%;
display: table;
}
.table .table--cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.loader {
display: inline-block;
width: 120px;
height: 120px;
}
.loader .loader--ball {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ecf0f1;
-webkit-transform-origin: 0 60px;
-ms-transform-origin: 0 60px;
transform-origin: 0 60px;
display: block;
-webkit-animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
}
.loader .loader--ball:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader--ball:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader--ball:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader--ball:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader--ball:first-child {
background: none;
}
.loader--ball__first:before {
content: '';
width: 10px;
height: 10px;
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
background: #ecf0f1;
display: block;
border-radius: 50%;
-webkit-animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
}
#-webkit-keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}
#keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}

Related

How to change the position of a button?

I have a question. I wanted to use a button from codepen.io on my website (this one: https://codepen.io/emared/pen/RYgbaJ/). Everything works with the button but it appears on the end of my website. I want it to be just below my text. Here's my code:
<h3 style="padding-top: 35;">
Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
And in my CSS-Document I just pasted everything from the codepen page.
Now this is what it looks like: https://ibb.co/G3cmGdQ
Why's there that huge space between "Text" and the button?
Thanks for your help! 🙏
Look at the following code:
#import url('https://fonts.googleapis.com/css?family=Montserrat:900');
body{
margin:0;
padding:0;
background-color:#292929;
font-family: 'Montserrat', sans-serif;
}
.heading {
text-align: center;
margin-top: 50px;
color: #fff;
}
#wrapper{
margin-bottom: 30px;
width:100vw;
height:100vh;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
}
.my-super-cool-btn{
position:relative;
text-decoration:none;
color:#fff;
letter-spacing:1px;
font-size:2rem;
box-sizing:border-box;
}
.my-super-cool-btn span{
position:relative;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:200px;
}
.my-super-cool-btn span:before{
content:'';
width:100%;
height:100%;
display:block;
position:absolute;
border-radius:100%;
border:7px solid #F3CF14;
box-sizing:border-box;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn:hover span:before{
transform:scale(0.8);
box-shadow: 0 20px 55px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn .dots-container{
opacity:0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot{
width:8px;
height:8px;
display:block;
background-color:#F3CF14;
border-radius:100%;
position:absolute;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1){
top:50px;
left:50px;
transform:rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(2){
top:50px;
right:50px;
transform:rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(3){
bottom:50px;
left:50px;
transform:rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(4){
bottom:50px;
right:50px;
transform:rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn:hover .dot:nth-child(1){
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2){
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3){
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4){
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes swag1 {
0% {
top:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag1-out {
0% {
top:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag2 {
0% {
top:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag2-out {
0% {
top:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
right:50px;
width:8px;
opacity:0;
}
}
#keyframes swag3 {
0% {
bottom:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag3-out {
0% {
bottom:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag4 {
0% {
bottom:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag4-out {
0% {
bottom:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
right:50px;
width:8px;
opacity:0;
}
}
<h3 class="heading">Text goes here</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
Please check the code below:
#import url("https://fonts.googleapis.com/css?family=Montserrat:900");
body {
margin: 0;
padding: 0;
background-color: #292929;
font-family: "Montserrat", sans-serif;
}
.title {
text-align: center;
color: #fff;
font-size: 50px;
padding-top: 35px;
margin: 0;
}
#wrapper {
margin-bottom: 30px;
width: 100vw;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.my-super-cool-btn {
position: relative;
text-decoration: none;
color: #fff;
letter-spacing: 1px;
font-size: 2rem;
box-sizing: border-box;
}
.my-super-cool-btn span {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
}
.my-super-cool-btn span:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
border-radius: 100%;
border: 7px solid #f3cf14;
box-sizing: border-box;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn:hover span:before {
transform: scale(0.8);
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn .dots-container {
opacity: 0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot {
width: 8px;
height: 8px;
display: block;
background-color: #f3cf14;
border-radius: 100%;
position: absolute;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1) {
top: 50px;
left: 50px;
transform: rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(2) {
top: 50px;
right: 50px;
transform: rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(3) {
bottom: 50px;
left: 50px;
transform: rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(4) {
bottom: 50px;
right: 50px;
transform: rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn:hover .dot:nth-child(1) {
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2) {
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3) {
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4) {
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes swag1 {
0% {
top: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag1-out {
0% {
top: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag2 {
0% {
top: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag2-out {
0% {
top: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag3 {
0% {
bottom: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag3-out {
0% {
bottom: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag4 {
0% {
bottom: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag4-out {
0% {
bottom: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
<h3 class="title">Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>

How to change animation direction inside div

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>

How to make a ring/hoop flip as a ball passes through it?

I am trying to make something like this:
but the ball doesn't seem to pass through the ring, but rather passes across the ring. How can I fix this issue?
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
Another idea in case you need better support than clip-path. The trick is to play with transparent color:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
#keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
#keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
You can try to change z-index of ball inside of animation
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
#keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
z-index: 10;
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
position: relative;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
You can use a 3d transform to get automatically this effect.
Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:
body {
height: 50em;
transform-style: preserve-3d;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9;
margin-top: 100px;
transform: rotateX(50deg) rotateY(0deg) ;
transform-style: preserve-3d;
}
#keyframes spinner {
0%, 30% {
transform: rotateX(50deg) rotateY(0deg);
}
60%, 100% {
transform: rotateX(50deg) rotateY(180deg);
}
}
#keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>

Loader with five column bars

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>

Make Button Bounce with CSS3

I am trying to make this button bounce with CSS3
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
}
<div class="order">Order</div>
I would like it to bounce towards the screen (on the Z axis) up and down.
You can use a keyframe animation to animate the scale ratio and make your button bounce:
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
Iteration count:
If you want to stop the animation after a number of "bounces", you can use animation-iteration-count (use an even number of iterations otherwise the animation will snap on the last iteration) :
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
animation-iteration-count: 8;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
try this css
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
background-size: cover;
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
}
#keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
#-webkit-keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
.blink {
animation:fade 1000ms infinite;
-webkit-animation:fade 1000ms infinite;
}
try this html
<div class="order blink"></div>
The answer posted by web-tiki, would be the best one to use, still I have a different approach becoz you have already used position:absolute.
See this FIDDLE
you need to animate height and width for button using keyframe.
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
<div class="order"></div>
Edit:
To add further, you can also animate left and top to 38px both so the
button doesn't look like deviating from original position see this
Fiddle
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 0.5s 2;
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
50% {
height: 100px;
width: 100px;
left: 38px;
top: 38px;
}
100% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
}
<div class="order"></div>
You can animate(bounce) like following:
CSS:
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
animation: myfirst 2s infinite;
-webkit-animation: myfirst 2s infinite;
}
#-webkit-#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Check Fiddle