I'm trying to do a loader with HTML and CSS I have the loader done but there's an issue when I have information behind the center of the loader the information doesn't show and the reason is because I have background: white; that I need to avoid showing the gradient because if I remove the white color and put transparent the gradient appears.
So I need to fix the problem when I have something behind the loader
.loader {
display: flex;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
}
.loader .circle {
background-image:linear-gradient(90deg, #a03297, #e90b5a);
width: 80px;
height: 80px;
border-style: solid;
border-color: transparent;
border-radius: 50%;
border-width: 1px;
animation: rot 2s linear infinite;
padding: 10px;
box-sizing: content-box;
}
.circle > div {
background:white;
height: 100%;
width: 100%;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width: 1px;
}
#keyframes rot {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="circle">
<div></div>
</div>
</div>
<p style="text-align: center; margin-top: 140px;">aaaaaaasssssssssssssssssçççççççççççççççççççççççççççççççççççççççççssssssss</p>
Use mask to make the inner part transparent:
.loader {
background:linear-gradient(yellow, #e90b5a);
/* Show only 10px from the border */
-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
border-radius: 50%;
position: fixed;
inset : calc(50% - 50px);
animation: rot 2s linear infinite;
}
#keyframes rot {
100% { transform: rotate(360deg); }
}
body {
background:linear-gradient(to right,grey,white)
}
<div class="loader"></div>
Related
i have a circle to contain some spinning elements. i have a div.tool contain a svg in circle. While a rotate div.tool, the image inside it also rotating, but i want that image remain straight. how can i fix that
HTML
<div class="circle">
<div class="tool" id="css"> <img src="css.svg"></div>
</div>
CSS
.circle{
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 500px;
height: 500px;
border: 2px solid black;
}
.tool{
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation:0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img{
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
}
#css{
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
#keyframes spin {
from{
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to{
transform: rotate( calc(calc(360 + var(--spin-initial))*1deg) );
}
}
Rotate the image the other way.
.circle {
position: relative;
background-color: #f5f5ff;
border-radius: 50%;
width: 400px;
height: 400px;
border: 2px solid black;
}
.tool {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
--rotation: 0;
transform: rotate(var(--rotation));
padding-top: 10px;
}
img {
width: 75px;
transform: rotate(calc(-1 * var(--rotation)));
animation: spin 30s linear infinite reverse;
}
#css {
--rotation: 0deg;
--spin-initial: 0;
animation: spin 30s linear infinite;
}
#keyframes spin {
from {
transform: rotate(calc(var(--spin-initial) * 1deg));
}
to {
transform: rotate(calc(calc(360 + var(--spin-initial)) * 1deg));
}
}
<div class="circle">
<div class="tool" id="css"> <img src="https://clipartix.com/wp-content/uploads/2017/06/Free-simple-basketball-clip-art.png"></div>
</div>
Rotate the image inifintely in opposite direction of it's parent container to negate the rotation on image.
I'm making a HTML program where I want to have two circles traveling on a circular path, in opposite directions. That's the main idea. Here's my code so far (I followed this tutorial on circular movement coding, and stopped right at 8:35 when it's just the red circle in motion):
styles.css:
body{
margin: 0;
padding: 0;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line{
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Two Circles in Circular Motion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
<div class = "line"></div>
</div>
</body>
</html>
Right now I only have 1 circle. I want to create another one, and animate it so that it travels in the same circular path but in the opposite direction. I'm relatively new to CSS and HTML, so can someone please help? Thanks!
You can optimize your code and use only one div and its pseudo element for the small circles:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #262626;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear infinite;
}
.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}
#keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}
<div class="circle">
</div>
Another solution is you could have made another line and used
animation-direction: reverse; on it.
Example;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line, .line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
.line2 {
animation-direction: reverse;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
You also could have created another line (like I did in my example (line2)), and bound a different animation keyframe to it like below;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate2 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
There are many possibilities to achieve what you are looking for :)
Because you say you are new to HTML and CSS I figured I'd show you some alternatives.
I first tried implementing it through two triangles. And got a satisfactory output
#wrapper {
margin-left: 40vw;
margin-top: 20vh;
}
#fidgetu {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
animation: rotate 2s linear infinite;
}
#fidgetd {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
animation: rotate 2s linear infinite;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="wrapper">
<div id="fidgetu">
</div>
<div id="fidgetd">
</div>
</div>
I guess drawing a fidget spinner would require 4 div circles and 3 div rectangles to connect the central circle to the other three and a wrapper div (applying animate property to this div). But the positioning is messing up.
Now how do I position them appropriately such that the entire block rotates around its center?
Set an element as the base spinner, and then 3 childs of this one as the outer circles.
if the outer ones are positioned over the first one, just rotating the base elements will handle the rotation of the others.
A litlle tricky are the curves connecting the inner and the outer. I have set a solution, but there is some missalignment. It still needs a last adjustment on the pixel values (but it's hard to get it exactly)
.spinner, .outer {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
transform-style: preserve-3d;
}
.spinner {
background-color: teal;
border: solid 20px tomato;
margin: 100px;
animation: rotate 4s infinite linear;
}
.outer {
background-color: lightblue;
border: solid 20px blue;
left: -20px;
top: -20px;
}
.outer:before {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
transform: translate(-91px, 104px);
box-shadow: 0px -55px 0px -33px blue;
}
.outer:after {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
transform: translate(-83px, -156px);
box-shadow: 0px 55px 0px -33px blue;
}
.outer:nth-child(1) {
transform: translate3D(120px, 0px, -10px);
}
.outer:nth-child(2) {
transform: rotate(120deg) translate3D(120px, 0px, -10px);
}
.outer:nth-child(3) {
transform: rotate(240deg) translate3D(120px, 0px, -10px);
}
#keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="spinner">
<div class="outer"></div>
<div class="outer"></div>
<div class="outer"></div>
</div>
This question already has answers here:
CSS3 Rotate Animation
(7 answers)
Closed 4 years ago.
I was wondering if it is possible to make a triangle that spins exactly from the center.
Codepen
html:
<div class="loader-wrapper">
<div class="loader"></div>
</div>
css:
.loader-wrapper {
width: 100%;
height: 100vh;
background-color: #11e;
}
#keyframes load {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: 4s linear 0s infinite load;
}
A complete solution could be like this.
Simply saying, you should change the transform origin that match the actual center of the triangle (which is 66.66% by pure math).
Html:
<div class="loader">
<div class="loader-wrapper">
<div class="triangle"></div>
</div>
</div>
CSS:
.loader {
display: inline-block;
position: relative;
width: 100%;
height: 300px;
}
.loader-wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
/* transform by half of its width & height */
transform: translate(-50%, -50%);
}
.triangle {
display: block;
position: relative;
width: 0;
height: 0;
border-color: transparent transparent #e44750 transparent;
border-width: 0px 100px 173.20508076px 100px;
border-style: solid;
transform-origin: 50% 66.66%;
animation: spin 3s infinite linear;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The transform-origin property can be used to change the origin of the transformation point. just add transform-origin: 107px 111px; to your .loader class.
You'll need to do some tuning though, to get it perfect.
Try this:
.loader {
position: relative;
top: 50%;
transform: translate(0, -50%);
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: 4s linear 0s infinite load;
}
JSFiddle
I found problem in new Firefox 32.0.2
http://jsfiddle.net/hdxoo9wy/1/
Here is example.
HTML
<div class="box">
<div class="ob3d"></div>
</div>
CSS
html,body{
height: 100%;
}
.box{
perspective: 1000px;
width: 80%;
height: 80%;
margin: 10%;
border: 1px rgba(0,255,0,0.2) dashed;
}
.ob3d{
width: 100%;
height: 100%;
transform: rotateX(0.5deg);
background: rgba(255,0,0,0.5);
transform-origin: 50% 100% 0;
outline: 1px transparent solid;
animation: bounce 5s linear infinite;
}
#keyframes bounce{
0% { transform: rotateX(-20deg);}
50% { transform: rotateX(20deg);}
100% { transform: rotateX(-20deg);}
}
Problem appears during rotationX in range -0.5deg , 0.5deg . It jumps and gives a bit random effect. Any ideas how to fix this?