Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .line {
- stroke-dasharray: 650;
- stroke-dashoffset: 650;
- animation: offset 3s linear forwards;
- }
- .circle {
- stroke-dasharray: 230;
- stroke-dashoffset: 230;
- animation: offset 3s linear forwards;
- }
- /*========================
- * KEYFRAMES
- */
- @keyframes offset {
- 100% {
- stroke-dashoffset: 0;
- }
- }
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px"
- height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
- <g id="Layer_1">
- <line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37"/>
- <circle class="circle" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36"/>
- <circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18"/>
- </g>
- </svg>
- transform="rotate(<angle>)"
- <style>
- .line {
- stroke-dasharray: 650;
- stroke-dashoffset: 650;
- animation: offset 3s linear forwards;
- }
- .circle {
- stroke-dasharray: 230;
- stroke-dashoffset: 230;
- animation: offset 3s linear forwards;
- }
- /*========================
- * KEYFRAMES
- */
- @keyframes offset {
- 100% {
- stroke-dashoffset: 0;
- }
- }
- .line {
- stroke-dasharray: 650;
- stroke-dashoffset: 650;
- animation: offset 3s linear forwards;
- }
- .circle {
- stroke-dasharray: 230;
- stroke-dashoffset: 230;
- animation: offset 3s linear forwards;
- }
- /*========================
- * KEYFRAMES
- */
- @keyframes offset {
- 100% {
- stroke-dashoffset: 0;
- }
- }
- </style>
- <body>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px"
- height="774px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
- <g id="Layer_1">
- <line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37"/>
- <circle class="circle" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36" transform="rotate(180 540 37)"/>
- <circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18"
- />
- </g>
- </svg>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement