Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>x-react-clock</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Demo of x-react-clock</h1>
​
    <p>Read more @ <a href="https://github.com/kherrick/x-react-clock">https://github.com/kherrick/x-react-clock</a></p>
​
    <x-react-clock rendernumbers size="200"></x-react-clock>
    
    <style>
      .react-clock {
        display: block;
        position: relative;
      }
      
      .react-clock,
      .react-clock *,
      .react-clock *:before,
      .react-clock *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      
      .react-clock__face {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border: 1px solid black;
        border-radius: 50%;
      }
      
      .react-clock__hand {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 50%;
      }
      
      .react-clock__hand__body {
        position: absolute;
        background-color: black;
        transform: translateX(-50%);
      }
      
      .react-clock__mark {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 50%;
      }
      
      .react-clock__mark__body {
        position: absolute;
        background-color: black;
        transform: translateX(-50%);
      }
      
      .react-clock__mark__number {
        position: absolute;
        left: -40px;
        width: 80px;
        text-align: center;
      }
​
      .react-clock__second-hand__body {
        background-color: red;
      }
    </style>
​
    <script type="module">
      import * as XReactClock from "https://unpkg.com/x-react-clock@1.0.0/lib/es/x-react-clock.js";
​
      window.customElements.define("x-react-clock", XReactClock.default);
    </script>
  </body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers