How can i create a dynamic progress bar - javascript

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>

Related

How to change the text on certain points

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>

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/

Create Progress wheel in CSS

I want to create a progress wheel in html and css, if necessary than jQuery also. I create a wheel but problem is that how can I set the length of the borders according to given percentage.
Here is Code:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
}
<div class="loader"></div>
It create a circle and blue border on it but I want like the below image.
Here is a radial progress bar that i made. I have updated it to suit your needs.
The fill percentage is determined by the transform rotate value given to .pure-css .semi.right .circle and .pure-css .semi.left .circle
.pure-css {
width: 300px;
height: 300px;
border-radius: 50%;
background: #fff;
position: relative;
color: #fff;
}
.pure-css .semi {
width: 50%;
height: 100%;
position: relative;
display: inline-block;
float: left;
overflow: hidden;
z-index:2;
transform:rotate(30deg)
}
.pure-css .semi.left{
transform-origin:100% 50%;
}
.pure-css .semi.right{
transform-origin:0% 50%;
}
.pure-css .semi.right .circle {
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
border-right: 0;
transform: rotate(181deg) translate(-100%, 0);
animation: rotate 4s linear forwards;
transform-origin: 0% 50%;
}
.pure-css .semi.left .circle {
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
border-left: 0;
transform: rotate(36deg) translate(100%, 0);
animation: rotate2 4s linear forwards;
transform-origin: 100% 50%;
animation-delay: 42s;
}
.pure-css .semi .circle {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 50px solid #4ec9aa;
}
.pure-css .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
overflow: hidden;
font-size: 28px;
color:#28645d;
text-align:center;
}
.pure-css .shade {
width: 100%;
height: 100%;
transform:scale(.9,.9);
border-radius: 50%;
box-sizing: border-box;
border: 30px solid #e7ebee;
}
<div class="rp">
<div class="pure-css">
<div class="semi left">
<div class="circle"></div>
</div>
<div class="semi right">
<div class="circle"></div>
</div>
<div class="text">
<span class="num">Goal<br><b>20,000$</b></span>
</div>
<div class="shade"></div>
</div>
</div>
To change the fill value give
.pure-css .semi.left .circle{
transform: rotate(xdeg) translate(-100%, 0);
}
.pure-css .semi.right.circle{
transform: rotate(xdeg) translate(-100%, 0);
}
where x is a value between 0 and 180 (optional) giving 180 to .semi.right will fill half the circle and 180 to .semi-left will fill the full circle.
To fill according to a percentage value,for filling < 50% set the transform of .semi.right .circle to percentage * 360 / 100 deg and for filling > 50% set the transform of .semi.left .circle to 180 - (percentage * 360/100) deg.
For determining the start and end position of the fill value
.pure-css .semi {
transform:rotate(xdeg)
}

css circle rotation with text inside

Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!
To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.
Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}

Categories

Resources