Initialized Meter Spinner

khagwal · khagwal · commit a4efc41abc24 · 2016-12-12T15:59:10.000+05:30
diff --git a/css/csspin-meter.css b/css/csspin-meter.css
diff --git a/csspin.css b/csspin.css
diff --git a/index.html b/index.html
@@ -208,6 +208,22 @@ <h1>CSS<span>PIN</span></h1>
 			</div>
 			<!--//Spinner Block-->
 
+			<!--Spinner Block-->
+			<div class="cp-spinner-block">	
+				<!--Spinner Meter Element-->
+					<div class="cp-spinner cp-meter"></div>
+				<!--//Spinner Meter Element-->
+
+				<!--Caption-->
+					<span>Spinner Meter</span>
+				<!--//Caption-->
+
+				<!--Syntax-->
+					<pre>&lt;div class="cp-spinner cp-meter"&gt;&lt;/div&gt</pre>
+				<!--//Syntax-->
+			</div>
+			<!--//Spinner Block-->
+
 		</div>
 		<!--Spinners-->
 
diff --git a/less/_meter.less b/less/_meter.less
@@ -0,0 +1,28 @@
+/*Meter Spinner*/
+.cp-meter{
+	border-radius: 50%;
+	.border(@boxSize/8, @firstColor, @firstColor ,@firstColor ,@firstColor);
+	.bounding-box(@boxSize, @boxSize);
+}
+
+.cp-meter:before{
+	border-radius: @boxSize/16;
+	content: " ";
+	.bounding-box(@boxSize/8, @boxSize/4);
+	background-color: @firstColor;
+	position: absolute;
+	top: ceil(@boxSize/10);
+	left: @boxSize/3;
+	transform-origin: center bottom;
+	animation: cp-meter-animate-before @speed3x linear infinite;
+}
+
+/*Meter Spinner Animation*/
+@keyframes cp-meter-animate-before{
+  0% {
+    transform: rotate(-45deg);
+  }
+	100%{
+    transform: rotate(315deg);
+  }
+}
diff --git a/less/csspin-meter.less b/less/csspin-meter.less
@@ -0,0 +1,3 @@
+/*Only Spinner Meter*/
+@import url("_globals.less");
+@import url("_meter.less");
diff --git a/less/csspin.less b/less/csspin.less
@@ -9,4 +9,5 @@
 @import url("_eclipse.less");
 @import url("_boxes.less");
 @import url("_morph.less");
-@import url("_heart.less");
+@import url("_heart.less");
+@import url("_meter.less");

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/Only Spinner Meter/`
	`2`	`+@import url("_globals.less");`
	`3`	`+@import url("_meter.less");`