kachibito.net
oks
ホーム
Resources
JavaScript
SVGを使ったプログレスバーを実装出来るスクリプト・﹁jQuery-svg-progress﹂
Ads
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/uploads/2019/12/site-icon.png)
jQuery-svg-progress
![svgprogress01](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![svgprogress01](http://kachibito.net/wp-content/uploads/2017/04/svgprogress01.jpg)
jQuery-svg-progressはSVGを使ったプログレスバーを実装出来るスクリプトです。jQueryに依存します。SVGなのである程度自由にカスタマイズできる点が魅力ですね。モニター幅の狭いスマフォでも遷移状況を伝えられそうです。オプションで形状、グラデーションカラー、バーの幅などを設定出来ます。ライセンスはMIT。
jQuery-svg-progress
JavaScript
githubJavaScriptjQueryWebディレクター向けWebデザイナー向けオープンソース
Ads
この記事を共有
Facebookはてブコピー
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.local/blog/wp-content/themes/kachibito6/images/no-amp-logo.png)
かちびと.net
関連記事
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
使用頻度の高そうなUIをその場で作ってコードを発行、コピーして使える・﹁CSSLab﹂
CSSLab CSSLabは使用頻度の高そうなUIをその場で作ってコードを発...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
写真をヒントに世界地図から場所と年代を特定する、地理と歴史の両方の知識をテストするブラウザゲーム・﹁TimeGuessr﹂
TimeGuessr TimeGuessrは写真をヒントに世界地図から場所と...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
沢山のエフェクトに遅延設定も可能なCSSアニメーションライブラリ・﹁Vivify﹂
Vivify Vivifyは多彩なエフェクトが用意されたCSSアニメーション...
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://kachibito.net/wp-content/themes/kachibito6/images/no-image-160-resource.png)
Resource
WebGLを使って画像にエフェクトを与える為のJavaScriptライブラリ・﹁glfx.js﹂
glfx.js glfx.jsはWebGLを使用して画像を編集出来るようにす...
Web制作に関するネタやTipsの備忘録
●WordPress
●CSS
●JavaScript
●Resource
●Books
●Next.js製のアプリのパフォーマンスを視覚化できるオープンソースのパフォーマンスメトリクスダッシュボード・﹁NextLevel﹂ Resource
●無駄を省いた軽量でミニマルなオープンソースのオンラインブックマーク・﹁webtag﹂ Resource
●セルフホスティング可能なアプリケーションのみをコレクションしているディレクトリサイト・﹁Self-Hosted Software List﹂ Resource
●ブラウザベースのワークフローをAIで自動化する為のOSS・﹁Skyvern﹂ Resource
●シームレスでカスタマイズ可能なオープンソースの認証及びユーザー管理システム・﹁Liquid﹂ Resource
勉強した本
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=20090622&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1702%2F9784798061702.jpg%3F_ex%3D300x300&s=300x300&t=pict)
[PR]
●WPD-gallery
●Web制作案件に関して
●About/Privacy Policy
●Contact
●Twitter
●Facebook
![]()
![](/wp-content/themes/kachibito6/images/iam.jpg)
Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.
kachibito.net
Copyright © 2009-2024 かちびと.net All Rights Reserved.
ホーム
トップ
Web制作に関するネタやTipsの備忘録
●WordPress
●CSS
●JavaScript
●Resource
●Books
●Next.js製のアプリのパフォーマンスを視覚化できるオープンソースのパフォーマンスメトリクスダッシュボード・﹁NextLevel﹂ Resource
●無駄を省いた軽量でミニマルなオープンソースのオンラインブックマーク・﹁webtag﹂ Resource
●セルフホスティング可能なアプリケーションのみをコレクションしているディレクトリサイト・﹁Self-Hosted Software List﹂ Resource
●ブラウザベースのワークフローをAIで自動化する為のOSS・﹁Skyvern﹂ Resource
●シームレスでカスタマイズ可能なオープンソースの認証及びユーザー管理システム・﹁Liquid﹂ Resource
勉強した本
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=19749055&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4263%2F9784274224263.jpg%3F_ex%3D300x300&s=300x300&t=pict)
![](https://hbb.afl.rakuten.co.jp/hgb/0b21616a.e779433f.0b21616b.94adb03b/?me_id=1213310&item_id=20090622&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1702%2F9784798061702.jpg%3F_ex%3D300x300&s=300x300&t=pict)
[PR]
タイトルとURLをコピーしました