Recently, I've been working on creating a simple spinner class that can easily be added to any element, whether it's a small button or an entire page.
Despite exploring viewport values, I have yet to discover a method for achieving a relative border-width.
- If a relative border-width isn't feasible, one solution could involve dividing the loading process into three classes: small, medium, and large. However, this approach introduces additional complexity.
- Is there a way to utilize media queries based on the parent element width rather than the device width? This adjustment might provide a potential solution.
- Alternatively, is there a CSS-only spinner type that doesn't rely on border-width and can be implemented as an ::after element?
The essential criteria for testing the spinner are:
- Appealing appearance when applied to the entire page
- Attractive display when added to a small button
- Compatibility with mobile devices
- Ease of application by simply adding a class without altering the existing content
- No reliance on JavaScript
I'm open to suggestions for a more visually appealing loader, given my limited expertise in CSS. Any guidance would be greatly appreciated.
Fiddle : http://jsfiddle.net/ppgab/adfnc5tk/6/
Here's the code I have developed so far :
/*Spinner with overlay and no mouse events*/
@keyframes spinner {
to {transform: rotate(360deg);}
}
.loading::before {
position:absolute;
content : '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
z-index: 2;
opacity: 0.65;
}
.loading:after {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 25%;
/*! height: 5rem; */
margin-top: -12.5%;
margin-left: -12.5%;
border-radius: 50%;
border: solid transparent;
border-top-color: #07d;
border-bottom-color: #07d;
animation: spinner .8s ease infinite;
z-index:3;
padding-top: calc(12.5% - 1em);
border-width: 1em;
padding-bottom: calc(12.5% - 1em);
}
.loading {
pointer-events: none;
cursor: wait;
}
.text-center {
text-align:center;
}