HTMLプログレスバー

テン
今日私はHTMLを学んだnative progress bar .

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

閉じるこの動画はお気に入りから削除されています.

いくつかの並べ替えのための視覚的なディスプレイをしたり、サイト上の経験をカウントダウン?それを進行要素に配線しなさい.

したいネイティブローダ?HTMLのプログレスバーをカバーしています!

どのように多くの残りの文字を入力またはテキストフィールドで利用可能なユーザーを表示するには?あなたはそれを推測!

私は多くのユースケースがあると確信しているので、あなたが他のことを考えることができるならば、コメントで彼らを倒してください.

デモ
私は、最も簡単であると思ったことを示しました:入力フィールドに残っている文字の量を表すためにプログレスバーを使用すること.チェックアウト:
テキストフィールドで離れてタイピングを開始し、進行状況バーの増加を見るか、または削除する方法を多くの文字に応じて減少します.かなりクールなハウ?

暗号

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [chars, setChars] = useState(0);
  const [text, setText] = useState("");

  const handleCharsAndText = (e) => {
    setChars(e.target.value.length);
    setText(e.target.value);
  };

  const clearText = () => {
    setChars(0);
    setText("");
  };

  return (
    <div className="App">
      <h1>HTML Progress Element</h1>
      <label htmlFor="textarea-progress">Characters typed</label>
      <progress id="textarea-progress" max="100" value={chars} />
      <span className="char-span">{chars}/100</span>
      <form className="form-wrapper" action="/action_page.php">
        <label className="textarea-label" htmlFor="textarea">
          Start typing below...
        </label>
        <textarea
          type="text"
          id="textarea"
          name="textarea"
          rows="6"
          maxLength="100"
          value={text}
          onChange={handleCharsAndText}
        />
      </form>
      <button onClick={clearText}>Reset</button>
    </div>
  );
}

破壊する
本編から始めましょう

<label htmlFor="textarea-progress">Characters typed</label>
<progress id="textarea-progress" max="100" value={chars} />

進行要素にはmax 属性は、バーが“100 %”に達する数です.

max
This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

進捗要素にはvalue 属性は、現時点でバーが視覚的に表示される場所です.

value
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

マイプログレスバーmax="100" , しかし、それはどんな数でありえました.それは100000か3です.しかし、この場合、私はメーターが100文字に達すると完全であることを望みます.バーの各パーセントの1文字.value={chars} ユーザーが現在入力している文字数は、状態によって処理されます.

const [chars, setChars] = useState(0);

...
const handleCharsAndText = (e) => {
  setChars(e.target.value.length);
  setText(e.target.value);
};

そして、進行中のバーが100 %いっぱいであるとき、ユーザーがこれ以上の文字を入力できないことを確認してください<textarea> エレメントmaxLength="100" ユーザーが100文字以上を入力できないプロパティ.

ラッピング
そして、それはかなりそれです!あなたは、進行中の要素と同じように創造的に得ることができます.
実際、私はしました.
あなたは私の見たいですかMini Tweets 私が作ったCodesDandBox?私は進歩要素のスタイルが可能だったかどうかを探求したかった、と私は離れて、ツイートフォームの動作を模倣し、どのようにあなたは最大140文字に近いになって警告を持ち歩いた.

ボーナスコード
以下は完全な反応コンポーネントです.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);
  const [chars, setChars] = useState(0);
  const [tweet, setTweet] = useState("");
  const [tweets, setTweets] = useState([]);

  const openModal = () => {
    setOpen(true);
  };

  const closeModal = () => {
    setOpen(false);
  };

  const charCount = (e) => {
    setChars(e.target.value.length);
    setTweet(e.target.value);
  };

  const handleSubmit = (e) => {
    const now = new Date().toUTCString();
    if (tweet === "") {
      e.preventDefault();
    } else {
      e.preventDefault();
      setTweets([{ text: tweet, date: now }, ...tweets]);
      setTweet("");
      setChars(0);
      setOpen(false);
    }
  };

  return (
    <div className="App">
      <h1>Mini Tweets</h1>

      <button className="tweet-btn" onClick={openModal}>
        Add Mini Tweet
      </button>

      {open && (
        <>
          <div className="overlay" />
          <div className="add-tweet-card">
            <button className="close-btn" onClick={closeModal}>
              <span aria-label="close tweet form">X</span>
            </button>
            <form className="form-wrapper" action="/action_page.php">
              <label className="textarea-label" htmlFor="tweet">
                Whats on your mind?
              </label>
              <textarea
                type="text"
                id="tweet"
                name="tweet"
                rows="4"
                maxLength="80"
                value={tweet}
                className={chars > 70 ? "red-text" : null}
                onChange={charCount}
              />
              <progress
                aria-label={`${80 - chars} remaining characters`}
                id="tweet-progress"
                max="80"
                value={chars}
              />
              <span className="char-span" aria-label={`${chars}/80`}>
                {chars}/80
              </span>
              <input
                type="submit"
                value="Tweet!"
                onClick={handleSubmit}
                className="tweet-btn"
              />
            </form>
          </div>
        </>
      )}

      {tweets.length > 0 && <h2>Your Tweets</h2>}
      {tweets.map((t, index) => (
        <div key={index} className="tweets-card">
          <p>{t.text}</p>
          <p className="tweet-time">{t.date}</p>
        </div>
      ))}
    </div>
  );
}

そして、完全なCSSファイル

body {
  background-color: rgb(19, 19, 19);
}

textarea {
  width: 10rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  background-color: rgb(3, 3, 26);
  color: white;
}

progress {
  margin-top: 1rem;
  border-radius: 2px;
  width: 10rem;
  height: 1rem;
}
progress::-webkit-progress-bar {
  background-color: #1da1f2;
  border-radius: 2px;
}
progress::-webkit-progress-value {
  background-color: rgb(25, 25, 59);
  border-radius: 2px;
  box-shadow: 1px 1px 3px 3px #2ba6f1cc;
}

.textarea-label {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.App {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: rgb(221, 221, 221);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-tweet-card {
  position: fixed;
  z-index: 1;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #032f4b;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 15px 5px #2997db88;
}

.overlay {
  position: fixed;
  margin: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(9, 15, 29, 0.9);
}

.progress-label {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.form-wrapper {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tweet-btn {
  margin-top: 1rem;
  color: black;
  background-color: #1da1f2;
  font-size: 1.25rem;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

input[type="submit"] {
  -webkit-appearance: none;
}

.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(255, 255, 255, 0.33);
  color: black;
  border: none;
  padding: 0.1rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.tweet-btn:hover {
  color: #1da1f2;
  background-color: white;
}

.red-text {
  color: red;
  font-weight: bold;
}

.tweets-card {
  margin-bottom: 1rem;
  background-color: #1da1f2;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 0.5rem;
  width: 80%;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 1.1rem;
  text-align: start;
}

.char-span {
  margin-top: 0.5rem;
}

.tweet-time {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  margin-top: -0.5rem;
}

@media screen and (min-width: 300px) {
  textarea {
    width: 18rem;
  }

  progress {
    width: 15rem;
  }
}

@media screen and (min-width: 600px) {
  textarea {
    width: 18rem;
  }

  .add-tweet-card {
    width: 50%;
  }

  .tweets-card {
    width: 50%;
  }
}

@media screen and (min-width: 1000px) {
  .add-tweet-card {
    width: 25%;
  }

  .tweets-card {
    width: 25%;
  }
}

スタイリング<progress> 要素はいくつかのgooglingを取ったthis stackoverflow 私が十分に満足するまで、私がガイドとして使った答えは、ここで、そして、そこでものを調整します.

結論
私はあなたがHTMLの進捗バーについて何かを学んだことを願っています私は知っています.単純なバージョンは、全く怖いことではない、と私はあなた自身のためにそれを試してみて、あなたが作ることができるクールで創造的なものを参照してくださいに権限を与えることを願っています.
あなたが質問や洞察力を持っている場合、読んでいただきありがとうございます、ちょうど下記のコメントで私を殴った.また会いましょう!