How to change the text on certain points - javascript

Using the below code it will display the single text with percentage loader but i am trying add multiple text instead of single, basically i am rshiny developer no i started learning html and css code it wil be useful if i get any idea on how to change the text on certain points
i have tried this keyframe anim i dont know y its not working
#keyframes anim{
10%{
content:'Stage 1';
}
25%{
content:'Stage 2';
}
50%{
content:'Stage 3';
}
75%{
content:'Stage 4';
}
100%{
content:'Completed';
}
}
const analyse=document.getElementById('analyse');
const numb = document.querySelector(".number");
let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
if (counter == 100) {
fetch.style.display='inline-block';
clearInterval(id1);
} else {
counter += 1;
numb.innerHTML = counter + "%";
fetch.style.display='none';
}
}, 120);
html, body{
display:inline-block;
height:100%;
text-align: left;
place-items: left;
background: #dde6f0;
}
.circular{
height:100px;
width: 100px;
margin-left: 43%;
margin-top:10%;
position: absolute;
display: inline-block;
/* transform:scale(2); */
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
}
.circle .left .progress{
z-index:1;
animation: left 6s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 6s linear both;
animation-delay:6s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
.text::after{
animation:anim 10s linear both;
}
<html>
<head>
<link rel="stylesheet" href="TestTwoCss.css">
</head>
<body>
<div class="container">
<div id="analyse">
<div class="text">Analysing...</div>
<div class="circular">
<div class="inner"></div>
<div class="number">0%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


you can use switch and change analyze text base on counter .
const analyzeText = document.querySelector("#analyse .text");
const numb = document.querySelector(".number");
let counter = 0;
let id1;
let cnt = 0;
id1 = setInterval(() => {
if (counter == 100) {
// fetch.style.display='inline-block';
clearInterval(id1);
} else {
counter += 1;
numb.innerHTML = counter + "%";
// fetch.style.display='none';
changeText(counter); // change analyze text base on counter value.
}
}, 110);
function changeText() {
switch (counter) {
case 1:
analyzeText.innerHTML = "Stage 1";
break;
case 25:
analyzeText.innerHTML = "Stage 2";
break;
case 50:
analyzeText.innerHTML = "Stage 3";
break;
case 75:
analyzeText.innerHTML = "Stage 4";
break;
case 100:
analyzeText.innerHTML = "Completed";
break;
}
}
html, body{
display:inline-block;
height:100%;
text-align: left;
place-items: left;
background: #dde6f0;
}
.circular{
height:100px;
width: 100px;
margin-left: 43%;
margin-top:10%;
position: absolute;
display: inline-block;
/* transform:scale(2); */
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
}
.circle .left .progress{
z-index:1;
animation: left 6s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 6s linear both;
animation-delay:6s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<html>
<head>
<!-- <link rel="stylesheet" href="TestTwoCss.css"> -->
</head>
<body>
<div class="container">
<div id="analyse">
<div class="text">Analysing...</div>
<div class="circular">
<div class="inner"></div>
<div class="number">0%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How can i create a dynamic progress bar

I am trying to create a progress bar which looks like the first image above but end up getting the second image as a result.
I am using html, CSS and JavaScript. where did I get it wrong? Or is there something I am missing out?
the black dots are not really that important to me as I am interested in the shape of the progress bar
const numb = document.querySelector(".number");
let counter = 0;
setInterval(() => {
if(counter == 65 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
*{
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
html, body{
display:grid;
height:100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular{
height:120px;
width: 120px;
position: relative;
transform:scale(2);
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 120px, 120px, 70px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 70px, 120px, 0px);
background: #FF6600;
}
.circle .left .progress{
z-index:1;
animation: left 4s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay:4s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<div class="circular">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>

I fiddled with it until it worked.
Changed the clip on .circular .bar and .circle .bar .progress to
clip: rect(0px, 120px, 120px, 60px); and respectively clip: rect(0px, 60px, 120px, 0);
const numb = document.querySelector(".number");
let counter = 0;
setInterval(() => {
if(counter == 65 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
*{
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
html, body{
display:grid;
height:100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular{
height:120px;
width: 120px;
position: relative;
transform:scale(2);
}
.circular .inner{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #dde6f0;
border-radius: 100%;
}
.circular .number{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 120px, 120px, 60px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 60px, 120px, 0);
background: #FF6600;
}
.circle .left .progress{
z-index:1;
animation: left 4s linear both;
}
#keyframes left{
100%{
transform: rotate(180deg);
}
}
.circle .right {
transform: rotate(180deg);
z-index:3;
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay:4s;
}
#keyframes right{
100%{
transform: rotate(180deg);
}
}
<div class="circular">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>

Responsive menu in JavaScript

I have an issue with js. I want to make an responsive menu. I mean when I am on start page the start page is on first place on the list. If I am on contact page the contact is first in the list. var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; <div class="name_container"><p class="pn">Start</p><p class="more">READ MORE</p></div> The menu is a circle with icons that are moving on it. First element in list is on bottom of the circle. On conclusion I need change the list dinamicly in js script depends on subpage i am on. I know i can create several js files and it will work, but i wonna try it by js or HTML or u have some ideas.
Thanks from any help
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
cmove("prev");
});
hammertime.on('swiperight', function(ev) {
cmove("next");
});
$(".action").on("click", function(){
cmove($(this).attr('id'));
});
$('.title').each(function(){
$(this).html("Earth".replace("<span class='letter'>$&</span>"));
});
var angle = 0;
var planet_id = 0;
function cmove(dir){
var n_planet = 8, next_id;
var prev, next;
var top = $("#pl"+ planet_id);
var orbit = $(".planet_container");
top.removeClass("pt");
if(planet_id == 0){
prev = $("#pl"+ (n_planet-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}else{
prev = $("#pl"+ (planet_id-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}
if(dir == "prev"){
next_id = (planet_id + 1) % n_planet;
angle -= 45;
next.addClass("pt");
planet_id++;
}else{
if(planet_id == 0){
next_id = 7;
planet_id = 7;
}else{
next_id = planet_id-1;
--planet_id;
}
angle += 45;
prev.addClass("pt");
}
$('.pn').each(function(){
$(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
});
anime.timeline({})
.add({
targets: '.pn .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
});
orbit.css("transform", "rotateZ(" + angle + "deg)");
}
var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
let loocation_path = location.pathname.split('/');
var path = loocation_path[loocation_path.length - 1];
switch(path){
case 'index.html':
while(planet[0] != 'Start'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Start";
break;
case 'contact.html':
while(planet[0] != 'Contact'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Contact";
break;
}
const planets = document.querySelectorAll('.moon');
var moon_id = 0;
function moon(direction){
var n_planet = 8, moon_next;
if(direction == "prev"){
moon_next = (moon_id + 1) % n_planet;
moon_id++;
} else {
if(moon_id == 0){
moon_next = 7;
moon_id = 7;
} else {
moon_next = moon_id - 1;
--moon_id;
}
};
planets.forEach( ( planet, i ) => {
if ( i === moon_next ) {
planet.style.visibility = 'visible';
} else {
planet.style.visibility = 'hidden';
}
} );
};
body {
color: #444444;
font-size: 1rem;
margin: 0;
padding: 0;
}
.t-site-header {
padding-top: 20px;
height: 30vh;
}
.full_container {
position: relative;
display: block;
width: 100vmin;
height: 100%;
margin: auto;
z-index: 100;
}
.full_container .bottom {
position: absolute;
transform: rotate(180deg);
top: 0;
width: 100%;
height: 28vh;
}
.full_container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
display: block !important;
}
.full_container .bottom .nav span {
color: #999;
cursor: pointer;
}
.full_container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.full_container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.full_container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.full_container .bottom .orbit {
position: absolute;
top: 5vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.full_container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.full_container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.full_container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
-webkit-animation: spin 0.4s;
animation: spin 0.4s;
}
/* */
.full_container .bottom .orbit .planet_container .earth {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
/* transform: rotate(180deg)*/
}
.full_container .bottom .orbit .planet_container .earth .mars .jupiter .saturn .uranus .neptune .mercury .venus .moon span {
top: -1vmin;
left: -1vmin;
}
.full_container .bottom .orbit .planet_container .mars {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
top: 12vmin;
/* transform: rotate(-135deg)*/
}
.full_container .bottom .orbit .planet_container .jupiter {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(-90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .saturn {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
bottom: 12vmin;
/* transform: rotate(-45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .uranus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
/* transform: rotate(0deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .neptune {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
bottom: 12vmin;
/* transform: rotate(45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .mercury {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .venus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
top: 12vmin;
/* transform: rotate(135deg) scale(1.7);*/
}
.full_container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: rotate(180deg);
}
.full_container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.full_container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.full_container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 4px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.full_container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
visibility: hidden;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#pl0{
transform: rotate(180deg);
}
#pl1{
transform: rotate(225deg);
}
#pl2{
transform: rotate(270deg);
}
#pl3{
transform: rotate(315deg);
}
#pl4{
transform: rotate(360deg);
}
#pl5{
transform: rotate(405deg);
}
#pl6{
transform: rotate(450deg);
}
#pl7{
transform: rotate(495deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<header class="t-site-header">
<div class="full_container" id="mobile_control">
<div class="bottom">
<div class="nav">
<span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
<span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
</div>
<div class="orbit">
<div class="planet_container">
<div class="planet pt earth" id="pl0">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mars" id="pl1">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet jupiter" id="pl2">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet saturn" id="pl3">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet uranus" id="pl4">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet neptune" id="pl5">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mercury" id="pl6">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet venus" id="pl7">
<div class="moon">
<span></span>
</div>
</div>
</div>
<div class="name_container">
<p class="pn" id="show_pathname"></p>
<p class="more">READ MORE</p>
</div>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script><script src="./js/script.js"></script>
</body>
</html>

How to make a circle progress bar with left side of percentage

const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>
I want to make a progress bar like the one in the image below. The percentage should be on left side up to 90% and after 90%, it will go to the center.
How can I do that?

You can position the .numb at the desired place in the beginning, define another css class .numb-center which has top and left 50% to make it center and add that class to .numb when it's your desired percentage in setInterval function.
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
if (counter > 90 && !numb.classList.contains('.numb-center')) {
numb.classList.add('numb-center')
}
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.numb-center {
top:50%!important;
left:50%!important;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>

Content overlapping when display size is too small

I have an issue with my site; I cannot find a way to make my content stop overlapping when the actual display size is smaller than the original display size - 1920x1080.
I would like to know how I could either scale down the whole page or just make my content not overlap.
Thanks in advance for any help provided!
var i = 0;
var txt1 ="foqjpcqkcqèckqècqq."
var txt2 ="iqj0pqcjqp'cjqpjciq'pcjqi'cjqic."
var txt3 ="jqopjfgoqpkfpqovmqpvqvkqpoèvkqp"
var prevScrollpos = window.pageYOffset;
var speed = 100; /* The speed/duration of the effect in milliseconds */
window.onload = function typeWriter() {
if (i < txt2.length) {
document.getElementById("about_l1").innerHTML += txt1.charAt(i);
document.getElementById("about_l2").innerHTML += txt2.charAt(i);
document.getElementById("about_l4").innerHTML += txt3.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
if (i == 0){
}
}
const scrollToTop =() => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
scrollToTop();
#import url('https://fonts.googleapis.com/css?family=Oswald:500');
.wrapper{
position: relative;
width: auto;
margin: 0 auto;
overflow-y: visible;
margin:0px;
}
.back{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("../media/backgif2.gif");
background-size: cover;
transform-origin: 50% 50%;
color: white;
}
.thx{
position: fixed;
left:50%;
transform:translateX(-50%);
bottom: 15px;
}
hr.style-one {
position: relative;
bottom: 0px;
border: 0;
height: 1px;
width: 110%:;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
.visuallyhidden{
opacity: 0;
animation: fade-in-right ease 0.8s forwards;
animation-delay: 0.1s;
}
.visuallyhidden2{
opacity: 0;
animation: fade-in-right ease 0.8s forwards;
animation-delay: 0.8s;
}
.visuallyhidden3{
opacity: 0;
animation: fade-in-right ease 2s forwards;
animation-delay: 1.5s;
}
.Lvisuallyhidden{
opacity: 0;
animation: fade-in-left ease 0.8s forwards;
animation-delay: 0.1s;
}
.Lvisuallyhidden2{
opacity: 0;
animation: fade-in-left ease 0.8s forwards;
animation-delay: 0.8s;
}
.Lvisuallyhidden3{
opacity: 0;
animation: fade-in-left ease 2s forwards;
animation-delay: 1.5s;
}
nav{
width: 100%;
position: absolute;
top:50px;
text-align:center;
}
nav a{
font-family: 'Oswald', sans-serif;
font-weight:500;
text-transform:uppercase;
text-decoration:none;
color:#16151b;
margin:0 15px;
font-size:16px;
letter-spacing:1px;
position:relative;
display:inline-block;
}
nav a:before{
content:'';
position: absolute;
width: 100%;
height: 3px;
background:#16151b;
top:47%;
animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
iframe{
height: 250px;
width: 400px;
border: 2px solid #FFFFFF;
}
input:focus {outline:0;}
p{
width: 45%;
font-family: 'Oswald', sans-serif; font-size:21px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
color:#16151b;
position: absolute;
}
#keyframes in{
0%{
width: 0;
left:0;
right:auto;
}
100%{
left:0;
right:auto;
width: 100%;
}
}
#keyframes out{
0%{
width:100%;
left: auto;
right: 0;
}
100%{
width: 0;
left: auto;
right: 0;
}
}
#keyframes show{
0%{
opacity:0;
transform:translateY(-10px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
#keyframes fade-in-right {
from {
opacity: 0;
transform: translateX(-25px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
#keyframes fade-in-left {
from {
opacity: 0;
transform: translateX(25px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
#div1{
height: 1200px;
}
#div2{
height: 500px;
}
#div3{
height: 500px;
}
#about_p{
position: absolute;
text-align: center;
height: 5%;
width: 70%;
left: 15%;
top: 30%;
}
#about_p2{
position: absolute;
left: 50%;
top: 95%;
}
#bar1{
position: absolute;
width: 45%;
max-width: 50%;
height: auto;
top: 39%;
left :28%;
border-bottom: 4px solid black;
}
#bar2{
position: relative;
height: 135px;
top: 715px;
left :9%;
border-left: 4px solid black;
}
#vid1{
position: absolute;
left: 25%;
top: 95%;
}
#vid2{
position: absolute;
left: 55%;
top: 150%;
}
#vid3{
position: absolute;
left: 25%;
top: 205%;
}
#title1{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 5%;
bottom: -10%;
}
#title2{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 80%;
bottom: -70%;
}
#title3{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 5%;
bottom: -120%;
}
#arrow{
position: absolute;
height: 10%;
left: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="css/inspiration.css" />
<script src="javascript/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="javascript/inspiration.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div class="back"></div>
<header>
<nav id="navbar">
About
Works
Inspiration
Price
Contacts
</nav>
</header>
<div id="bar1" class="visuallyhidden2"></div>
<div id="div1">
<p id="about_p" class="Lvisuallyhidden3">
<span id="about_l1">Music inspires people and I've been in</span>
<span id="about_l2"><br>If those artists can inspire you too then may</span>
</p>
</div>
<div id="div2">
<label id="title1" class="Lvisuallyhidden2">A$AP Rocky</label>
<iframe id="vid1" class="Lvisuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<p id="about_p2" class="visuallyhidden2">
<span id="about_l3"><br>fdcjqiojqoicmqiojcopipcjqpèèpq qpoi jcqip jqè qè kq èjq èpjq q jqè jqpj pq c</span>
<span id="about_l4"><br>fdcjqiojqoicmqiojcopipcjqpèèpq qpoi jcqip jqè qè kq èjq èpjq q jqè jqpj pq c </span>
</p>
</div>
<div id="div3">
<label id="title2" class="visuallyhidden2">kzmzmzmzmzmz</label>
<iframe id="vid2" class="visuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<div id="div4">
<label id="title3" class="visuallyhidden2">Kendrick Lamar</label>
<iframe id="vid3" class="visuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<footer>
<input id="arrow" type="image" src="media/arrow.png" onclick="scrollToTop()" />
</footer>
</div>
<a class="thx" style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;left: 51%;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://www.instagram.com/manu.fma/?hl=fr" target="_blank" rel="noopener noreferrer" title="Magnolia's instagram"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Magnolia
</body>
</html>
https://jsfiddle.net/e6w5aLp7/

absolute position will cause elements to overlap. Better to use position:relative and display:block to stack elements on the page. Please refer to: https://www.w3schools.com/css/css_positioning.asp
Consider using bootstrap, responsive framework out of the box. Get started by pasting css and js link and you are ready to go:
https://getbootstrap.com/docs/4.3/getting-started/introduction/

Instead of using position: absolute everywhere you should consider to use other approach like :
CSS flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
It's more flexible and responsive.
You also can use other units like viewports units (vw or vh) to use screen size relative units : https://css-tricks.com/fun-viewport-units/

JQuery rotate two side back forth on hover (3D)

I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)
Here is a live example:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>

This solves the problem
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});

$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}

This would be more easily done using a transition instead of an animation. Here is an example:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>

Categories

Resources