Loader/Spinner CSS with Span element - css

Question

I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?

Answer 1

Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>

Answer 2

This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>

Answer 3

The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>