terminal-lab/xterminal/docs/demo/index.md

Live Demo

---

<style> iframe { border: 0 none; } .demo .bp-main { padding: 0; } </style>

View fullpage demo

---

:::details Code

:::code-group

@import url('https://unpkg.com/xterminal/dist/xterminal.css');

.error {
    color: rgb(248, 88, 88);
}

.spinner:after {
    animation: changeContent 0.8s linear infinite;
    content: "⠋";
}

@keyframes changeContent {
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; }
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}

<link rel="stylesheet" href="styles.css">

<div id="app"></div>

<script src="https://unpkg.com/xterminal/dist/xterminal.umd.js"></script>

<script src="createShell.js"></script>
<script src="createTerminal.js"></script>

<script>
    window.onload = () => createTerminal('#app');
</script>

<<< @/public/demo.js#terminal{js:line-numbers} [createTerminal.js]

<<< @/public/demo.js#shell{js:line-numbers} [createShell.js]

:::