加载进度条
CSS实现进度条
CSS实现进度条进度条经常运⽤于⽹页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条⽤于提醒使⽤者关于⽹页上具体的任务进程，譬如上传，下载，加载应⽤程序等。
以前如果想要创建⼀个进度条的动画效果，没有使⽤JavaScript是不可能实现的。
然⽽感谢CSS3的出现，我们现在能够在div⾥执⾏动画，添加梯度和彩⾊元素。
事实上，HTML5为实现此⽬的也创建了⼀个特殊的进度条元素。
当你看完这个教程，你将会知道怎样使⽤纯CSS创建⼀个有平⾯动画效果的进度条：⽆需Flash，⽆需图⽚，⽆需JavaScript。
让我们开始吧...标签我们应该写⼀个样式为.container的div⽤来包含我们的进度条，其次是⽤样式为.title的div来包裹我们的标题。
接下来，我们将添加样式为.bar的div来包含填充和未填充的进度条样式。
最后，我们将在.bar⾥添加样式为.bar-unfill和.bar-fill的span标签。
<div class="container"><div class="title plain">Plain</div><div class="bar"><span class="bar-unfill"><span class="bar-fill"></span></span></div></div>简单的进度条的CSS代码.container类⾥将width定义为30%使进度条能够⾃适应。
我们也将放⼀些简单的border-radius之类的属性在我们的.title类⾥以修改顶部和底部的左边的边框弧度，创建⼀个简单明了的平板式设计。
.container {width:30%;margin:0 auto}.title {background:#545965;color:#fff;padding:15px;float:left;position:relative;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px}现在让我们来写未填充的的样式，⾸先给他⼀个⽩⾊的背景。
WPF循环读取文件中实现进度条显示
WPF循环读取文件中实现进度条显示在WPF中实现循环读取文件并显示进度条可以通过以下步骤实现：1.创建WPF应用程序。
2. 在WPF窗口中添加一个ProgressBar控件用于显示进度条。
3.创建一个按钮或其他触发事件的控件，用于开始读取文件并显示进度条。
4.在事件处理程序中编写循环读取文件的代码。
下面是实现这个功能的详细步骤：1.创建WPF应用程序首先，打开Visual Studio并创建一个WPF应用程序。
在项目中创建一个新的WPF窗口。
2. 添加ProgressBar控件在XAML文件中，添加ProgressBar控件，代码如下：```xaml<ProgressBar x:Name="progressBar" Width="200" Height="20" Minimum="0" Maximum="100" Value="0"/>```这个ProgressBar控件有一个名称为"progressBar"，它的最小值被设置为0，最大值被设置为100，初始值被设置为0。
3.添加按钮并编写事件处理程序在窗口中添加一个按钮，点击该按钮将启动循环读取文件并显示进度条的操作。
在XAML文件中，添加按钮控件并创建点击事件的处理程序，代码如下：```xaml<Button x:Name="startButton" Content="开始读取文件"Click="startButton_Click"/>```在代码文件中，编写按钮点击事件处理程序的代码，代码如下：```csharpprivate async void startButton_Click(object sender, RoutedEventArgs e)//获取文件路径string filePath = "your_file_path";//获取文件总大小long fileSize = new FileInfo(filePath).Length;//定义每次读取文件的字节数int bufferSize = 4096;//定义已读取的文件总字节数long totalBytesRead = 0;//创建文件读取流using (FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read))//创建缓冲区byte[] buffer = new byte[bufferSize];//一次读取文件并更新进度条int bytesRead;while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)totalBytesRead += bytesRead;//计算进度百分比double progress = (double)totalBytesRead / fileSize * 100;//在主线程更新进度条Dispatcher.Invoke(( => progressBar.Value = progress);}}```4.代码解释上述代码中，当点击按钮时，会触发`startButton_Click`事件处理程序。
小功能1：多种方法实现网页加载进度条
⼩功能1：多种⽅法实现⽹页加载进度条⽅法⼀：使⽤定时器说明：定时器中放⼀个全屏的背景⾊，并添加⼀个gif图⽚，规定n秒后再隐藏此背景，给后台加载留⼀定时间。
缺点：当本地已有缓存时，还是会执⾏此定时器，体验不佳<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"><title>定时器进度条</title><script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("body").append('<div class="loading"><img src="img/Flower.gif" ></div>');setTimeout(function(){$(".loading").fadeOut();},3000)})</script><style type="text/css">.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #fff;}.loading img{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body><img src="/it/u=3794341811,198002972&fm=26&gp=0.jpg"><img src="/it/u=3081910561,4232742603&fm=26&gp=0.jpg"><img src="/it/u=3924851449,159537211&fm=26&gp=0.jpg"><img src="/it/u=4135296269,1136301264&fm=26&gp=0.jpg"><img src="/it/u=2623748191,2154445708&fm=26&gp=0.jpg"><img src="/it/u=4199878529,2086225900&fm=26&gp=0.jpg"><img src="/it/u=4015368002,1586221549&fm=26&gp=0.jpg"><img src="/it/u=2721573031,3342097622&fm=26&gp=0.jpg"><img src="/it/u=246009171,2070901793&fm=26&gp=0.jpg"><img src="/it/u=2721573031,3342097622&fm=26&gp=0.jpg"><img src="/it/u=56560423,3204706921&fm=26&gp=0.jpg"></html>⽅法⼆：document.onreadystatechange监控加载状态说明：document.onreadystatechange（页⾯加载状态改变的事件）； document.readyState： 状态值：uninitialized（还未开始载⼊），loading（载⼊中），interactive（已加载，⽂档与⽤户可以开始交互），complete（载⼊完成）。
Android实现简单的加载进度条
Android实现简单的加载进度条本⽂实例为⼤家分享了Android实现简单的加载进度条的具体代码，供⼤家参考，具体内容如下1.效果图2.⾃定义progressBarpackage com.example.myapplication7;import android.animation.ValueAnimator;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.os.Bundle;import android.os.Parcelable;import android.util.AttributeSet;import android.view.animation.AccelerateDecelerateInterpolator;import android.widget.ProgressBar;import ng.annotation.Retention;import ng.annotation.RetentionPolicy;import androidx.annotation.IntDef;public class CircleProgressView extends ProgressBar {private int mReachBarSize = Utils.dp2px(getContext(), 2); // 未完成进度条⼤⼩private int mNormalBarSize = Utils.dp2px(getContext(), 2); // 未完成进度条⼤⼩private int mReachBarColor = Color.parseColor("#108ee9"); // 已完成进度颜⾊private int mNormalBarColor = Color.parseColor("#FFD3D6DA"); // 未完成进度颜⾊private int mTextSize = Utils.sp2px(getContext(), 14); // 进度值字体⼤⼩private int mTextColor = Color.parseColor("#108ee9"); // 进度的值字体颜⾊private float mTextSkewX; // 进度值字体倾斜⾓度private String mTextSuffix = "%"; // 进度值前缀private String mTextPrefix = ""; // 进度值后缀private boolean mTextVisible = true; // 是否显⽰进度值private boolean mReachCapRound; // 画笔是否使⽤圆⾓边界，normalStyle下⽣效private int mRadius = Utils.dp2px(getContext(), 20); // 半径private int mStartArc; // 起始⾓度private int mInnerBackgroundColor; // 内部背景填充颜⾊private int mProgressStyle = ProgressStyle.NORMAL; // 进度风格private int mInnerPadding = Utils.dp2px(getContext(), 1); // 内部圆与外部圆间距private int mOuterColor; // 外部圆环颜⾊private boolean needDrawInnerBackground; // 是否需要绘制内部背景private RectF rectF; // 外部圆环绘制区域private RectF rectInner; // 内部圆环绘制区域private int mOuterSize = Utils.dp2px(getContext(), 1); // 外层圆环宽度private Paint mTextPaint; // 绘制进度值字体画笔private Paint mNormalPaint; // 绘制未完成进度画笔private Paint mReachPaint; // 绘制已完成进度画笔private Paint mInnerBackgroundPaint; // 内部背景画笔private Paint mOutPaint; // 外部圆环画笔private int mRealWidth;private int mRealHeight;@IntDef({ProgressStyle.NORMAL, ProgressStyle.FILL_IN, ProgressStyle.FILL_IN_ARC})@Retention(RetentionPolicy.SOURCE)public @interface ProgressStyle {int NORMAL = 0;int FILL_IN = 1;int FILL_IN_ARC = 2;}public CircleProgressView(Context context) {this(context, null);}public CircleProgressView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);obtainAttributes(attrs);initPaint();}private void initPaint() {mTextPaint = new Paint();mTextPaint.setColor(mTextColor);mTextPaint.setStyle(Paint.Style.FILL);mTextPaint.setTextSize(mTextSize);mTextPaint.setTextSkewX(mTextSkewX);mTextPaint.setAntiAlias(true);mNormalPaint = new Paint();mNormalPaint.setColor(mNormalBarColor);mNormalPaint.setStyle(mProgressStyle == ProgressStyle.FILL_IN_ARC ? Paint.Style.FILL : Paint.Style.STROKE); mNormalPaint.setAntiAlias(true);mNormalPaint.setStrokeWidth(mNormalBarSize);mReachPaint = new Paint();mReachPaint.setColor(mReachBarColor);mReachPaint.setStyle(mProgressStyle == ProgressStyle.FILL_IN_ARC ? Paint.Style.FILL : Paint.Style.STROKE); mReachPaint.setAntiAlias(true);mReachPaint.setStrokeCap(mReachCapRound ? Paint.Cap.ROUND : Paint.Cap.BUTT);mReachPaint.setStrokeWidth(mReachBarSize);if (needDrawInnerBackground) {mInnerBackgroundPaint = new Paint();mInnerBackgroundPaint.setStyle(Paint.Style.FILL);mInnerBackgroundPaint.setAntiAlias(true);mInnerBackgroundPaint.setColor(mInnerBackgroundColor);}if (mProgressStyle == ProgressStyle.FILL_IN_ARC) {mOutPaint = new Paint();mOutPaint.setStyle(Paint.Style.STROKE);mOutPaint.setColor(mOuterColor);mOutPaint.setStrokeWidth(mOuterSize);mOutPaint.setAntiAlias(true);}}private void obtainAttributes(AttributeSet attrs) {TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgressView);mProgressStyle = ta.getInt(R.styleable.CircleProgressView_cpv_progressStyle, ProgressStyle.NORMAL);// 获取三种风格通⽤的属性mNormalBarSize = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_progressNormalSize, mNormalBarSize); mNormalBarColor = ta.getColor(R.styleable.CircleProgressView_cpv_progressNormalColor, mNormalBarColor);mReachBarSize = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_progressReachSize, mReachBarSize); mReachBarColor = ta.getColor(R.styleable.CircleProgressView_cpv_progressReachColor, mReachBarColor);mTextSize = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_progressTextSize, mTextSize);mTextColor = ta.getColor(R.styleable.CircleProgressView_cpv_progressTextColor, mTextColor);mTextSkewX = ta.getDimension(R.styleable.CircleProgressView_cpv_progressTextSkewX, 0);if (ta.hasValue(R.styleable.CircleProgressView_cpv_progressTextSuffix)) {mTextSuffix = ta.getString(R.styleable.CircleProgressView_cpv_progressTextSuffix);}if (ta.hasValue(R.styleable.CircleProgressView_cpv_progressTextPrefix)) {mTextPrefix = ta.getString(R.styleable.CircleProgressView_cpv_progressTextPrefix);}mTextVisible = ta.getBoolean(R.styleable.CircleProgressView_cpv_progressTextVisible, mTextVisible);mRadius = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_radius, mRadius);rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);switch (mProgressStyle) {case ProgressStyle.FILL_IN:mReachBarSize = 0;mNormalBarSize = 0;mOuterSize = 0;break;case ProgressStyle.FILL_IN_ARC:mStartArc = ta.getInt(R.styleable.CircleProgressView_cpv_progressStartArc, 0) + 270;mInnerPadding = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_innerPadding, mInnerPadding);mOuterColor = ta.getColor(R.styleable.CircleProgressView_cpv_outerColor, mReachBarColor);mOuterSize = (int) ta.getDimension(R.styleable.CircleProgressView_cpv_outerSize, mOuterSize);mReachBarSize = 0;// 将画笔⼤⼩重置为0mNormalBarSize = 0;if (!ta.hasValue(R.styleable.CircleProgressView_cpv_progressNormalColor)) {mNormalBarColor = Color.TRANSPARENT;}int mInnerRadius = mRadius - mOuterSize / 2 - mInnerPadding;rectInner = new RectF(-mInnerRadius, -mInnerRadius, mInnerRadius, mInnerRadius);break;case ProgressStyle.NORMAL:mReachCapRound = ta.getBoolean(R.styleable.CircleProgressView_cpv_reachCapRound, true);mStartArc = ta.getInt(R.styleable.CircleProgressView_cpv_progressStartArc, 0) + 270;if (ta.hasValue(R.styleable.CircleProgressView_cpv_innerBackgroundColor)) {mInnerBackgroundColor = ta.getColor(R.styleable.CircleProgressView_cpv_innerBackgroundColor, Color.argb(0, 0, 0, 0)); needDrawInnerBackground = true;}break;}ta.recycle();}@Overrideprotected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int maxBarPaintWidth = Math.max(mReachBarSize, mNormalBarSize);int maxPaintWidth = Math.max(maxBarPaintWidth, mOuterSize);int height = 0;int width = 0;switch (mProgressStyle) {case ProgressStyle.FILL_IN:height = getPaddingTop() + getPaddingBottom() // 边距+ Math.abs(mRadius * 2); // 直径width = getPaddingLeft() + getPaddingRight() // 边距+ Math.abs(mRadius * 2); // 直径break;case ProgressStyle.FILL_IN_ARC:height = getPaddingTop() + getPaddingBottom() // 边距+ Math.abs(mRadius * 2) // 直径+ maxPaintWidth;// 边框width = getPaddingLeft() + getPaddingRight() // 边距+ Math.abs(mRadius * 2) // 直径+ maxPaintWidth;// 边框break;case ProgressStyle.NORMAL:height = getPaddingTop() + getPaddingBottom() // 边距+ Math.abs(mRadius * 2) // 直径+ maxBarPaintWidth;// 边框width = getPaddingLeft() + getPaddingRight() // 边距+ Math.abs(mRadius * 2) // 直径+ maxBarPaintWidth;// 边框break;}mRealWidth = resolveSize(width, widthMeasureSpec);mRealHeight = resolveSize(height, heightMeasureSpec);setMeasuredDimension(mRealWidth, mRealHeight);}@Overrideprotected synchronized void onDraw(Canvas canvas) {switch (mProgressStyle) {case ProgressStyle.NORMAL:drawNormalCircle(canvas);break;case ProgressStyle.FILL_IN:drawFillInCircle(canvas);break;case ProgressStyle.FILL_IN_ARC:drawFillInArcCircle(canvas);break;}}/*** 绘制PROGRESS_STYLE_FILL_IN_ARC圆形*/private void drawFillInArcCircle(Canvas canvas) {canvas.save();canvas.translate(mRealWidth / 2, mRealHeight / 2);// 绘制外层圆环canvas.drawArc(rectF, 0, 360, false, mOutPaint);// 绘制内层进度实⼼圆弧// 内层圆弧半径float reachArc = getProgress() * 1.0f / getMax() * 360;canvas.drawArc(rectInner, mStartArc, reachArc, true, mReachPaint);// 绘制未到达进度if (reachArc != 360) {canvas.drawArc(rectInner, reachArc + mStartArc, 360 - reachArc, true, mNormalPaint); }canvas.restore();}/*** 绘制PROGRESS_STYLE_FILL_IN圆形*/private void drawFillInCircle(Canvas canvas) {canvas.save();canvas.translate(mRealWidth / 2, mRealHeight / 2);float progressY = getProgress() * 1.0f / getMax() * (mRadius * 2);float angle = (float) (Math.acos((mRadius - progressY) / mRadius) * 180 / Math.PI);float startAngle = 90 + angle;float sweepAngle = 360 - angle * 2;// 绘制未到达区域rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);mNormalPaint.setStyle(Paint.Style.FILL);canvas.drawArc(rectF, startAngle, sweepAngle, false, mNormalPaint);// 翻转180度绘制已到达区域canvas.rotate(180);mReachPaint.setStyle(Paint.Style.FILL);canvas.drawArc(rectF, 270 - angle, angle * 2, false, mReachPaint);// ⽂字显⽰在最上层最后绘制canvas.rotate(180);// 绘制⽂字if (mTextVisible) {String text = mTextPrefix + getProgress() + mTextSuffix;float textWidth = mTextPaint.measureText(text);float textHeight = (mTextPaint.descent() + mTextPaint.ascent());canvas.drawText(text, -textWidth / 2, -textHeight / 2, mTextPaint);}}/*** 绘制PROGRESS_STYLE_NORMAL圆形*/private void drawNormalCircle(Canvas canvas) {canvas.save();canvas.translate(mRealWidth / 2, mRealHeight / 2);// 绘制内部圆形背景⾊if (needDrawInnerBackground) {canvas.drawCircle(0, 0, mRadius - Math.min(mReachBarSize, mNormalBarSize) / 2, mInnerBackgroundPaint);}// 绘制⽂字if (mTextVisible) {String text = mTextPrefix + getProgress() + mTextSuffix;float textWidth = mTextPaint.measureText(text);float textHeight = (mTextPaint.descent() + mTextPaint.ascent());canvas.drawText(text, -textWidth / 2, -textHeight / 2, mTextPaint);}// 计算进度值float reachArc = getProgress() * 1.0f / getMax() * 360;// 绘制未到达进度if (reachArc != 360) {canvas.drawArc(rectF, reachArc + mStartArc, 360 - reachArc, false, mNormalPaint); }// 绘制已到达进度canvas.drawArc(rectF, mStartArc, reachArc, false, mReachPaint);canvas.restore();}/*** 动画进度(0-当前进度)** @param duration 动画时长*/public void runProgressAnim(long duration) {setProgressInTime(0, duration);}/*** @param progress 进度值* @param duration 动画播放时间*/public void setProgressInTime(final int progress, final long duration) {setProgressInTime(progress, getProgress(), duration);}/*** @param startProgress 起始进度* @param progress 进度值* @param duration 动画播放时间*/public void setProgressInTime(int startProgress, final int progress, final long duration) {ValueAnimator valueAnimator = ValueAnimator.ofInt(startProgress, progress);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animator) {//获得当前动画的进度值，整型，1-100之间int currentValue = (Integer) animator.getAnimatedValue();setProgress(currentValue);}});AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator(); valueAnimator.setInterpolator(interpolator);valueAnimator.setDuration(duration);valueAnimator.start();}public int getReachBarSize() {return mReachBarSize;}public void setReachBarSize(int reachBarSize) {mReachBarSize = Utils.dp2px(getContext(), reachBarSize);invalidate();}public int getNormalBarSize() {return mNormalBarSize;}public void setNormalBarSize(int normalBarSize) {mNormalBarSize = Utils.dp2px(getContext(), normalBarSize); invalidate();}public int getReachBarColor() {return mReachBarColor;}public void setReachBarColor(int reachBarColor) {mReachBarColor = reachBarColor;invalidate();}public int getNormalBarColor() {return mNormalBarColor;}public void setNormalBarColor(int normalBarColor) {mNormalBarColor = normalBarColor;invalidate();}public int getTextSize() {return mTextSize;}public void setTextSize(int textSize) {mTextSize = Utils.sp2px(getContext(), textSize);invalidate();}public int getTextColor() {return mTextColor;}public void setTextColor(int textColor) {mTextColor = textColor;invalidate();}public float getTextSkewX() {return mTextSkewX;}public void setTextSkewX(float textSkewX) {mTextSkewX = textSkewX;invalidate();}public String getTextSuffix() {return mTextSuffix;}public void setTextSuffix(String textSuffix) {mTextSuffix = textSuffix;invalidate();}public String getTextPrefix() {return mTextPrefix;}public void setTextPrefix(String textPrefix) {mTextPrefix = textPrefix;invalidate();}public boolean isTextVisible() {return mTextVisible;}public void setTextVisible(boolean textVisible) {mTextVisible = textVisible;invalidate();}public boolean isReachCapRound() {return mReachCapRound;}public void setReachCapRound(boolean reachCapRound) {mReachCapRound = reachCapRound;invalidate();}public int getRadius() {return mRadius;}public void setRadius(int radius) {mRadius = Utils.dp2px(getContext(), radius);invalidate();}public int getStartArc() {return mStartArc;}public void setStartArc(int startArc) {mStartArc = startArc;invalidate();}public int getInnerBackgroundColor() {return mInnerBackgroundColor;}public void setInnerBackgroundColor(int innerBackgroundColor) {mInnerBackgroundColor = innerBackgroundColor;invalidate();}public int getProgressStyle() {return mProgressStyle;}public void setProgressStyle(int progressStyle) {mProgressStyle = progressStyle;invalidate();}public int getInnerPadding() {return mInnerPadding;}public void setInnerPadding(int innerPadding) {mInnerPadding = Utils.dp2px(getContext(), innerPadding);int mInnerRadius = mRadius - mOuterSize / 2 - mInnerPadding;rectInner = new RectF(-mInnerRadius, -mInnerRadius, mInnerRadius, mInnerRadius); invalidate();}public int getOuterColor() {return mOuterColor;}public void setOuterColor(int outerColor) {mOuterColor = outerColor;invalidate();}public int getOuterSize() {return mOuterSize;}public void setOuterSize(int outerSize) {mOuterSize = Utils.dp2px(getContext(), outerSize);invalidate();}private static final String STATE = "state";private static final String PROGRESS_STYLE = "progressStyle";private static final String TEXT_COLOR = "textColor";private static final String TEXT_SIZE = "textSize";private static final String TEXT_SKEW_X = "textSkewX";private static final String TEXT_VISIBLE = "textVisible";private static final String TEXT_SUFFIX = "textSuffix";private static final String TEXT_PREFIX = "textPrefix";private static final String REACH_BAR_COLOR = "reachBarColor";private static final String REACH_BAR_SIZE = "reachBarSize";private static final String NORMAL_BAR_COLOR = "normalBarColor";private static final String NORMAL_BAR_SIZE = "normalBarSize";private static final String IS_REACH_CAP_ROUND = "isReachCapRound"; private static final String RADIUS = "radius";private static final String START_ARC = "startArc";private static final String INNER_BG_COLOR = "innerBgColor";private static final String INNER_PADDING = "innerPadding";private static final String OUTER_COLOR = "outerColor";private static final String OUTER_SIZE = "outerSize";@Overridepublic Parcelable onSaveInstanceState() {final Bundle bundle = new Bundle();bundle.putParcelable(STATE, super.onSaveInstanceState());// 保存当前样式bundle.putInt(PROGRESS_STYLE, getProgressStyle());bundle.putInt(RADIUS, getRadius());bundle.putBoolean(IS_REACH_CAP_ROUND, isReachCapRound());bundle.putInt(START_ARC, getStartArc());bundle.putInt(INNER_BG_COLOR, getInnerBackgroundColor());bundle.putInt(INNER_PADDING, getInnerPadding());bundle.putInt(OUTER_COLOR, getOuterColor());bundle.putInt(OUTER_SIZE, getOuterSize());// 保存text信息bundle.putInt(TEXT_COLOR, getTextColor());bundle.putInt(TEXT_SIZE, getTextSize());bundle.putFloat(TEXT_SKEW_X, getTextSkewX());bundle.putBoolean(TEXT_VISIBLE, isTextVisible());bundle.putString(TEXT_SUFFIX, getTextSuffix());bundle.putString(TEXT_PREFIX, getTextPrefix());// 保存已到达进度信息bundle.putInt(REACH_BAR_COLOR, getReachBarColor());bundle.putInt(REACH_BAR_SIZE, getReachBarSize());// 保存未到达进度信息bundle.putInt(NORMAL_BAR_COLOR, getNormalBarColor());bundle.putInt(NORMAL_BAR_SIZE, getNormalBarSize());return bundle;}@Overridepublic void onRestoreInstanceState(Parcelable state) {if (state instanceof Bundle) {final Bundle bundle = (Bundle) state;mProgressStyle = bundle.getInt(PROGRESS_STYLE);mRadius = bundle.getInt(RADIUS);mReachCapRound = bundle.getBoolean(IS_REACH_CAP_ROUND); mStartArc = bundle.getInt(START_ARC);mInnerBackgroundColor = bundle.getInt(INNER_BG_COLOR);mInnerPadding = bundle.getInt(INNER_PADDING);mOuterColor = bundle.getInt(OUTER_COLOR);mOuterSize = bundle.getInt(OUTER_SIZE);mTextColor = bundle.getInt(TEXT_COLOR);mTextSize = bundle.getInt(TEXT_SIZE);mTextSkewX = bundle.getFloat(TEXT_SKEW_X);mTextVisible = bundle.getBoolean(TEXT_VISIBLE);mTextSuffix = bundle.getString(TEXT_SUFFIX);mTextPrefix = bundle.getString(TEXT_PREFIX);mReachBarColor = bundle.getInt(REACH_BAR_COLOR);mReachBarSize = bundle.getInt(REACH_BAR_SIZE);mNormalBarColor = bundle.getInt(NORMAL_BAR_COLOR);mNormalBarSize = bundle.getInt(NORMAL_BAR_SIZE);initPaint();super.onRestoreInstanceState(bundle.getParcelable(STATE));return;}super.onRestoreInstanceState(state);}@Overridepublic void invalidate() {initPaint();super.invalidate();}}3.设置宽⾼package com.example.myapplication7;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.text.TextUtils;import android.util.DisplayMetrics;import android.view.WindowManager;import java.util.Collection;import androidx.annotation.ColorRes;public class Utils {private static WindowManager windowManager;private static WindowManager getWindowManager(Context context) {if (windowManager == null) {windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); }return windowManager;}public static float getDensity(Context context) {return context.getResources().getDisplayMetrics().density;}public static float getFontDensity(Context context) {return context.getResources().getDisplayMetrics().scaledDensity;}public static DisplayMetrics getDisplayMetrics(Context context) {DisplayMetrics displayMetrics = new DisplayMetrics();getWindowManager(context).getDefaultDisplay().getMetrics(displayMetrics);return displayMetrics;}public static int dp2px(Context context, float dp) {return (int) (getDensity(context) * dp + 0.5f);}public static int px2dp(Context context, float px) {return (int) (px / getDensity(context) + 0.5f);}public static int sp2px(Context context, float sp) {return (int) (getFontDensity(context) * sp + 0.5f);}public static int px2sp(Context context, float px) {return (int) (px / getFontDensity(context) + 0.5f);}public static int getWindowWidth(Context context) {return getDisplayMetrics(context).widthPixels;}public static int getWindowHeight(Context context) {return getDisplayMetrics(context).heightPixels;}public static String getPathFormat(String path) {if (!TextUtils.isEmpty(path)) {int lastPeriodIndex = stIndexOf('.');if (lastPeriodIndex > 0 && lastPeriodIndex + 1 < path.length()) {String format = path.substring(lastPeriodIndex + 1);if (!TextUtils.isEmpty(format)) {return format.toLowerCase();}}}return "";}public static boolean isGif(String url) {return "gif".equals(getPathFormat(url));}public static Bitmap getTextBitmap(Context context, int width, int height, int radius, String text, int textSize, @ColorRes int bgColor) {radius = dp2px(context, radius);Bitmap bitmap = Bitmap.createBitmap(dp2px(context, width), dp2px(context, height), Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);RectF rect = new RectF(0, 0, canvas.getWidth(), canvas.getHeight());Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setColor(context.getResources().getColor(bgColor));canvas.drawRoundRect(new RectF(0, 0, rect.width(), rect.height()), radius, radius, paint);paint.setColor(Color.WHITE);paint.setTextSize(dp2px(context, textSize));paint.setTextAlign(Paint.Align.CENTER);Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();float baseline = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top) / 2;canvas.drawText(text, rect.centerX(), baseline, paint);return bitmap;}public static Drawable getTextDrawable(Context context, int width, int height, int radius, String text, int textSize, @ColorRes int bgColor) { return new BitmapDrawable(getTextBitmap(context, width, height, radius, text, textSize, bgColor));}public static boolean isEmpty(Collection<?> collection) {return collection == null || collection.isEmpty();}public static int getSize(Collection<?> collection) {return collection == null ? 0 : collection.size();}}4.主界⾯package com.example.myapplication7;import android.graphics.Bitmap;import android.graphics.Color;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.util.Log;import android.view.View;import androidx.annotation.NonNull;import androidx.annotation.Nullable;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private String fileName;private CircleProgressView progressView;private Bitmap bitmap;private int i = 0;final Handler handler = new Handler(new Handler.Callback() {@Overridepublic boolean handleMessage(@NonNull Message msg) {if (msg.what == 1) {//do somethingint a = (int) msg.obj;Log.e("TAG", "handleMessage" + a);progressView.setProgress(a * 10);if (a == 10) {progressView.setVisibility(View.GONE);}}return false;}});@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(yout.activity_main);progressView = findViewById(R.id.progressView);getWindow().setTitleColor(Color.rgb(65, 183, 216));//主线程中调⽤：new Thread(new MyThread()).start();}class MyThread extends Thread {//这⾥也可⽤Runnable接⼝实现@Overridepublic void run() {while (true) {try {Thread.sleep(500);//每隔1s执⾏⼀次Message msg = new Message();msg.what = 1;i++;msg.obj = i;handler.sendMessage(msg);} catch (InterruptedException e) {e.printStackTrace();}}}}}5.布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android" xmlns:app="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.example.myapplication7.CircleProgressViewandroid:id="@+id/progressView"android:layout_width="150dp"android:layout_height="150dp"android:progress="0"app:cpv_innerPadding="2dp"app:cpv_outerColor="@android:color/darker_gray"app:cpv_outerSize="1dp"app:cpv_progressNormalColor="@android:color/darker_gray"app:cpv_progressReachColor="@color/white"app:cpv_progressStyle="FillInnerArc" /></LinearLayout>6.资源⽂件<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="CircleProgressView"><attr name="cpv_progressNormalColor" format="color" /><attr name="cpv_progressReachColor" format="color" /><attr name="cpv_progressTextColor" format="color" /><attr name="cpv_progressTextSize" format="dimension" /><attr name="cpv_progressTextOffset" format="dimension" /><attr name="cpv_progressNormalSize" format="dimension" /><attr name="cpv_progressReachSize" format="dimension" /><attr name="cpv_radius" format="dimension" /><attr name="cpv_progressTextVisible" format="boolean" /><attr name="cpv_progressStartArc" format="integer" /><attr name="cpv_progressTextSkewX" format="dimension" /><attr name="cpv_progressTextPrefix" format="string" /><attr name="cpv_progressTextSuffix" format="string" /><attr name="cpv_innerBackgroundColor" format="color" /><attr name="cpv_progressStyle" format="enum"><enum name="Normal" value="0" /><enum name="FillInner" value="1" /><enum name="FillInnerArc" value="2" /></attr><attr name="cpv_innerProgressColor" format="color" /><attr name="cpv_innerPadding" format="dimension" /><attr name="cpv_outerColor" format="color" /><attr name="cpv_outerSize" format="dimension" /><attr name="cpv_reachCapRound" format="boolean" /></declare-styleable></resources>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
网页加载进度条详解（推荐）
⽹页加载进度条详解（推荐）( ⽹页加载时，有时内容过多，⼀直加载等待，⽽此时⽹页显⽰⽩⾊不显⽰任何的东西，给⽤户的体验相当不好，所以，⼀般会在⽹页加载成功前，会以进度条的形式，给⽤户进⾏展⽰。
让⽤户可以看到动画，知道⽹页正在加载中)常见的⽅式有以下：1. 定时器的进度条（假的）1 2 3 4 5 6 7 8 9<script type="text/javascript">$(function(){var loading=‘<div class="loading"><div class="pic"></div></div>‘; $("body").append(loading);setInterval(function(){$(".loading").fadeOut();},3000);});</script>2. 真实的获取内容，实现加载进度条要实现根据真实内容，来加载进度条，下⾯要介绍两个知识点：document.onreadystatechange 页⾯加载状态改变时的事件document.readyState 返回当前⽂档的状态1. uninitialized - 还未开始载⼊2. loading - 载⼊中3. interactive - 已加载，⽂档与⽤户可以开始交互4. complete - 载⼊完成2.1. 可以将如上定时器的代码，修改为：1 2 3 4 5document.onreadystatechange=function(){ if(document.readyState=="complete"){ $(".loading").fadeOut();}}2.2. 将进度条变成css的⼩动画进⾏显⽰推荐⽹站：此⽹站有各种表⽰加载的⼩动画在线给css添加前缀进度条⼩动画2.3：定位在头部的进度度,如下图：注：此实现，也并未是真实的显⽰出加载的进度，⽽是利⽤：代码从上到下执⾏的原则在代码的不同位置，改变线条的宽度，在页⾯的最后，让宽度为100%来实现。
iOS App中数据加载的6种方式
iOS App中数据加载的6种方式我们看到的APP，往往有着华丽的启动界面，然后就是漫长的数据加载等待，甚至在无网络的时候，整个处于不可用状态。
那么我们怎么处理好界面交互中的加载设计，保证体验无缝衔接，保证用户没有漫长的等待感，而可以轻松自在的享受等待，对加载后的内容有明确的预期呢?今天这篇文章，会介绍6种常见的加载模式设计，和3种减少等待感的具体手法，希望对追求极致体验的产品人有帮助。
一、6种常见的数据加载模式目前APP设计中，合理的数据加载方式，主要分如下六种：这六种方式，适用于不同的需求场景，也适用于不同类型的APP，让我们来一一解读。
全屏加载就是整个屏幕白屏进行数据加载，一般会有菊花转配合，常用于手机网页的加载中。
优点是能保证内容的整体性，全部加载完才能够系统化的阅读。
缺点比较明显，就是有非常强烈的等待感，3s以上会产生焦躁情绪，所以在地铁等信号不好的地方，使用手机网页获取内容实在是比较灾难的一件事情。
一般这种情况会配合有明确进度标识的进度条。
如果一个页面有图片有文字，加载图片比较慢的情况下，可以先把文字都加载出来，保证用户可以顺畅阅读，然后再加载比较费流量的图片。
如果是用这一种加载方式，活动页什么的，千万不能重要信息全部放在头图上，导致加载不出来。
重要操作也不能用图片按钮，否则也会有操作显示不出来的风险。
优点是可以帮助用户快速阅读内容，了解信息。
缺点是也许会丢失掉重要的关键信息，无法建立信息获取的闭环。
这种加载形式更加适用于内容阅读型的APP。
当当前页与下一页是整页切换的时候，可以考虑采用整页加载的形式，但是要保证每个页面的数据量不是特别的大。
优点是能保证每个页面的完整性，体验比较整体。
缺点是不好保证整页的加载效率，且有可能影响浏览的流畅度。
一般适用于宫格图片模式、全屏图片模式、网状详情页模式。
自动加载适用于长列表的情况，可以设定规则，默认加载20条，滚动第20条的时候，自动再加载20条。
python pyqt进度条用法
python pyqt进度条用法PyQt是一个流行的Python GUI工具包，它提供了丰富的功能，包括进度条。
在PyQt中，你可以使用QProgressBar类来创建和管理进度条。
下面我将从多个角度介绍如何在PyQt中使用进度条。
首先，要使用PyQt的进度条，你需要先安装PyQt库。
你可以使用pip命令来安装PyQt5：python.pip install PyQt5。
一旦安装完成，你就可以在你的Python代码中引入PyQt模块：python.from PyQt5.QtWidgets import QApplication, QMainWindow, QProgressBar.接下来，你可以在你的GUI应用程序中创建一个进度条：python.class MyWindow(QMainWindow):def __init__(self):super().__init__()。
self.initUI()。
def initUI(self):self.progress = QProgressBar(self)。
self.progress.setGeometry(10, 10, 200, 25)。
self.setWindowTitle('Progress Bar')。
self.setGeometry(300, 300, 250, 150)。
self.show()。
在这个例子中，我们创建了一个QMainWindow，并在其上放置了一个进度条。
接下来，你可以使用setValue方法来设置进度条的值。
例如，你可以在按钮点击事件中逐步增加进度条的值：python.def increaseProgress(self):curValue = self.progress.value()。
if curValue < 100:self.progress.setValue(curValue + 10)。
vue实现简单loading进度条
vue实现简单loading进度条刚学习vue不久，今天试着⽤vue做了⼀个简单的loading进度条，对于vue的⽣命周期和钩⼦函数⼜有了新的理解，下⾯分享给⼤家，绝对⼊门级。
⼀、进度条原理这个就很简单了，也是我们经常可以⽤到的，这⾥只做⼀个最简单的，页⾯刷新⾃动加载进度条。
主要是让进度条的width不断增加⾄100%就可以啦~好了，进⼊正题。
⼆、jquery实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https:///foundation/5.5.3/css/foundation.min.css" ><link rel="stylesheet" href="/assets/foundation-icons/foundation-icons.css" ><title>jq进度条</title></head><body><div id="app"><div class="progress round alert"><span class="meter" style="width:0%">0%</span></div></div><script src="https:///vue/2.4.4/vue.min.js"></script><script src="https:///jquery/2.1.1/jquery.min.js "></script><script src="https:///foundation/5.5.3/js/foundation.min.js "></script><script>$(function () {var html = $('.meter');var htmlW = $('.meter').val();var styleW = parseInt($('.meter').css('width'));var clearInt = setInterval(function () {styleW++;var styleWW = styleW + '%';html.css('width', styleWW);html.html(styleWW);if (styleW == 100) {clearInterval(clearInt);}}, 20)})</script></body></html>三、vue实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue进度条</title><link rel="stylesheet" href="https:///foundation/5.5.3/css/foundation.min.css" ><link rel="stylesheet" href="/assets/foundation-icons/foundation-icons.css" ><style>.bar{color: #fff;text-align: center;}</style></head><body><div id="app"><div class="progress alert round"><span class="meter bar" :style="{width:proBar+'%',}" >{{proBar}}</span></div></div><script src="https:///vue/2.4.4/vue.min.js"></script><script src="https:///jquery/2.1.1/jquery.min.js "></script><script src="https:///foundation/5.5.3/js/foundation.min.js "></script><script>var app = new Vue({el: '#app',data: {proBar: 0,},created(){this.change();},methods: {change: function() {var clearInt = setInterval(function() {app.proBar++;console.log(app.prpBar);if (app.proBar == 100) {clearInterval(clearInt);}}, 20)}}})</script></body></html>对⽐两段代码显然vue要⽅便许多，因为是双向绑定，不⽤来回操作dom，就很简单省⼼啦。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
先来看下效果：
第一步：新建一flash文档，降背景色改为你喜欢的颜色，大小自己定，帧频为24
第二步：新建一影片剪辑元件“loading”，此元件舞台上用字体工具写出loading字样，写完后在时间轴上图层一的第四十一帧右键插入帧，新建图层，这时绘出loading后面“点”的效果，单击图层2的第一帧在舞台上loading后面画出一个实心圆形（无线条的园），大小为2*2，选中图层1的第14帧处，插入一关键帧，并复制一个小圆粘贴到适当的位置，再在图层一的第28帧处插入一关键帧，再次复制一个小园，这时有三个小圆位置如图
第三步：我们回到主场景中，把loading元件拖入到主场景中的适当位置，新建一图层图层二，这是我们选择字体工具，并在下面属性面板中选择其为动态文本，属性设置如图在舞台适当位置点击一下出现一个空白文本框，设置其实例名称为loadb
第四步：新建一图层三，在图层三的第一帧上写出如下代码
这时再第二帧开始创建你自己的flash作品，你的作品文件越大效果会越好哦，注意你在测试影片时候要按下两次crtl+enter哦
来源：中国教程网。