缓冲进度条或加载进度条

缓冲进度条或加载进度条,在加载页面或者视频加载过程中,为了做到更好的UI及App功能体验交互,这些缓冲加载的等待效果是必不可少的;

下面来看一下旋转的动画效果:那么,他们的具体源码在这里:loading_1:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >
        <gradient
            android:centerColor="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

loading_2:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item >
        <rotate
            android:drawable="@drawable/movie_loading"
            android:fromDegrees="0.0"
            android:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="1080.0" />
    </item>

</layer-list>

loading_3:

<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_01"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_02"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_03"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_04"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_05"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_06"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_07"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_08"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_09"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_10"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_11"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_12"
            android:gravity="left" />
    </item>

</animation-list>

activity_main.java:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:background="#222222">

    <ProgressBar
        android:id="@+id/loading_1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="60dp"
        android:indeterminate="false"
        android:padding="5dp"
        android:indeterminateDrawable="@drawable/loading_1" />

    <ProgressBar
        android:id="@+id/loading_2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="60dp"
        android:indeterminate="false"
        android:padding="5dp"
        android:indeterminateDrawable="@drawable/loading_2" />

    <ProgressBar
        android:id="@+id/loading_3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminate="false"
        android:layout_marginTop="60dp"
        android:padding="5dp"
        android:indeterminateDrawable="@drawable/loading_3" />

</LinearLayout>

不需要在Activity.java中添加任何代码,已经搞定!

后待续。。。

时间: 2024-10-15 03:08:21

缓冲进度条或加载进度条的相关文章

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

给WebView添加漂亮的加载进度条

为了增强用户体验,所有在WebView头部给加了个进度条,看起来不错哦. 布局XMl:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&q

【css系列】创建网页加载进度条

一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.j

iOS WKWebView添加网页加载进度条(转)

一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView *wkWebView; @property (nonatomic, strong) UIProgressView *progressView; 2.初始化progressView - (void)viewDidLoad { [super viewDidLoad]; //进度条初始化 self.pr

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

Chromium中网页加载进度条研究

1.     Shell.java中有成员变量:mProgressDrawable. 该成员变量在方法:onFinishInflate中被初始化. 在该类中有方法:onLoadProgressChanged,该方法中对进度条的值进行改变,并且对刷新完成事件进行反馈. 2.     上面的这个方法是在cc文件中被调用的. 上面方法对应的cc方法是shell_android.cc文件中的LoadProgressChanged方法. voidShell::LoadProgressChanged(Web

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

你没见过吧?16款形态各异的加载进度条设计

互联网连接越来越快,但难免有一些时刻需要我们等待.在这种情况下,创意的设计师尽力减轻用户等待的痛苦,苦思敏想设计各种创意的进度条(或加载条)效果 ,让用户等待的过程变得更加愉悦. 您可能感兴趣的相关文章 22套 Web & Mobile PSD 用户界面素材 45套精美的手机界面设计素材和设计工具 分享30套精美的Web和手机开发UI素材 60个精美的免费移动开发PSD素材资源 45套新鲜出炉的精美 PSD 网页设计素材 Loading by pearlsomani Flat Loading B