39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - 🚦Toggle animation with CSS & State Machines! Live collaborative coding with the @keyframers 2.32.0</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<a href="https://youtu.be/0Wx9QbRQYuI" target="_blank" data-keyframers-credit style="color: #000"></a>
|
|
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
|
|
|
|
<form id="app" data-state="off">
|
|
<div class="toggle-wrapper">
|
|
<input id="toggle" name="toggle" type="checkbox">
|
|
<label for="toggle" class="fancy-toggle">
|
|
<div class="bg"></div>
|
|
<div class="circle">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="loader" cx="50" cy="50" r="45" pathLength="1" />
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<output class="status">
|
|
<div class="status-text" data-for="off">Devices Off</div>
|
|
<div class="status-text" data-for="pending">Please Wait...</div>
|
|
<div class="status-text" data-for="on">Devices On</div>
|
|
</output>
|
|
</div>
|
|
|
|
</form>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|