How to make the ends rounded in my spinner?
I have this spinner
I need something like this
Required
&__spinner {
font-size: 14px;
display: inline-block;
font-weight: normal;
color: rgba($brand-primary-darker, .5);
white-space: nowrap;
padding: 0 20px 23px 0;
&::after {
display: inline-block;
vertical-align: middle;
content: '';
border: 5px solid mix($brand-primary, #fff, 30%);
border-top-color: $brand-primary;
border-radius: 50%;
width: 46px;
height: 46px;
margin: 0 -20px 0 0;
animation: spinning 1.5s linear infinite;
}
}
Related
I'm working on the animation and cannot figure out how I can stop the animation from repeating an infinite amount of times, but also still show after it has completed the animation once. An extra thing as well if you could tell me is that i have 4 different sentences to animate and it would be great if I could make the animations animate one by one then finish and still show.
p.s This is all in css and a lot of changes have been done with copy and paste of used code so i know the animation stuff is repeated
type he
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand';
background-image: url('images/websitesbackground.jpg');
}
.header {
margin-top: -15px;
}
.logo {
font-family: 'Quicksand';
font-weight:lighter;
margin-top: -10px;
border: black 3px none;
padding: 3px 3px;
height: 100px;
width: 350px;
position: absolute;
margin-left: -20px;
margin-top: -180px;
}
.wrapper1 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 200px;
margin-left: 10%;
}
.wrapper1 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper1 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15) infinite;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper2 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper2 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper2 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15) infinite;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper3 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper3 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper3 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
box-shadow: 2px -2px 2px;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15);
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper4 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper4 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper4 .dynamic-txts {
margin-left: 10px;
line-height: -50px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
.img {
border-radius: 1000px;
margin-left: 59%;
margin-top: -44.3%;
height: 600px;
}
.dynamic-txts {
visibility: visible;
}
re
I have tried all the things i could think of (but its still probably going to be obvious) and i just cant think of anything else, hope someone could help.
Without a border radius, when hovered, the line extends and connects like the middle button so:
With a border radius:
If I try to add a border radius and match it the smaller borders:
Does anyone know how you would make the small borders follow the same curve?
.barChart__button {
position: relative;
width: 300px;
height: 60px;
color: white;
border: none;
background-color: #272A2F;
border-radius: 20px;
font-family: 'Roboto';
font-size: 28px;
font-weight: 700;
margin-bottom: 34px;
transition: 0.5s;
overflow: hidden;
}
.barChart__button::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-top: 2px solid #c3a5ff;
border-left: 2px solid #c3a5ff;
transition: 0.5s;
border-radius: 5px;
}
.barChart__button:hover:before,
.barChart__button:hover:after {
width: 100%;
height: 100%;
}
.barChart__button::after {
content: '';
position: absolute;
bottom: 5px;
right: 5px;
width: 10px;
height: 10px;
border-bottom: 2px solid #c3a5ff;
border-right: 2px solid #c3a5ff;
transition: 0.5s;
border-radius: 5px;
}
<div className='barChart__buttonContainer'>
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
<button class='barChart__button'>Other example</button>
</div>
```
Here is an idea using mask:
.barChart__button {
color: white;
border: none;
background-color: #272A2F;
font-size: 20px;
font-weight: bold;
padding: 10px 20px;
border-radius: 10px; /* your radius */
position: relative;
z-index: 0;
}
.barChart__button:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
padding: 2px; /* border thickness here */
--g: linear-gradient(#c3a5ff 0 0) no-repeat; /* the color here */
background: var(--g) 0 0, var(--g) 100% 100%;
background-size: 10px 10px; /* initial size here */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: .5s;
}
.barChart__button:hover:before {
background-size: 100% 100%;
}
body {
background-color: black;
}
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
Also like below if your background will always be a solid coloration:
.barChart__button {
border: 2px solid #0000; /* border thickness here */
/* the border color below */
--g: linear-gradient(#c3a5ff 0 0) no-repeat border-box;
background:
linear-gradient(#272A2F 0 0) padding-box,
var(--g) 0 0 /var(--s,10px 10px),
var(--g) 100% 100%/var(--s,10px 10px),
#272A2F;
border-radius: 10px; /* your radius */
transition:.5s;
color: white;
font-size: 20px;
font-weight: bold;
padding: 10px 20px;
}
.barChart__button:hover {
--s: 100% 100%;
}
body {
background-color: black;
}
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
I have an animation that wipes from left to right on hover here. I want to have an exit animation that also goes from left to right (not right to left as shown in the demo). How can I achieve this?
.btn {
color: #31302B;
background: #FFF;
margin: 25px;
padding: 10px 0;
width: 240px;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #6a0dad;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.btn:hover {
box-shadow: inset 240px 0 0 0 #6a0dad;
color: #fff;
}
<div class="btn">CONTAINER</div>
You could use #keyframes:
.btn {
color: #31302B;
background: #FFF;
margin: 25px;
padding: 10px 0;
width: 240px;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation: out 0.8s ease;
}
#keyframes in {
from {
box-shadow: inset 0 0 0 0 #6a0dad;
color: black;
}
to {
box-shadow: inset 240px 0 0 0 #6a0dad;
color: white;
}
}
#keyframes out {
from {
box-shadow: inset -240px 0 0 0 #6a0dad;
color: white;
}
to {
box-shadow: inset 0 0 0 0 #6a0dad;
color: black;
}
}
.btn:hover {
animation: in 0.8s ease;
box-shadow: inset 240px 0 0 0 #6a0dad;
color: white;
}
<div class="btn">CONTAINER</div>
I would suggest using pseudo-element ::after and transform-origin for this.
.btn::after {
z-index: -1;
content: '';
position: absolute;
left: 0;
top: 0;
background: #6a0dad;
height: 100%;
width: 100%;
transform: scaleX(0);
transition: all ease 0.8s;
transform-origin: left;
}
.btn:hover {
color: white;
}
.btn:hover::after {
transform: scaleX(1);
transform-origin: right;
}
Add position: relative; z-index: 1; to .btn class
A simple background transition can easily do this without keyframes:
.btn {
color: #31302B;
background: #FFF;
margin: 25px;
padding: 10px 0;
width: 240px;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
background:linear-gradient(#6a0dad,#6a0dad) left/0% 100% no-repeat;
transition: all ease 0.5s,background-position 0s 0.5s;
}
.btn:hover {
background-size:100% 100%;
background-position:right;
color: #fff;
}
<div class="btn">CONTAINER</div>
Related: How to animate underline from left to right?
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}