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)
}
Related
What would be the best approach to have this face always point towards my mouse? The tricky part for me has been having it skew and scale as if it's rotating around a sphere. (I turned it into a CSS animation to show what I would like it to do)
Thank you so much for your help, and I hope that you have a great day!
const head = document.querySelector('.head');
const face = document.querySelector('.face');
addEventListener('mousemove', e => {
// face follows cursor
// rotates and scales accordingly
});
*,
*::before,
*::after {
box-sizing: border-box;
}
#keyframes move {
0% {
transform: translateX(0) translateY(0px) rotate3d(0, 0, 0, 45deg) scale(1);
}
25% {
transform: translateX(150px) translateY(0px) rotate3d(0, 10, 0, 45deg) scale(0.9);
}
50% {
transform: translateX(0px) translateY(-150px) rotate3d(10, 0, 0, 45deg) scale(0.9);
}
75% {
transform: translateX(-100px) translateY(100px) rotate3d(10, 10, 0, 45deg) scale(0.9);
}
}
.head {
width: 500px;
height: 500px;
border-radius: 50%;
background-image: linear-gradient(120deg, yellow, #c47400);
box-shadow: inset -5px -5px 20px yellow;
position: relative;
}
.head::before {
content: "";
position: absolute;
left: 75px;
top: 75px;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: white;
opacity: 0.35;
filter: blur(45px)
}
.eye {
width: 65px;
height: 100px;
margin: 10px;
border-radius: 100px;
display: inline-block;
background-color: #8a6b0c;
}
.mouth {
width: 175px;
height: 50px;
background-color: #8a6b0c;
border-radius: 100px;
}
.container {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.face {
display: inline-block;
animation: move 4s ease infinite;
}
<div>
<div class="head">
<div class="container">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
</div>
</div>
I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
I have the following code:
scroll {
left: 50%;
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>
This is basically a scroll button and on my end the output is looking like this:
As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?
The code of the MY STORY text is as follows:
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div class="section-title">
<h2>My Story</h2>
</div>
How would I achieve this task?
Basically, the scroll button should be right on top of the text
Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:
.section-title h2::before {
...
width: 120px;
...
left: calc(50% - 60px);
}
.section-title h2::after {
...
width: 40px;
...
left: calc(50% - 20px);
}
But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
See demo below.
#container {
position: relative;
height: 5em;
}
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div id="container">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
<h2>My Story</h2>
</div>
PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.
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>
I have a semi circle on the center of my page, which I want to be able to spin, I'm able to do some part of it by adjusting the width but I want a way to make it spin a complete 360degrees. If possible, I want to be able to accomplish it using only css, however if required I don't mind vanilla js (no Jquery).
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
width: 50px
}
to {
width: 0px;
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
Is this what you want?
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
transform-origin: left;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
If I understand correctly you want the semicircle to revolve around your "hello" text. If so, you could use the transform: rotateY() style to spin your circle. If you do this, you can add your width to the circle div, as well as set the transform-origin to be the left-side of your element so that you rotate around the left-side of your semi-circle and not the center:
transform-origin: left;
width: 50px;
See example below:
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 200px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
animation: spinning linear infinite;
animation-duration: 3s;
transform-origin: left;
width: 50px;
}
#keyframes spinning {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />