I have this loading animation.but after every rotation it stops for a split second.is there a way to make it more fluid...im using after and before pseduo elements and animating the parent circle with animation-iteration-count to infinite.i am rotating it 405deg=45deg(intial value)+360deg
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:#1A4D2E ;
}
.circle{
width: 40px;
height: 40px;
border-radius: 50%;
margin-right:5px ;
border-top: 1.5px solid#350cc9;
fill:none;
transform: rotate(45deg);
position: relative;
animation: loadanim 1.5s;
animation-iteration-count: infinite;
}
.circle::before{
content: "";
position: absolute;
top:2px;
left: 5px;
width: 30px;
height:30px;
border-radius: 50%;
margin-right:5px ;
border-top: 1.5px solid#f1f513;
fill:none;
transform: rotate(20deg);
}
.circle::after{
content: "";
position: absolute;
top:6px;
left: 8px;
width: 25px;
height:25px;
border-radius: 50%;
margin-right:5px ;
border-top: 1.5px solid#f30ed4;
fill:none;
transform: rotate(20deg);
}
#keyframes loadanim{
from{
transform: rotate(45deg);
}
to{
transform: rotate(405deg);
}
}
<body>
<div class="circle"></div>
</body>
It's not completely stopping, but it's easing (the animation-timing-function). If you set it to use linear instead then it is continuous.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1A4D2E;
}
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 5px;
border-top: 1.5px solid#350cc9;
fill: none;
transform: rotate(45deg);
position: relative;
animation: loadanim 1.5s linear;
animation-iteration-count: infinite;
}
.circle::before {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 5px;
border-top: 1.5px solid#f1f513;
fill: none;
transform: rotate(20deg);
}
.circle::after {
content: "";
position: absolute;
top: 6px;
left: 8px;
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 5px;
border-top: 1.5px solid#f30ed4;
fill: none;
transform: rotate(20deg);
}
#keyframes loadanim {
from {
transform: rotate(45deg);
}
to {
transform: rotate(405deg);
}
}
<body>
<div class="circle"></div>
</body>
Related
I want it to be like this shape .
Just tell me how to make the not completed borders.
And one last thing is that I have to use one div.<div>Elzero</div> with pseudo-elements
Thanks in advance.
you can make it with transparent border
div
{
background-color: #ddd;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 30px;
margin: 40px auto;
color: black;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
div::before
{
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-10px, -10px);
z-index: -1;
border: 10px solid;
border-color: red red red transparent;
}
body ::after
{
content: "";
width: 220px;
height: 220px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-21px, -22px);
z-index: -8;
border: 12px solid;
background: transparent;
border-color: blue transparent blue blue;
}
<div></div>
Try That Bro :)
div {
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
margin: 50px auto;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
}
div::before{
content: "";
height: 200px;
width: 200px;
border-radius: 50%;
border: 10px solid #03a9f4;
border-left-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-10px, -10px);
z-index: -1;
transition: transform 0.5s linear;
}
div:hover::before{
transform: translate(-10px, -10px) rotate(360deg);
}
div::after {
content: "";
height: 220px;
width: 220px;
border-radius: 50%;
border: 10px solid #e91e63;
border-right-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-20px, -20px);
z-index: -2;
transition: transform 0.5s 0.5s linear;
}
div:hover::after{
transform: translate(-20px, -20px) rotate(360deg);
}
Just put the text/string 'HERE' in a anchor tag like this:
HERE
I have a checkbox with ripple effects. The below code displays the label text first and then the checkbox
I wanted to display the checkbox first and then the label text. The entire div expands and shrinks sometimes,
<style>
#keyframes ripple {
0% {
transform: scale(0,0);
opacity: 1
}
20% {
transform: scale(25,25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40,40)
}
}
#onoff+label {
position: relative;
display: inline-block;
padding-right: 10px
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0,0,0,.5);
border-radius: 2px;
position: absolute;
top: 50%;
right: -40px;
transform: translate(-20px,-50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255,0,0,.4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15,157,88,.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0,0,0,.1);
background-color: rgba(0,0,0,.05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0,0,0,.1);
position: absolute;
box-sizing: border-box;
top: 50%;
right: -10px;
transform: translate(-50%,-50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" style="margin-right: 30px;" class="lbl gray">Turn on/off</label>
<br/>
</div>
you can do so by using following code
#onoff+label {
margin-left: 30px;
position: relative;
}
#onoff+label::after {
left: -10px;
right: auto;
}
#onoff+label::before {
left: 0;
right: auto;
}
<style>
#keyframes ripple {
0% {
transform: scale(0,0);
opacity: 1
}
20% {
transform: scale(25,25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40,40)
}
}
#onoff+label {
position: relative;
display: inline-block;
padding-right: 10px
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0,0,0,.5);
border-radius: 2px;
position: absolute;
top: 50%;
right: -40px;
transform: translate(-20px,-50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255,0,0,.4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15,157,88,.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0,0,0,.1);
background-color: rgba(0,0,0,.05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0,0,0,.1);
position: absolute;
box-sizing: border-box;
top: 50%;
right: -10px;
transform: translate(-50%,-50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
#onoff+label {
margin-left: 30px;
position: relative;
}
#onoff+label::after {
left: -10px;
right: auto;
}
#onoff+label::before {
left: 0;
right: auto;
}
</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" class="lbl gray">Turn on/off</label>
<br/>
</div>
I'm using a loader in my application, but I can't manage to properly centre it.
As you are going to see it's slightly moved to left side of the screen.
Here's the fiddle: Loader
Here's the HTML code:
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Here's the SCSS code:
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
left: -12px;
animation-delay: .4s;
}
&:last-of-type {
top: 20px;
left: 12px;
animation-delay: .2s;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
If you go to the fiddle and you inspect the div with the class "loader" you can see that it's not centred.
What am I missing?
when you rotate a div, of course it changes it centre point, so i just repositioned it.
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
/*background: $uiColor;*/
background: white;
/*
&--carbon {
background: $carbon;
}
&--value {
background: $value;
}
&--research {
background: $research;
}
&--quality {
background: $quality;
}
*/
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
right: 50%;
margin-left: 3px;
animation-delay: 0.4s;
}
&:last-of-type {
top: 20px;
left: 50%;
animation-delay: 0.2s;
margin-left: 6px;
}
&:nth-child(2) {
left: 50%;
margin-left: -6px;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Fiddle
You can set loader width 60px to 48px to resolve this. check updated snippet below..
.loader-graph-default {
background-color: black;
display: none;
}
.loader-graph-loading {
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 48px;
height: 60px;
margin: auto;
text-align: center;
left: 12px;
}
.loader__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
}
.loader__hexagon--value {
background: #009ECB;
}
.loader__hexagon:first-of-type {
top: 20px;
left: -12px;
animation-delay: 0.4s;
}
.loader__hexagon:last-of-type {
top: 20px;
left: 12px;
animation-delay: 0.2s;
}
.loader__hexagon:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(-62deg);
}
.loader__hexagon:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
You have added left:-12px to the first of div with class "loader__hexagon loader__hexagon--value", which shifts the whole block to the left by -12px.
Also the width of the Loader is not 60px.
The style should be as given below :
.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}
Add a style for second child:
.loader__hexagon:nth-child(2) {
left: 12px; }
Edit style of third child:
.loader__hexagon:last-of-type {
top: 20px;
left: 23px;
animation-delay: 0.2s; }
Reduce the width of the loader to 45px:
.loader {
background: none;
position: relative;
width: 45px;
height: 60px;
margin: auto;
text-align: center; }
You are using absolute positioning on your hexagons, that's why they are not centered, try a different approach such as display: inline-block with adjusted margins (some space inbetween) for bottom hexagons.
&__hexagon {
margin: 0 auto;
}
&:first-of-type {
display: block;
}
&:nth-child(2) {
margin-right: 4px;
display: inline-block;
}
&:last-of-type {
margin-left: 4px;
display: inline-block;
}
fiddle
How to draw 1/2 or 1/4 "equal" line width circle with css ?
(not svg)
the whole line not equal width how to fix it
https://jsfiddle.net/ryxq1e91/
.circle {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
background-color: red;
}
.circle >div {
top: 11px;
left: 14px;
}
.circle >div {
position: relative;
width: 12px;
height: 12px;
border-bottom-right: 1px solid rgba(40,40,40,1);
border-bottom: 1px solid rgba(40,40,40,1);
border-bottom-left: 1px solid rgba(40,40,40,1);
border-radius: 8px;
}
<div class="circle">
<div></div>
</div>
As another option if you want to keep the full div, just make the borders that you don't want transparent. The only caveat is that it will appear 45 degrees rotated, so just transform it with a transform: rotate(45deg).
Note that I'm unsure what the support for this is.
1/4 Circle
.circle {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background-color: red;
}
.circle >div {
top: 10px;
left: 10px;
}
.circle >div {
position: relative;
width: 100px;
height: 100px;
border-right: 1px solid transparent;
border-bottom: 1px solid rgba(40,40,40,1);
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-radius: 50px;
transform: rotate(45deg);
}
<div class="circle">
<div></div>
</div>
1/2 Circle
.circle {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background-color: red;
}
.circle >div {
top: 10px;
left: 10px;
}
.circle >div {
position: relative;
width: 100px;
height: 100px;
border-right: 1px solid rgba(40,40,40,1);
border-bottom: 1px solid rgba(40,40,40,1);
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-radius: 50px;
transform: rotate(45deg);
}
<div class="circle">
<div></div>
</div>
You can use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).
Then add a border to top/right/left sides of the box to achieve the effect.
1 / 2 Circle
.half-circle {
width: 200px;
height: 100px;
background-color: skyblue;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="half-circle"></div>
1 / 4 Circle
.half-circle {
width: 100px;
height: 100px;
background-color: skyblue;
border-top-left-radius: 100px;
border: 10px solid gray;
border-right: 0;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="half-circle"></div>
Here you go:
https://jsfiddle.net/3ozvfgnr/
A full circle with border and border-radius that is overlayed by elements that cut off the parts you don't want and which have the same background color.
<div class="circle">
<div class="overlay1"></div>
<div class="circlebasis"></div>
</div>
<div class="circle">
<div class="overlay2"></div>
<div class="overlay3"></div>
<div class="circlebasis"></div>
</div>
.circle {
position: relative;
width: 80px;
height: 80px;
background-color: red;
margin-bottom:5px;
}
.circlebasis {
box-sizing: border-box;
top: 18px;
left: 18px;
position: relative;
width: 40px;
height: 40px;
border: 2px solid rgba(40,40,40,1);
border-radius: 22px;
}
.overlay1 {
box-sizing: border-box;
position:absolute;
width: 80px;
height: 40px;
border: none;
background-color: red;
z-index:1;
}
.overlay2 {
box-sizing: border-box;
position:absolute;
width: 80px;
height: 40px;
border: none;
background-color: red;
z-index:1;
}
.overlay3 {
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 80px;
border: none;
background-color: red;
z-index: 1;
}
Does this help??
.circle {
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
height:45px;
width:90px;
margin-top:0px;
border:2px solid black;
border-bottom:none;
}
.quarter-circle {
height:45px;
width: 45px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
border:2px solid black;
border-bottom:none;
border-right:none;
}
<div class="circle"></div>
<div class="quarter-circle"></div>
I decided it would be fun to turn this into a loading icon.
.quarter-circle {
height:45px;
width: 45px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
border:2px solid rgba(0,0,200,.5);
border-bottom:none;
border-right:none;
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="rotating" style="width:90px;height:90px;"><div class="quarter-circle"></div></div>
I have tried my best here Jsfiddle. Now I want to animate the center needle point slowly to fastly from left to right. I have heard about css keyframes and tried it. But, it goes left and right. I didn't get the expected result. How do I animate this needle using just pure css?
CSS
#logo
{
display: inline-block;
position: relative;
}
#logo .speedometer
{
width: 80px;
height: 80px;
border-radius: 100%;
border: 20px solid #000;
border-right: 20px solid white;
border-bottom: 20px solid white;
-webkit-transform: rotate(45deg);
display: inline-block;
}
#logo .needle
{
width: 5px;
height: 50px;
background: #999999;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
display: inline-block;
left: 57px;
position: absolute;
top: 10px;
}
HTML
<div id="logo">
<span class="speedometer"></span>
<span class="needle"></span>
</div>
demo - http://jsfiddle.net/99oakz7w/2/
use #keyframes
#-webkit-keyframes move {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}
#logo {
display: inline-block;
position: relative;
}
#logo .speedometer {
width: 80px;
height: 80px;
border-radius: 100%;
border: 20px solid #000;
border-right: 20px solid white;
border-bottom: 20px solid white;
-webkit-transform: rotate(45deg);
display: inline-block;
}
#logo .needle {
width: 5px;
height: 50px;
background: #999999;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
display: inline-block;
left: 57px;
position: absolute;
top: 10px;
-webkit-animation: move 5s infinite;
transform: rotate(0deg);
transform-origin: bottom;
}
#-webkit-keyframes move {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}
<div id="logo"> <span class="speedometer"></span>
<span class="needle"></span>
</div>
design a dashboard gauge for speedmeter.
DEMO
Hope this help.
I could almost do it the needle moves like you want but moves away from the center http://jsfiddle.net/99oakz7w/1/
CSS
#-webkit-keyframes move{
0%{transform:rotate(0deg);}
10%{transform:rotate(-45deg);}
20%{transform:rotate(30deg);}
50%{transform:rotate(80deg);}
100%{transform:rotate(90deg);}
}
Akshay's just needs transform-origin: bottom; after line 28 in the CSS.