This question already has answers here:
Doughnut chart with rounded corners - is it possible? [closed]
(2 answers)
Closed 9 days ago.
How to draw a circle like this picute using css.
Here I want to draw a circle with two different segment. And this two segment color could be two differnet color. Also the length should be dynamic. Like for now the large one is 75% and small one is 25%. So here the percentage could vary;
Note: I want integrate it in angular app.
By referencing the example, here my best attempt.
A lot more css example for your reference. Happy coding :)
.loader {
border: 16px solid gray;
border-radius: 50%;
width: 120px;
height: 120px;
position: relative;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader::after {
content: ' ';
border: 12px solid white;
border-right: 0;
border-bottom: 0;
width: 60%;
height: 60%;
position: absolute;
top: 50%;
left: 50%;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Related
This is my first time asking a question on here and I've found questions that are somewhat similar, but haven't worked for my issue.
I am trying to spin a word across the screen from off-screen left to off-screen right. The center of the word should be it's rotation point (ie word spins in place from left side of screen to right). I have tried using variations of translateX and rotate, but it either rotates in place or moves left to right. When it does move from the left to right off the screen, it keeps extending the bounds of my screen and stretching it before it loops back to the left side. Any ideas how I can solve this? Seems simple, but I'm terrible with animations.
.move {
position: absolute;
animation: moveword 10s infinite linear;
}
.spin {
position: absolute;
animation: spin 7s infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes moveword {
from {
left: -10%;
}
to {
left: 95%;
}
}
Based on code that you provide, I assume you could make something like this.
overflow: hidden needs to be applied to separate element, not the <body> because it restricts scrolling.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.word {
position: absolute;
top: 5px;
left: 5px;
animation: word-anim 10s infinite linear;
}
#keyframes word-anim {
0% {
transform: translateX(0px) rotateZ(0deg);
}
70% {
transform: translateX(70vw) rotateZ(360deg);
}
100% {
transform: translateX(100vw) rotateZ(360deg);
}
}
<div class="page">
<span class="word">A word</span>
</div>
The animation I created gradually slides in the element with the class of .overlay from right to left in .4 seconds by adding the .overlay-appear class to it on click. It works perfectly in Mozilla. In Chrome the slide effect doesn't take place, the element simply appears when I click that specific button. I added the vendor prefixes to keyframes, animation and transform, but the problem still persists. Maybe I'm missing something?
Here's the CSS that is relevant to the problem:
.overlay {
position: fixed;
background-color: rgb(49, 49, 49);
z-index: 100;
top: 0;
right: 0;
width: 0%;
height: calc(100vh - 25px);
display: none;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
padding: 25px 50px 0 0;
}
.overlay-appear {
animation: appear .4s forwards;
-webkit-animation: appear .4s forwards;
width: 50%;
display: flex;
transform-origin: right;
-webkit-transform-origin: right;
}
#keyframes appear {
0% {
transform: scaleX(0%);
}
100% {
transform: scaleX(100%);
}
}
#-webkit-keyframes appear {
0% {
-webkit-transform: scaleX(0%);
}
100% {
-webkit-transform: scaleX(100%)
}
}
You missed the fact that transfrom:scale(); only takes simple integers (not measurements of any kind.). I don't know why Firefox CSS engine accepts that. But to make the code legal change the values.
#keyframes appear {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
The scaleX(1) means the actual size of the div as specified by its code. Any other measure there means the relative scale (and not any absolute measure).
Not quite a pulse animation -- but somewhat similar (not radial, but linear) -- I am trying to create the effect of sort of a lens flare if you turn a piece of glass and see a band of light swipe across it, in CSS. So say you have a regular background image, or a seamless repeating background image, in CSS. Now you want to animate across that image a rectangular band of light that is sort of a "fade-in ... full light ... fade-out" gradient of white light. So you have a linear-gradient sort of like transparent, semi-transparent-white, white, semi-transparent-white, transparent that flows across the background image (seamless/repeating background image, or regular background image), repeatedly flowing across like it was a pool of water in constant motion.
Wondering if this sort of thing is possible in CSS, and how to do it.
Maybe it is simply an animated linear-gradient mask (which I am not familiar with but have heard of). Not sure.
Basically animating a semitransparent linear gradient like this (just the line part, and imagine it was a simple rectangle).
Are you looking for something like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right,transparent 33%,white,transparent 66%),
url(https://picsum.photos/id/10/800/800) center;
background-size:300% 100%,cover;
animation:change 2s linear infinite;
}
#keyframes change {
from { /*Use "to" to change the direction */
background-position:right,center;
}
}
html {
background:#fff;
}
Related to get more details about the calculation:Using percentage values with background-position on a linear gradient
NOt sure if this is what you are looking for. Here it is a shot!
.ripple{
width: 50px;
height: 50px;
display: block;
position: relative;
background-color: #00ccff;
border-radius: 100%;
opacity: 0.5;
}
.ripple:before, .ripple:after{
content: '\0020';
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
border: 2px solid #0088ee;
transform: translate(-50%, -50%);
}
.ripple:before{
animation: ripple-one 2.5s infinite;
}
.ripple:after{
animation: ripple-one 3.5s infinite;
}
#keyframes ripple-one{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
#keyframes ripple-two{
0%{
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
<label class="ripple"></label>
I'm trying to create a loading animation where the outer ring spins to the right, while the inner one spins to the left.
This is all the CSS code:
html {
height: 100%;
}
.loadingCircle {
width: 100px;
height: 100px;
border: solid 5px transparent;
border-top: solid 5px blue;
border-radius: 50%;
transform-origin: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loadingCircleOuter {
#extend .loadingCircle;
animation: circleSpinOuter 2s linear infinite;
}
.loadingCircleInner {
#extend .loadingCircle;
height: 80px;
width: 80px;
animation: circleSpinInner 2s linear infinite;
}
#keyframes circleSpinOuter {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
#keyframes circleSpinInner {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
Doing this results in the inner circle not spinning at all.
If I comment out the animation of the outer circle the inner one spins properly and making the inner circle spin twice as fast is enough to cancel the out the spin of the outer animation and add the proper spin to the left to it (oddly enough, only to it and not to the outer one, that one is still spinning correctly to the right).
It's clear that the outer animation is applied to both circles, but why?
I don't understand why it's behaving like that, changing the color of the outer circle does not apply the change to both circles, why does it alter the animation for both though?
Am I doing something horribly wrong?
If I have two lines of text one on top of the other. Content of each line is dynamic.
Is there a way to set animation speed in pixels per second? So that line would scroll with same speed regardless of their length?
Example of the situation:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
Means of AngularJS directive and CSS are welcome.
You can use JQuery (javascript) to get the width of headings and than calculate the duration based on the width i.e duration per pixel
width() method of jquery is used to get width of the headings.
I calculate the the duration as follows:
1s = 20px
Therefore 100px = 100/20
= 5s
You can increase the denominator (see the number10) in var dur1=Math.ceil(w1/10) to speed up the scrolling.
Here is the code
//getting the width of both the headings
var w1=$("#line1>h4").width();
var w2=$("#line2>h4").width();
//calculating the duration of the animation dynamically based on the width
var dur1=Math.ceil(w1/10);
var dur2=Math.ceil(w2/10);
//setting the duration dynamically
$("#line1>h4").css("animation-duration",dur1+"s");
$("#line2>h4").css("animation-duration",dur2+"s");
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>
In CSS you must provide the animation duration in time units, which is currently seconds / miliseconds.
You could, however, adapt the width of the transition by switching from a %-value to px-values like shown below:
div {
width: 50%;
padding-left: 10%;
float: left;
height: 50px;
overflow: hidden;
position: relative;
}
#line1 {
background-color: green;
}
#line2 {
background-color: yellow;
}
h4 {
position: absolute;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Apply animation to this element */
/* Animation delay 0.5s */
-moz-animation: line-scroll 15s linear 0.5s infinite;
-webkit-animation: line-scroll 15s linear 0.5s infinite;
animation: line-scroll 15s linear 0.5s infinite;
}
#line1 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 200%;
}
#line2 h4 {
/* width must be big enought to fit in whole text othrwise
whole text will not scroll into view */
width: 600%;
}
#keyframes line-scroll {
0% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-1000px);
/* Firefox bug fix */
-webkit-transform: translateX(-1000px);
/* Firefox bug fix */
transform: translateX(-1000px);
}
}
<div id="line1">
<h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>
<div id="line2">
<h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>