Merge pull request #95 from tubacatal/dev

edit event loop component with two arrows instead of one

Author: r4pt0s

src/components/EventLoop/EventLoop.js

@@ -7,12 +7,13 @@ import { addFunctionToCallstack } from '../../redux/callstack/callstack.actions'
 import { toggleSpin } from '../../redux/eventLoop/eventLoop.actions'
 
 class EventLoop extends Component {
-
 	render() {
 		return (
 			<div className={'spinner-container' + (this.props.spinArrow ? ' spin' : '')}>
-				<div className="circle" />
-				<div className="triangle" />
+				<div className="half-circle-right" />
+				<div className="triangle-right" />
+				<div className="half-circle-left" />
+				<div className="triangle-left" />
 			</div>
 		)
 	}

src/components/EventLoop/EventLoop.styles.css

@@ -4,23 +4,33 @@
 	height: 125px;
 }
 
-.circle {
+.half-circle-right {
 	position: absolute;
 	box-sizing: border-box;
 	height: 125px;
 	width: 125px;
 	border: 7px solid #00a1de;
 	border-radius: 50%;
-	clip-path: inset(0 0 0 50%);
+	clip-path: inset(0 0 0 60%);
 }
 
-.triangle {
+.half-circle-left {
+	position: absolute;
+	box-sizing: border-box;
+	height: 125px;
+	width: 125px;
+	border: 7px solid #00a1de;
+	border-radius: 50%;
+	clip-path: inset(0 60% 0 0);
+}
+
+.triangle-right {
 	position: absolute;
 	width: 30px;
 	height: 20px;
 	background: #00a1de;
 	margin-top: -7px;
-	margin-left: 38px;
+	margin-left: 50px;
 	clip-path: polygon(50% 0, 0% 100%, 100% 100%);
 	-moz-transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
@@ -29,6 +39,21 @@
 	transform: rotate(-90deg);
 }
 
+.triangle-left {
+	position: absolute;
+	width: 30px;
+	height: 20px;
+	background: #00a1de;
+	margin-top: 111px;
+	margin-left: 45px;
+	clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+	-moz-transform: rotate(90deg);
+	-webkit-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
 .spin {
 	-webkit-transform: rotate(-720deg);
 	-ms-transform: rotate(-720deg);