Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div class="cS">
    <div class="Mloader">
    <svg viewBox="0 0 32 32" width="32" height="32">
      <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
    </svg>
  </div>
 </div>
​
</body>
</html>
 
.cS > .Mloader{
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
​
.cS{
  position : relative;
  background : lightgrey;
  width : 500px;
  height : 200px;
}
​
​
.Mloader #spinner {
    box-sizing: border-box;
    stroke: black;
    stroke-width: 3px;
    transform-origin: 50%;
    animation: line 1s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1s linear infinite;
}
​
* {
    box-sizing: border-box;
}
​
@keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
            transform: rotate(0); }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0; }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers