I am creating a loader animation and I have achieved something like this below:
I want the black line to move from, left -> right and then right -> left infinitely. Right now, it's only moving in one direction.
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
from {
left: 300px;
}
to {
left: 0;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Use #keyframes with % 0/50/100 to back it use 100%{left: 300px;}
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0%{
left: 300px;
}
50%{
left: 0;
}
100%{
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Or, you can use only
50% {
left: 300px;
}
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1.6s infinite;
}
#keyframes line-bounce {
50% {
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Hope this helps you thanks. if you want to lear more about keyframe then visit below link. thanks
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {left: 0px;}
50% {left: 300px;}
100% {left: 0px;}
}
<div class="loader">
<div class="blue-line"></div>
</div>
An easier way is to simply add alternate to the animation and also adjust it like below to avoid using pixel values:
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
margin:10px 0;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite alternate;
}
#keyframes line-bounce {
from {
left: 100%;
transform:translateX(-100%);
}
to {
left: 0;
transform:translateX(0);
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
<div class="loader" style="width:500px">
<div class="blue-line"></div>
</div>
<div class="loader" style="width:200px">
<div class="blue-line"></div>
</div>
Thanks #לבני מלכה, I just made few changes to make it look more smoother.
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1.6s infinite;
}
#keyframes line-bounce {
0% {
left: 300px;
}
50% {
left: 0;
}
100% {
left: 300px;
}
}
<div class="loader">
<div class="blue-line"></div>
</div>
Try it: fiddle
HTML:
<div class="loader_trak">
<div class="loader_bar">
</div>
</div>
CSS:
.loader_trak {
position: relative;
height: 10px;
background-color: #ccc;
width: 250px;
}
.loader_bar {
background-color: #333;
position: absolute;
height: 100%;
width: 80px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {
left: 0;
}
50% {
left: calc(100% - 80px);
}
100%{
left: 0;
}
}
You can use the following code for the same
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">
.loader {
background: #ccc;
width: 400px;
height: 10px;
border-radius: 10px;
position: relative;
}
.loader .blue-line {
background: #000;
border-radius: 10px;
position: absolute;
left: 0;
z-index: 1;
width: 100px;
height: 10px;
animation: line-bounce 1s infinite;
}
#keyframes line-bounce {
0% {
left: 0px;
}
50% {
left: 300px;
}
100% {
left: 0px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="loader">
<div class="blue-line"></div>
</div>
</div>
</div>
</body>
</html>
Related
I have working code for a CSS preloader at CSS preloader sample
I would like the animated preloader to be colored. I tried adding the style color: red !important; to various styles to the CSS class lds-ripple, but it did nothing.
A colored preloader would look more impressive in my view.
How would I make the CSS preloader show with colored rings?
the same code from working sample is also pasted below.
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<div id="loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<style>
#loader {
display: none;
justify-content: center;
align-items: center;
width:100%;
height:100%;
border:green solid 1 px;
opacity:0.9;
background-color:whitesmoke;
position:absolute;
left:0;
top:0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
<script>
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
</script>
#fff in the line marked below can be changed to set the loader's color.
.lds-ripple div {
position: absolute;
border: 4px solid #fff; /* edit this line */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
For example:
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
showLoader();
#loader {
display: none;
justify-content: center;
align-items: center;
width:100%;
height:100%;
border:green solid 1 px;
opacity:0.9;
background-color:whitesmoke;
position:absolute;
left:0;
top:0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid red;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
<div id="loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>
For changing color animation:
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
The problem is that the divs inside the lds-ripple have no dimension into it. So the color property won't have any effect. However, the border-color will still work. So you can replace the default #fff color with something like red. For example:
.lds-ripple div {
position: absolute;
border: 4px solid red; /* HERE */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
#loader {
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: green solid 1 px;
opacity: 0.9;
background-color: whitesmoke;
position: absolute;
left: 0;
top: 0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid red; /* HERE */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<div id="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
Id like to make the wave border stick to the bottom of the picture regardless of the size/resolution of the browser window , however adjusting the size of the parent div wont work and neither will setting the border to top: 100%;.
Goal (regardless of screen size)
Like this, but regardless of how the screen is adjusted
*{
}
body{
background-color:rgb(74,76,81);
}
#welcometoc3 {
position: absolute;
max-width: 700px;
left: 75px;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
font-family: 'gamepixies', 'Josefin Sans', sans-serif;
color: white;
font-size: 125px;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#font-face {
font-family: 'gamepixies';
src: url('/Users/jager/Desktop/dev/dev/Main Projects/Chatting 3 webstie/Chatting 3 webstie/fonts/Gamepixies-8MO6n.ttf') format('truetype');
}
.center-con {
position: relative;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
top: 170px;
left: 25%;
}
.round {
position: relative;
border: 3px solid #fff;
width: 100px;
height: 100px;
border-radius: 100%;
}
span {
z-index: 10;
height: 3px;
margin:1px;
width: 30px;
background: rgb(78, 161, 0);
transition: 0.4s ease;
}
span:first-child {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 35%;
}
span:nth-child(2) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 35%;
}
span:nth-child(3) {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 54%;
}
span:nth-child(4) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 54%;
}
.round:hover span:nth-child(1) {
transform: rotate(-135deg);
}
.round:hover span:nth-child(2) {
transform: rotate(135deg);
}
.round:hover span:nth-child(3) {
transform: rotate(225deg);
}
.round:hover span:nth-child(4) {
transform: rotate(-225deg);
}
#banner-image {
position: relative;
width: 100%;
clip: (0px,0px,100px,0px);
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
top: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatting 3 Hub</title>
<!--CSS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mainstyle.css">
</head>
<body style="margin:0;">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
</div>
<div id="welcometoc3" class="fade">Welcome to Chatting 3</div>
<div>
<div class="center-con">
<div class="round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
body{
background-color:red;
}
#banner-image {
position:relative;
width: 100%;
clip: (0px,0px,100px,0px);
bottom: 0;
left: 0;
position: absolute;
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
bottom: 0;
left: 0;
}
.banner{
position: relative;
height: 100%;
height: 45vh;
}
img{
width: 100%;
height: 300px;
}
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
</div>
You just need to adjust the size of it. As far as I know, you cannot make something relative to the img because this doesn't contain a closing tag so you can't put something inside the image. You need to put them in the same container and adjust their positions.
I have 3 diferent divs and I want to "glue" them together. When I say glue them, I mean that I want to make one shape out of it. Here is my css and html code (with bootstrap):
#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
float: left;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzDnoLevo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
}
#NadrzDnoLevo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
width: 150px;
border-radius: 300px 0 0 300px;
}
#NadrzDnoPravo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 150px;
height: 0;
}
#NadrzDnoPravo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
width: 150px;
border-radius: 0 300px 300px 0;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 500px;
height: 0;
}
#NadrzLuby {
position: relative;
overflow: hidden;
border: 5px solid black;
border-left-width: 0px;
border-right-width: 0px;
height: 300px;
width: 500px;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzDnoLevo" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzDnoPravo" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
</div>
It does work pretty well, until I try it on mobile. Here is how it looks normally.
My problem comes when I try it on mobile where it looks like this:
As you can see, on mobile it looks horrible. I just want to somehow glue NadrzDnoLevo, NadrzLuby and NadrzDnoPravo together. Is it possible? Thanks for any help.
You need to get rid of float: left, and you can use flexbox to make them stay side by side and not wrapping to the next line by adding these rules to the .wrapper:
.wrapper {
display: flex;
flex-wrap: nowrap;
}
Also, on top of that, you can add
flex: 0 0 150px;
to #NadrzDnoLevo and NadrzDnoPravo and add
flex: 0 1 500px;
to #NadrzLuby to make the capsule keep its shape.
#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
display: flex;
flex-wrap: nowrap;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzDnoLevo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
}
#NadrzDnoLevo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
flex: 0 0 150px;
border-radius: 300px 0 0 300px;
}
#NadrzDnoPravo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 150px;
height: 0;
}
#NadrzDnoPravo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
flex: 0 0 150px;
border-radius: 0 300px 300px 0;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 500px;
height: 0;
}
#NadrzLuby {
position: relative;
overflow: hidden;
border: 5px solid black;
border-left-width: 0px;
border-right-width: 0px;
height: 300px;
flex: 0 1 500px;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzDnoLevo" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzDnoPravo" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
</div>
one div solution to easy handle it:
.box {
--w: 50%; /* height of the blue coloration */
--h:200px; /* Height of the element */
height: var(--h);
max-width: 400px;
margin: 20px 0;
border-radius: var(--h);
border: 3px solid;
background:
linear-gradient(#000,#000) left calc(var(--h)/2) top 0/3px 100%,
linear-gradient(#000,#000) right calc(var(--h)/2) top 0/3px 100%,
linear-gradient(blue,blue) bottom/100% var(--w);
background-repeat:no-repeat;
transition:1s;
}
.box.hide {
-webkit-mask:
linear-gradient(#fff,#fff)
center/calc(100% - var(--h)) 200%
padding-box border-box no-repeat;
margin:20px calc(-1*var(--h)/2);
}
.box:hover {
--w:80%;
}
<div class="box"></div>
<div class="box hide"></div>
#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
float: left;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 800px;
height: 0;
}
#NadrzLuby {
--var-height:300;
position: relative;
overflow: hidden;
border: 5px solid black;
border-radius: calc(var(--var-height) * 0.5px);
height: calc(var(--var-height) * 1px);
width: 800px;
}
.line-left {
position: absolute;
left: calc(var(--var-height) * 0.5px);
top: 0;
bottom: 0;
border: 2.5px solid black;
}
.line-right {
position: absolute;
right: calc(var(--var-height) * 0.5px);
top: 0;
bottom: 0;
border: 2.5px solid black;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%">
<span class="line-left"></span>
<span class="line-right"></span>
</div>
</div>
</div>
Hi I have two divs side by side - but when I change to mobile view they overlap, how can I stop this? Codepen - https://codepen.io/MarkHarrison/pen/NXNGgJ Thanks
box {
position: absolute !important;
left: 0;}
iframe{
border:10px solid transparent;
border-image-source:url(https://i.imgur.com/91tJ1qi.png);
border-image-slice:10;
width:500px;
height:300px;
display:block;
margin:auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
You may simply remove the .box class where there is the absolute position and let bootstrap restruct the content on small screens :
h1,
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
padding-bottom: 100px;
}
body {
background: #2B2B2B;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #F5D5D5, 0 0 10px #F2A7A7, 0 0 20px #F58484, 0 0 40px #FC5858, 0 0 80px #FF0F0F, 0 0 90px #F5D5D5, 0 0 100px #F2A7A7, 0 0 150px #F58484;
}
iframe {
border: 10px solid transparent;
border-image-source: url(https://i.imgur.com/91tJ1qi.png);
border-image-slice: 10;
width: 500px;
height: 300px;
display: block;
margin: auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
}
.face {
position: absolute;
height: 70%;
width: 40%;
left: 30%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
}
.face-copy {
position: absolute;
height: 100%;
width: 100%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
z-index: 2;
}
.ear-left {
position: absolute;
width: 15%;
height: 20%;
left: 5%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(-60deg);
z-index: 1;
}
.ear-right {
position: absolute;
width: 15%;
height: 20%;
left: 80%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(60deg);
z-index: 1;
}
.ear-inner {
bottom: 20%;
margin-top: 30%;
background: #8B4513;
width: 35%;
height: 80%;
margin-left: 32%;
border-radius: 70% 70%;
}
.eye-left {
position: absolute;
background: white;
width: 15%;
height: 13%;
left: 30%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-right {
background: white;
width: 15%;
height: 13%;
position: absolute;
left: 55%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-left-inner,
.eye-right-inner {
background: black;
width: 70%;
height: 70%;
border-radius: 50%;
margin-top: 25%;
z-index: 3;
}
.eye-left-inner {
margin-left: 20%;
}
.eye-right-inner {
margin-left: 10%;
}
.pupil {
position: absolute;
background: white;
width: 30%;
height: 30%;
z-index: 4;
border-radius: 50%;
left: 35%;
}
.nose {
position: absolute;
background: #603311;
width: 50%;
height: 30%;
border-radius: 50%;
margin-left: 25%;
z-index: 4;
margin-top: 65%;
}
.inner-nose {
position: absolute;
width: 85%;
margin-top: 1%;
height: 90%;
background: #8B4513;
border-radius: 50%;
border-top-right-radius: 45%;
transform: rotate(-10deg)
}
.horn-left,
.horn-right {
position: absolute;
margin-left: 15%;
margin-top: -80%;
width: 10%;
height: 80%;
background: #8B4513;
transform: rotate(-20deg);
border-radius: 70% 70% 50% 50% / 50% 50% 50% 50%;
}
.horn-left-bottom,
.horn-left-top,
.horn-left-middle,
.horn-right-bottom,
.horn-right-middle,
.horn-right-top {
background: #8B4513;
position: absolute;
width: 90%;
height: 35%;
transform: rotate(60deg);
margin-top: 500%;
margin-left: 108%;
border-radius: 0.5em 2em 0.5em 2em;
}
.horn-left-top {
margin-top: 20%;
}
.horn-left-middle {
transform: rotate(-60deg);
margin-top: 250%;
margin-left: -110%;
}
.horn-right {
margin-left: 75%;
transform: rotate(21deg);
}
.horn-right-bottom,
.horn-right-top {
background: #8B4513;
transform: rotate(-60deg);
margin-left: -110%;
border-radius: 2em 0.5em 0.5em 2em;
}
.horn-right-top {
margin-top: 20%;
}
.horn-right-middle {
margin-top: 250%;
}
.box {
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
50% {
top: 50px;
}
75% {
top: 150px
}
100% {
top: 0px;
}
}
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<h1 class="neon">Welcome to TLW Christmas Countdown</h1>
<h2 class="neon">You Will be taken to your deal shortly!</h2>
</div>
<div class="row">
<div class="col-md-4 blue">
<!--Reindeer-->
<div class="box">
<!--Head -->
<div class="face">
<div class="face-copy"></div>
<div class="ear-left">
<div class="ear-inner"></div>
</div>
<div class="ear-right">
<div class="ear-inner"></div>
</div>
<div class="eye-left">
<div class="eye-left-inner">
<div class="pupil"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-right-inner">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="inner-nose"></div>
</div>
<div class="horn-left">
<div class="horn-left-bottom"></div>
<div class="horn-left-middle"></div>
<div class="horn-left-top"></div>
</div>
<div class="horn-right">
<div class="horn-right-bottom"></div>
<div class="horn-right-middle"></div>
<div class="horn-right-top"></div>
</div>
<!-- Closing Face -->
</div>
<!-- Closing Box -->
</div>
</div>
<div class="col-md-4 yellow">
<!--Youtube-->
<div class="video" ;>
<iframe width="540" height="285" src="https://www.youtube.com/embed/iDNWwxJonII" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I'm using a loader in my application, but I can't manage to properly centre it.
As you are going to see it's slightly moved to left side of the screen.
Here's the fiddle: Loader
Here's the HTML code:
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Here's the SCSS code:
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
left: -12px;
animation-delay: .4s;
}
&:last-of-type {
top: 20px;
left: 12px;
animation-delay: .2s;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
If you go to the fiddle and you inspect the div with the class "loader" you can see that it's not centred.
What am I missing?
when you rotate a div, of course it changes it centre point, so i just repositioned it.
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
/*background: $uiColor;*/
background: white;
/*
&--carbon {
background: $carbon;
}
&--value {
background: $value;
}
&--research {
background: $research;
}
&--quality {
background: $quality;
}
*/
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
right: 50%;
margin-left: 3px;
animation-delay: 0.4s;
}
&:last-of-type {
top: 20px;
left: 50%;
animation-delay: 0.2s;
margin-left: 6px;
}
&:nth-child(2) {
left: 50%;
margin-left: -6px;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Fiddle
You can set loader width 60px to 48px to resolve this. check updated snippet below..
.loader-graph-default {
background-color: black;
display: none;
}
.loader-graph-loading {
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 48px;
height: 60px;
margin: auto;
text-align: center;
left: 12px;
}
.loader__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
}
.loader__hexagon--value {
background: #009ECB;
}
.loader__hexagon:first-of-type {
top: 20px;
left: -12px;
animation-delay: 0.4s;
}
.loader__hexagon:last-of-type {
top: 20px;
left: 12px;
animation-delay: 0.2s;
}
.loader__hexagon:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(-62deg);
}
.loader__hexagon:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
You have added left:-12px to the first of div with class "loader__hexagon loader__hexagon--value", which shifts the whole block to the left by -12px.
Also the width of the Loader is not 60px.
The style should be as given below :
.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}
Add a style for second child:
.loader__hexagon:nth-child(2) {
left: 12px; }
Edit style of third child:
.loader__hexagon:last-of-type {
top: 20px;
left: 23px;
animation-delay: 0.2s; }
Reduce the width of the loader to 45px:
.loader {
background: none;
position: relative;
width: 45px;
height: 60px;
margin: auto;
text-align: center; }
You are using absolute positioning on your hexagons, that's why they are not centered, try a different approach such as display: inline-block with adjusted margins (some space inbetween) for bottom hexagons.
&__hexagon {
margin: 0 auto;
}
&:first-of-type {
display: block;
}
&:nth-child(2) {
margin-right: 4px;
display: inline-block;
}
&:last-of-type {
margin-left: 4px;
display: inline-block;
}
fiddle