This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am making an animated wave loading page, and I wanted to switch my current loader with a loading bar, but my loading bar seems to stick at the top I cant put it in the middle of the screen, where the current loader is, I have tried using the centered class that the current loader has and when I use that class the loading bar disapears, how could I do it?
<title>Loading...</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<script>
var i = 0;
var txt = '...';
var speed = 250;
function letterbyletter() {
if (i < txt.length) {
document.getElementById("lbl").innerHTML += txt.charAt(i);
i++;
setTimeout(letterbyletter, speed);
}
}
var o = 0;
function move() {
if (o == 0) {
o = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
o = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
<body onload="letterbyletter(); move()">
<div class="waveWrapper waveAnimation">
<div id="myProgress">
<div id="myBar"></div>
</div>
<div class="centered"><div class="loader"></div></div>
<div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
</body>
body{
background-color: #076585;
font-family: 'Lato', sans-serif !important;
}
.loader {
border: 8px solid #fff;
border-radius: 80%;
border-top: 8px solid #076585;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#myProgress {
width: 100%;
background-color: #fff;
}
#myBar {
width: 1%;
height: 5px;
background-color: #000000;
}
h4{
position: relative;
display: inline-block;
font-weight: 2000;
font-size: 15px;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
z-index: 20;
transform: translate(-50%, -50%);
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
Your class centered works for me. You can add it into your div #myProgress but you have to add margin auto to center your bar inside that div. This works when you need to center a display block element inside another display block element.
<div id="myProgress" class="centered">
<div id="myBar"></div>
</div>
#myBar {
width: 10%;
height: 5px;
background-color: #000000;
margin: 0 auto;
}
Related
This question already has answers here:
Color of stacked semi-transparent boxes depends on order?
(4 answers)
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 8 months ago.
The community reviewed whether to reopen this question 8 months ago and left it closed:
Original close reason(s) were not resolved
I have a site with a gradient background. That works fine. But, when I add a button to it, the colour changes to the one on the background. This is my CSS:
BTW, open the snippet on full-page, or it won't look clear
const leftSide = document.getElementById("playerLeft");
const rightSide = document.getElementById("playerRight");
const newGame = document.getElementById("newGame");
function setSelectedPlayer(position) {
switch (position) {
case 1:
rightSide.style.backgroundColor = "#ffffff80"
leftSide.style.backgroundColor = "#fff"
break;
case 2:
leftSide.style.backgroundColor = "#ffffff80"
rightSide.style.backgroundColor = "#fff"
break;
}
}
newGame.onpointerdown = function () {
newGame.style.top = "10px";
}
newGame.onpointerup = function () {
newGame.style.top = "-10px";
}
<!DOCTYPE html>
<html>
<head>
<title>Pig Game!</title>
<style>
body {
background-image: linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
align-items: center;
font-family: sans-serif;
}
#parent {
height: 70%;
width: 70%;
opacity: 30%;
position: absolute;
top: 20%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#title {
color: white;
position: absolute;
top: 10%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
font-size: 250%;
}
#playerLeft {
width: 50%;
height: 100%;
border-radius: 10px 0 0 10px;
float: left;
}
#playerRight {
width: 50%;
height: 100%;
border-radius: 0 10px 10px 0;
float: left;
}
.activePlayer {
background-color: rgba(255, 255, 255, 1);
}
.inActivePlayer {
background-color: rgba(255, 255, 255, 0.5);
}
.button {
border-radius: 40px;
border-color: white;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20%;
height: 10%;
margin: auto;
background-color: white;
}
</style>
</head>
<body>
<h1 id="title">Pig Game!</h1>
<div id="parent">
<div class="activePlayer" id="playerLeft">
</div>
<div class="inActivePlayer" id="playerRight">
</div>
<button type="button" class="button buttonNewGame" id="newGame">Hi</button>
</div>
<script src="script.js"></script>
</body>
</html>
And the button with the text hi is not appearing white. Why is that so? And how can I make it white?
The opacity of #parent is 30% so it and everything inside it is translucent.
If you wanted to set the background of #parent to be translucent, then use a background-color with an alpha channel, don't use opacity.
My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can't seem to find any. Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
vertical-align: middle;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help that would be great!
PS: I just want it vertically centered, not horizontally.
Thanks!
Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
display: flex;
align-items: center;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
I made a sort of header with an animated information banner (on 3 lines)
starting at each end. (ex: for the 1st and 3rd line, from left to right and for the 2nd line from right to left). What I would like is to take a break of a few seconds when the 3 bands are
all aligned (in the center) then continue the animation.
I would prefer a solution without using javascript but unfortunately I think it seems impossible?
Problem: The 1st and 3rd banner always start to appear before the 2nd and therefore when they are aligned, they are never in the center.
<!DOCTYPE html>
<HTML>
<head>
<title> VIDEO LIBRARY </title>
<meta charset="utf-8"/>
<style type="text/css">
.bandeau
{
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26,133,230);
}
#keyframes defilement {
from {
left: 0;
}
to {
left: 1000px;
}
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top:0;
right:0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite ;
}
</style>
</head>
<body>
<div class="bandeau" >
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
</body>
</HTML>
Instead of using from and to in your keyframes, you can set steps using percentages.
In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:
#keyframes defilement {
0% {left: 0;}
45% {left: 500px;}
55% {left: 500px;}
100% {left: 1000px;}
}
Responsive solution: blocks will stop in the centre an any size screen.
If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.
However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!
Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.
#keyframes defilement {
0% { left: -250px;}
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%;}
}
Working example:
.bandeau {
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26, 133, 230);
}
#keyframes defilement {
0% { left: -250px; }
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%; }
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top: 0;
right: 0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite;
}
<div class="bandeau">
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
For more information on keyframes, take a look at Mozilla MDN Docs for CSS3 Keyframes
So i have been developing a loading screen website for a gaming community in a game called MVG and for some reason i have an issue with the site where after the first fade out of the image it flashes and it then does this for every image im unable to see what the problems is i would really like some help since otherwise the website is finished for me thanks in advance.
here is my first draft of the website https://mynamejack.hxane.com/MVGCWloadingscreen/
just click inspect elements and you should be able to view all the code but i will post it below anyway
<html>
<head>
<title>MVG loading screen</title>
<link href="assets/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="outer">
<div class="details">
<img alt="MVG" src="assets/images/logo/mvg-logo.png" style="opacity: 100%;">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 580px;
}
</style>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: arial;
overflow: hidden;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 60s ease-in-out infinite;
background-size: cover;
}
.outer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5)
}
.details {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#keyframes animate { /* When you want to change the image put the image name in replacethis.jpg and make sure its a jpg also make sure the % adds up to 100% otherwise it spazes out
If the slideshow brakes please let me know on discord MyNameJack#6969 or if you know css you can fix it */
0%, 100% {
background-image: url(images/slideshow/replacethis.jpg);
}
11% {
background-image: url(images/slideshow/replacethis.jpg);
}
22% {
background-image: url(images/slideshow/replacethis.jpg);
}
33% {
background-image: url(images/slideshow/replacethis.jpg);
}
44% {
background-image: url(images/slideshow/replacethis.jpg);
}
55% {
background-image: url(images/slideshow/replacethis.jpg);
}
66% {
background-image: url(images/slideshow/replacethis.jpg);
}
77% {
background-image: url(images/slideshow/replacethis.jpg);
}
88% {
background-image: url(images/slideshow/replacethis.jpg);
}
99% {
background-image: url(images/slideshow/replacethis.jpg);
}
100% {
background-image: url(images/slideshow/replacethis.jpg);
}
}
//Here is my HTML
What i need here is that on complete load of the progress bar it should redirect to another page.
any ways for that?!!!!
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="container">
<h2 class="text-center">Loading</h2>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
help me out!!
And i don't have any java script here.
i would be more happy if i can do it without java script.
so please help me out with it.
UPDATE
found that java script animation end may help out.
Simply use this trick highlighted by David Walsh. He did it for transitionend, but we can swap it out for animationend instead.
His trick is to loop through the list of all vendor-prefixed and native animationend events, and check if the browser supports any of them. He then attaches the recognized animationend handler to the element of interest.
When the animationend event is fired, we simply redirect to the URL of interest using window.location.replace(), as mentioned before.
I have modified it so it would work for your scenario:
$(function() {
// Check with animationend event is supported by browser
function whichAnimationEvent(){
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MozAnimation':'animationend',
'WebkitAnimation':'webkitAnimationEnd'
}
for(t in animations){
if( el.style[t] !== undefined ){
return animations[t];
}
}
}
// Listen for animation
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
// Alert (to demonstrate the code works)
alert('Animation complete! This is the callback, no library needed!');
// Redirect script
window.location.replace('/path/to/url');
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9w7pntmt/3/
ok., i found the solution completely.
if anyone have any issue with this please report.
function whichAnimationEvent() {
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
};
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
function oload() {
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
window.location.replace("http://alokraj68.in");
});
}
// Listen for animation
html,
body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em"Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<html>
<head>
<meta charset="UTF-8">
<title>alokraj68.in--Loading!!</title>
<link rel="stylesheet" href="css/loading.css">
<script src="js/script.js"></script>
</head>
<body onload="oload()">
<div class="container">
<h1 class="text-center">alokraj68.in</h1>
<h2 class="text-center">Loading</h2>
<div class="progress">
<div id="pb" class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
</body>
</html>
Try this coding.
if anyone finds any issues, please tell me.