I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; but seems only for SVG, How to apply it to the html element border?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="loader"></div>
</body>
</html>
You can do it with some background applied to a pseudo element:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position:relative;
}
.loader::before {
content:"";
position:absolute;
width:100%;
top:0;
height:20px;
--rad:radial-gradient(circle 8px,#3498db 99%,transparent 100%);
background:
var(--rad) left -14px top 0,
var(--rad) right -14px top 0;
background-size:200% 100%;
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
Related question to get a different idea: CSS curved line with rounded
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
I am not able to align the loader at the center of the screen.
I have tried putting align:center in the loader class but that did not work.
Use flex box it would be simple and no extra css.
display: flex;
align-items: center;
You can study about flex box for further details, here and here
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
Welcome to Stack Overflow, Himanshu.
You can use the margin property to center the loader on the screen. The margin property sets the margins for an element (i.e. how far to the top, right, bottom and/or left an item is in relation to another on the DOM). If you supply auto to margin-left and margin-right, the loader will be positioned on the center of the screen.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
}
A shortened version would be margin: 0 auto 0 auto;.
I want to add an loader in my angular 4 PWA. https://www.w3schools.com/howto/howto_css_loader.asp this loader is visible till all the contents of page get loaded.
<div *ngIf="isLoaded" class="loader"></div>
<div class="home-container" [hidden]="isLoaded"></div>
Initially isLoaded is true after loading all contents it will become false.
loader poistion => top => 0, right = 50%, left = 50%, bottom= 100%
.scss file
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #59d4bf; /* green */
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
here -stackblitz live code sample
Your should put your css,
margin-right: 50%; or margin-right: auto;
margin-top: 50%;
margin-left: 50%; or margin-right: auto;
your loader
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: 50%;
margin-right: 50%;
margin-top: 50%;
}
is it working , Live working code sample
Does anyone know how to put and display Two or more Css loader With different proprieties in one HTML Page
First spinner Need To be spin 90 Degree Work perfectly
second spinner Need To be spin 360 Degree but the output of it is Duplicated of First spinner
I try This From W3SC Loader
then modified it and named it Double Loader.html
I want to make first loader spin in 90 degree
and the other loader spin in 360 degree
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>A 90 Loader</h2>
<div class="Halfloader"></div>
<h2>A 360 Loader | (Beta)</h2>
<div class="Fullloader"></div>
</body>
</html>
CSS Code:
.Halfloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
}
.Fullloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
.Halfloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
}
.Fullloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>A 90 Loader</h2>
<div class="Halfloader"></div>
<h2>A 360 Loader | (Beta)</h2>
<div class="Fullloader"></div>
</body>
</html>
output :
A 90 Loader
spin with 90-degree as wanted
A 360 Loader
spin with 90-degree but what I want is 360 degree
What is the best way to do this?
create one more keyframes for full rotation range 0 to 100%
.Halfloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
#-webkit-keyframes full {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes full {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
}
.Fullloader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
-webkit-animation: full 2s linear infinite;
/* Safari */
animation: full 2s linear infinite;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>A 90 Loader</h2>
<div class="Halfloader"></div>
<h2>A 360 Loader | (Beta)</h2>
<div class="Fullloader"></div>
</body>
</html>
JS Fiddle: fiddle and here is the code:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-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>
How do I centre it horizontally & vertically?
I tried:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
But transform:translate(-50%,-50%); do not work
Give below css to .loader class:
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
}
#-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>
You can make it position:absolute;
and give it:
top:0;
left:0;
right:0;
bottom:0;
to make it both vertically and horizontally aligned into the middle.
body {
overflow:hidden;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
position:absolute;
}
#-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>
Easiest way to center element using CSS is by using flexbox. No hacks required.
if need to set parent container with display: flex.
<div class="container">
<div class="item">
Aligned Item
<div>
</div>
CSS:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 200px;
height: 200px;
}
All elements with class item will be centrally aligned.
More details can be found at
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Several ways to do it.
Using flexbox. This would work in any container anywhere on the page.
body { /* or some wrapper, if you plan to have other things in body */
min-height: 100vh; /* this just expands the body height so the vertical alignment is visible in the snippet */
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Using position: absolute. This centers the div relative to the document, not loader's parent element.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
/* i added this: */
position: absolute;
left: calc(50% - 120px / 2); /* 50 % of body width minus half of .loader size… */
top: calc(50% - 120px / 2); /* …and the same thing with height */
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Please add body {height: 100vh;} and update the css of loader div as the following:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
https://jsfiddle.net/7baw2rmp/
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }