How to make a circle preloader instead of triangle?


1. Search for the 'Layer_1' id inside your HTML file.

2. Replace the code inside it with these lines of code:

<circle cx="300" cy="300" r="150" class="polygon" fill="#FFFFFF" class="inner" stroke="#A7A9AC" stroke-width="8"  />

<circle cx="300" cy="300" r="110" fill="#8856A3" class="inner"  />

3. You should have something similar to this screenshot.

4. At the end of your CSS code, add these lines of css:

.polygon {
    stroke-dasharray: 942;
    stroke-dashoffset: 942;
    -webkit-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate;
    -moz-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate;
    -ms-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate;
    -o-animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate;
    animation: draw-circle 3s infinite linear, stroke-color 9s linear infinite alternate;
}

@-webkit-keyframes draw-circle {
	0 {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -942;}
}
@-moz-keyframes draw-circle {
	0 {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -942;}
}
@-ms-keyframes draw-circle {
	0 {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -942;}
}
@-o-keyframes draw-circle {
	0 {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -942;}
}
@keyframes draw-circle {
	0 {stroke-dashoffset: 0;}
	100% {stroke-dashoffset: -942;}
}

 


Last update:
2015-10-17 09:06
Author:
Vlad Sargu
Revision:
1.0
Average rating:0 (0 Votes)